韩剧电影_韩剧电影推荐排行榜_最新韩国电影电视剧在线看 - 韩影像素
...
然后是样式部分。
我把颜色定一下：
--ink:#0b0d14
--panel:#141826
--panel2:#1b2032
--line:rgba(255,255,255,.08)
--amber:#ffb703
--amber2:#ff8800
--mint:#5eead4
--text:#e8ecf6
--muted:#8f9ab5
好，现在设计布局。
头部：吸顶。logo 用内联 SVG 加一个胶片形状，配文字“韩影像素”。
导航链接：热搜榜(#hot)、韩剧精选(#kdrama)、韩影剧场(#kmovie)、短剧速看(#shortplay)、动漫番剧(#anime)、综艺观察(#variety)、影视资讯(#news)、常见问题(#faq)。
移动端：汉堡按钮切换导航面板。
面包屑：首页 › 韩剧电影
主视觉区：左侧放一个大轮播图——其实要不做个“胶片条”式的轮播？还是简单点：用纯 CSS 滚动吸附做轮播，带 3 张幻灯片，再配 JS 自动轮播？保持简单：一组可滚动的卡片，带圆点。嗯，也可以做一个带箭头的 JS 轮播。
再简化一点：主视觉区三张幻灯片堆叠展示……不行。
我用 JS 做个带圆点指示器的轮播。用 opacity 做淡入淡出切换。
其实更简单也更稳：用 translateX 做水平轨道滑动。
主视觉区：
text
复制
下载
韩剧电影 · 把值得熬夜的那一部挑出来
...
...
嗯，H1 应该包含主关键词“韩剧电影”。好。
也许更好的做法是：Hero 区做成两栏——左边文字带 H1 + 统计数字，右边放轮播图。
就这么办。
然后热搜榜部分：横向滚动的卡片。
接着是各内容板块。
侧边栏：做成吸顶，里面放榜单、标签、迷你留言引导。
等一下——侧边栏和主内容并排的话……我这样安排：主内容区用两栏网格，主栏放板块，侧栏放 aside。
其实侧栏放左边还是右边都行。放右边。
但这样热门板块和分类板块都放在主内容区。好。
底部再加一个全宽的资讯 + FAQ + 留言区。
现在来写卡片数据。
卡片结构：
html
复制
下载
运行
品牌 logo 用内联 SVG，画一个简单的胶片/播放图形。
主视觉区域：
html
复制
下载
运行
今日更新 · 29 部新片新剧
韩剧电影：把值得熬夜的那一部挑出来
我们在韩剧电影的海洋里做了三年人工筛选……
...
...slides
轮播幻灯片：3 张 banner 图片，带叠加文字。用轨道滑动。
html
复制
下载
运行
...
JS 处理自动播放和圆点切换。
嗯，但圆点按钮要是动态生成的。我就写死在 HTML 里再绑定事件。
然后是面包屑。
html
复制
下载
运行
主内容区：
html
复制
下载
运行
更新至12集
9.2