更新至24集
9.2
▶
大 banner 卡片
两张叠放的小卡片
每个 banner 卡片都带图片、标题、副标题、标签、按钮“立即观看 / 加入片单”。
“模拟播放/预约入口”——按钮要做成“播放”样式，点击后弹出提示或什么都不做？“非死链”——应该要有反馈，不能是死链。用 JS 让点击弹一个 toast：“播放器加载中……”吧。其实也可以打开详情弹窗。嗯，播放按钮做成 toast 提示更贴近真实。
就这么定：播放按钮触发 toast。
继续设计各个内容区。
html
复制
下载
运行
更新至24集
9.2
▶
卡片点击——点击整张卡片（除了底部的按钮）打开模态框。用 JS 事件委托实现：点到按钮就忽略，否则打开模态框，数据从 data 属性里取。
模态框那边需要内容；用 data-desc 和 data-title 就够。
然后是横向滚动列表——也许可以拿来做“高清电影”区，搞点不一样的视觉节奏。嗯，横向滚动配合滚动吸附其实挺好看的。
侧边栏呢？“页面侧边栏”——后面加一个 aside，放排行榜。
布局上这样安排：
热播电视剧全集：#hot-tv 网格布局
高清电影区：#hd-movie 横向轨道
再往下是双栏主布局：左边是综艺/动漫/纪录片这些栏目，右边是 aside 榜单
嗯，这样也有点复杂了。不如直接铺开：
#variety 综艺——用错落的小卡片
#anime 动漫——另一个网格
#docu 纪录片/短剧——标签云
其实维持简练一点更好。
最终页面分区顺序：
header + nav
面包屑
hero #top
ticker（滚动播报）
#hot-tv 热播电视剧全集——卡片网格（6 张卡）
#hd-movie 高清电影——横向滚动轨道（5 张卡）
双栏布局：[左侧：#variety 综艺 + #anime 动漫卡片] [右侧 aside 榜单单]
#docu 纪录片 · 短剧 标签云 + 卡片
#news 相关资讯 + #faq 常见问题
#guest 留言区
footer
差不多够 6 个以上了。
现在开始写 CSS。
css
复制
下载
:root{
--ink:#0a0f1e;
--ink-2:#111834;
--ink-3:#1a2246;
--line:rgba(255,255,255,.08);
--amber:#ffb020;
--jade:#2ee6c5;
--text:#e8ecf7;
--muted:#8b96b8;
--radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
background:var(--ink);
color:var(--text);
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
背景加一点轻微的径向渐变做氛围。
头部吸顶，加模糊。
导航在移动端折叠——给汉堡按钮加 JS 切换。
我仔细写一下响应式的断点：
桌面端 >1024px
平板 641-1024
移动端
韩国电影免费在线观看｜热播电视剧全集每日更新 · 手机免费在线观看
更新至24集
9.2
▶