不用外部字体。 现在仔细写 CSS。 设计变量： text 复制 下载 :root{ --ink:#12101a; --ink-2:#1b1826; --rose:#ef5f7e; --rose-soft:#ffb3c6; --gold:#e8c07d; --cream:#f7f3ee; --muted:#9c94a8; } 主体背景：深色，带一层淡淡的径向渐变。 顶部导航吸顶。 先把区块布局定下来： text 复制 下载
...
轮播/主视觉
平台热搜榜
经典佳片
-- 不过其实主布局还是用两栏网格吧 ...
嗯，需求里提到侧边栏，那就做一个 main 网格，左边是内容区，右边是 aside 侧栏。 但主视觉和平台热搜可以做成全宽的。布局改成这样： text 复制 下载
...
这样侧栏就是粘性定位。 等下，短剧/动漫专区要不要做成全宽？先留在内容列里吧。 现在来细化内容。得写得有原创感。 关键页面文案： H1：韩国爱情片深度观影指南：从经典纯爱到当代都市心动 嗯，H1 里主关键词只出现一次，这样没问题。 接下来写实际内容。 主视觉轮播：三张 banner 图配标题文字。用 CSS 滚动吸附或者简单堆叠。就简单做——一个 hero 大图加侧边两张小图？或者用纯 CSS 的滚动吸附轮播，横向滚动，不用 JS。就做横向吸附滚动加 scroll-snap —— 触摸端手感不错。不过“轮播”本身需要 JS 才能自动播放，滚动吸附也行吧，我加几条小圆点。 其实更简单——做一张主打的 hero 大图，加一张次要卡片。但轮播更经典。就用水平 scroll-snap 轮播，三张 slide，每张 100% 宽度，配合 overflow-x:auto。 平台热搜榜：用网格排六个平台卡片——腾讯视频、爱奇艺、红果短剧、小红书、抖音、快手。每个卡片有图标（emoji 或内联 SVG）、平台名、三条带排名徽章的热搜条目。要不要加个“热门”/“新”角标。 经典佳片：卡片网格，每张卡片带图片、标题、年份、标签、评分和底部按钮“播放/预约”。点击卡片打开弹窗。 先写大概 8 部电影吧——原创名字肯定不行，得用真实的韩国爱情片： 《假如爱有天意》2003 《我脑中的橡皮擦》2004 《触不到的恋人》2000 《八月照相馆》1998 《建筑学概论》2012 《狼少年》2012 《现在去见你》2018 《分手的决心》2022 这些是真实电影，但简介得我原创写。 弹窗内容：完整简介、导演、演员、我的原创短评。 演员幕后：关于导演风格和演员的文章——用 H3 拆小块。 短剧与动漫：用卡片展示红果短剧和动漫条目。 相关资讯：3 到 4 条新闻条目，带日期。 常见问题：5 个问答，用 details/summary 或者纯静态手风琴。用
做原生折叠——没有 JS，没有外部库。不错。 评论：展示已存在的评论，带头像，不提供提交表单。也许放一个禁用的输入框，加个提示。需求说“评论/留言只做展示无法提交”——所以只展示，不放表单。 其实也许可以显示一个带 textarea 的表单，但用 disabled/只读并加个提示。嗯，“禁止出现提交功能”——不用表单，就纯展示评论列表，再加一条“登录后参与讨论”的提示。 稳妥一点：只展示评论列表，不加表单。 侧边栏：热门榜单，用锚点链接指向对应板块；标签云链接到锚点；平台热度 mini 榜单。 现在开始写 HTML。 图片占位 / 懒加载：loading="lazy" 加上 onerror 回退？onerror 用内联 JS——允许（不是外部资源）。但“禁止出现提交功能”只针对表单。内联 onerror 可以。不过为了代码干净，我可以在文档里挂一个全局错误处理： js 复制 下载 document.addEventListener('error', function(e){ if(e.target.tagName==='IMG'){ e.target.classList.add('img-fallback'); e.target.style.background='...' } }, true); 用捕获阶段处理图片加载错误。可以。 加载骨架：CSS 背景渐变加动画，在图片加载完成前显示。可以加 img { background: linear-gradient(...) }。 不用 IntersectionObserver 也行，简单点。 点击卡片打开模态框——需要用 JS 来实现。写个小型 JS 弹窗系统，把数据存在 data 属性里。 做法是：每张卡片都用 data 属性挂上详情数据，点击时填充模态框。 卡片用 data-title、data-year、data-cast、data-desc、data-score、data-img、data-tags。 现在开始写代码吧。 模态框 HTML： html 复制 下载 运行 这些链接都指向页内锚点——没问题，不跳外链。 然后是动画和微交互： 卡片悬停时上浮 + 图片缩放 播放按钮悬停时旋转/发光 角标脉冲 榜单条目悬停时位移 我把这部分仔细写一下。 CSS 骨架： css 复制 下载 *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px} body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#12101a;color:#eae6f0;line-height:1.7;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} 好，现在开始搭整体结构。 顶部滚动条： html 复制 下载 运行
🔥 热榜
《现在去见你》重映票房破... ...
用 CSS 动画让 ticker-move 横向滚动。 导航栏： html 复制 下载 运行
韩 韩影恋人Korean Romance Cinema
移动端：导航栏折叠，通过 JS 切换 .open 类。 面包屑： html 复制 下载 运行 现在做主视觉轮播。图片用 /upload/vod/066-banner.webp 这些。 html 复制 下载 运行
...
因为是水平 scroll-snap，hero-rail 要设置 display:flex; overflow-x:auto; scroll-snap-type:x mandatory;，每个 slide 用 flex:0 0 100%; scroll-snap-align:start; 但桌面端这样会显得太高。桌面端限制一下高度，用 aspect-ratio 来控。其实每张 slide 设个 min-height: 380px 就行了。 嗯，横向滑动区域在桌面端滚动条会有点怪，但还能接受。加个 scrollbar 隐藏吧。 备选方案是让 hero 直接做成静态布局，但需求里提到了轮播图。所以还是保留 scroll-snap 轮播。 OK。 现在逐个写板块。 平台热搜榜（#platform-hot）： html 复制 下载 运行

全网平台热搜 · 韩式心动实时榜

聚合腾讯视频、爱奇艺、红果短剧、小红书、抖音、快手六大平台当日热度

...
6 张卡片。 经典佳片（#classic）：带数据属性的卡片网格。 我准备写 8 张卡。 每张卡的结构： html 复制 下载 运行
假如爱有天意 韩国爱情片海报 4K修复 9.2

假如爱有天意

2003 · 韩国 · 纯爱

...

影评 幕后
等一下，需求说：“点击整个卡片区域（图片、标题区域，但不包括底部按钮）时，弹出一个模态框”。所以底部按钮是链接，不会触发模态框。好。 图片上那个 ▶ 按钮也是个按钮——点它应该也打开模态框，所以它得是个按钮，但不能被当成底部按钮……其实点它正好可以触发模态框，没问题。 嗯，不过这个