css
复制
下载
.poster::after{content:attr(data-name);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.28);font-size:13px;letter-spacing:2px;z-index:0}
但这样图片加载失败时它就会露出来，加载成功后图片又把盖住。可是图片有 opacity 过渡……如果加 .loaded img{opacity:1}，图片就会盖在 ::after 文字上面（因为 img 的 z-index）。得确保 img 的 z-index 更高。
把 .poster img{position:relative;z-index:1} 设上，::after 用 z-index:0。::before 的骨架屏也是 z-index:2，但一加 .loaded 它就没了。
其实骨架屏在上层会盖住图片，所以加 .loaded 后移除它是对的。
不过骨架屏 ::before 带背景动画——把它设到 z-index 2，加上 pointer-events none。
OK。
而且 ::after 的文字也会被图片盖住。没问题。
等等，顺序要理一下：.poster::after 的 content 文字应该在底层。img 的 z-index 1 会盖住它。徽标和评分才用 z-index 2。
好。
现在开始写。
我来写整个页面。
关于卡片用
再加 role button？可访问性方面——加 tabindex="0" 和键盘事件？不是必须的，但加上体验会更好。为了简洁先跳过，不过我会在卡片上加上 tabindex="0"，并在 JS 里监听 Enter 键。嗯，算了，先不搞键盘处理，省得代码出 bug。
好，继续写。
侧边栏排行榜：
html
复制
下载
运行
等等——侧边栏里的 会多出来几个。不过没关系，这是侧边栏标题。
嗯，但主内容区的章节也用 h2，应该没问题。
那 #ranking 还放侧边栏里吗？本来想让排行榜当主内容栏目的……算了，侧边栏标题直接用 h2 就行。
不过反正已经用了 h2，要不要改成 h3？不行——按文档层级，得从 h1 往下走。还是保持 h2。
嗯，其实侧边栏标题用 h2 也行。就这吧。
然后主内容区还差“高分榜单”这个分类？侧边栏的排行榜已经把它覆盖了。
算了，还是动一下：把排行榜也放进主内容区，做成一个网格。不行，更简单的是侧边栏里那个排行榜直接负责这个。
那我列一下栏目——主内容区有：最新电影、热播剧、综艺、动漫、经典佳片 = 5 个。再加上侧边栏排行榜、热搜标签、手机指南、资讯、FAQ、评论 = 总共 11 个板块。
导航里就指向这些：#new-movie、#hot-tv、#variety、#anime、#classic、#ranking、#news、#faq。
好，8 个导航项。
开写吧。
资讯区，3 篇带图片的文章。
FAQ 区，6 个问答。
评论，5 条带头像的评论。
页脚。
JSON-LD。
现在开始写。
JS 里 querySelectorAll('.btn-play,.btn-fav') 这个——还有 hero 区域……没问题。
再确认一下：播放/收藏按钮放在 .card-actions 里，而 .card-actions 在 .work-card 里。点击按钮 → 触发按钮自己的监听器 → stopPropagation → 不会打开模态框。
现在完整写出来。
有个点：aspect-ratio 的支持——没问题。
写最终代码。
“更新至”徽标的配色用强调色。
把 CSS 完整写出来：
css
复制
下载
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#f6f3ec;color:#14201d;line-height:1.65;font-size:15px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
.container{max-width:1240px;margin:0 auto;padding:0 16px}
section[id],div[id]{scroll-margin-top:82px}
嗯，div[id] 会不会太宽泛了？没事。
页头按计划来。
面包屑：
css
复制
下载
.crumb{max-width:1240px;margin:14px auto 0;padding:0 16px;font-size:13px;color:#7a8783}
.crumb a{color:#15423c}
.crumb a:hover{color:#d9552f}
.crumb span{margin:0 6px;color:#b9c2be}
轮播图区：
css
复制
下载
.hero{max-width:1240px;margin:18px auto 0;padding:0 16px}
.hero-intro{margin-bottom:14px}
.hero-intro h1{font-size:24px;line-height:1.4;letter-spacing:.2px;color:#0f3330;font-weight:800}
.hero-intro p{margin-top:8px;font-size:13.5px;color:#6b7a76;max-width:820px}
桌面端 H1 字号：用 clamp → font-size:clamp(18px,3.2vw,26px)。
css
复制
下载
.hero-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px}
.hero-main{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#164a44,#0d2c29);min-height:230px}
.hero-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s}
.hero-main:hover img{transform:scale(1.05)}
.hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(13,44,41,.92),rgba(13,44,41,0))}
高度用 aspect-ratio 来定：.hero-main{aspect-ratio:16/9}，移动端自动堆叠。
.hero-side 在移动端：grid-template-columns:1fr 1fr。
css
复制
下载
.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.hero-mini{position:relative;border-radius:14px;overflow:hidden;background:#0d2c29;aspect-ratio:16/9}
嗯，用 grid-template-rows: 1fr 1fr 但 aspect-ratio 会冲突。那就把 hero-side 设成 display:grid;gap:14px，默认单列，每个 mini 用 aspect-ratio:16/7。桌面端的话，两张 mini 加起来高度应该和主图差不多。主图是 16/9，宽度大概是 1240*0.6≈730，高度约 410，再减去 padding……呃。干脆直接给 hero-side 设 grid-template-rows: 1fr 1fr，去掉 aspect-ratio，让每个 mini 用 min-height:120px 填满。图片用 object-fit:cover 绝对定位铺满。
其实最简单的做法是：.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:14px}，.hero-mini{position:relative;overflow:hidden;border-radius:14px;background:#0d2c29;min-height:110px}，里面 img 绝对定位铺满整个区域。
桌面端整个 hero-grid 的高度由主图 aspect-ratio: 16/9 撑起来。这样 hero-side 的子项就会自动等高。挺好。
移动端把 hero-grid 改成单列；主图保持 16/9；hero-side 用 grid-template-rows:auto auto 并给子项设 aspect-ratio: 16/9。
媒体查询：
css
复制
下载
@media(max-width:860px){
.hero-grid{grid-template-columns:1fr}
.hero-side{grid-template-columns:1fr 1fr;grid-template-rows:none}
.hero-mini{aspect-ratio:16/10}
}
然后 mini 里的图片再绝对定位铺满。
好，接着做带横向滚动的标签栏。
css
复制
下载
.tag-bar{max-width:1240px;margin:16px auto 0;padding:0 16px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;align-items:center}
.tag-bar::-webkit-scrollbar{display:none}
.tag-bar-label{flex:0 0 auto;font-size:12px;color:#8d9a96;letter-spacing:1px;padding-right:4px;border-right:1px solid #ddd7ca}
.tag-bar a{flex:0 0 auto;font-size:13px;padding:6px 13px;border-radius:999px;background:#fff;border:1px solid #e6e0d4;color:#3a4a46;transition:.25s;white-space:nowrap}
.tag-bar a:hover{background:#15423c;color:#fff;border-color:#15423c;transform:translateY(-2px)}
主内容区布局：
css
复制
下载
.layout{max-width:1240px;margin:26px auto 0;padding:0 16px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr;gap:22px}}
区块：
css
复制
下载
.section{margin-bottom:34px}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px;position:relative;padding-left:14px}
.section-head::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:2px;background:linear-gradient(180deg,#d9552f,#f2c14e)}
.section-head h2{font-size:19px;font-weight:800;color:#0f3330;letter-spacing:.2px}
.section-note{font-size:12.5px;color:#8d9a96}
.more-link{margin-left:auto;font-size:13px;color:#d9552f;font-weight:600}
.more-link:hover{text-decoration:underline}
作品网格：
css
复制
下载
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px}
卡片：
css
复制
下载
.work-card{background:#fff;border-radius:14px;padding:9px;border:1px solid #ece6da;transition:transform .3s,box-shadow .3s;cursor:pointer;display:flex;flex-direction:column}
.work-card:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(15,51,48,.13)}
海报按计划来。
徽标：
css
复制
下载
.badge{position:absolute;top:8px;left:8px;z-index:3;background:linear-gradient(135deg,#d9552f,#e57a3d);color:#fff;font-size:11px;padding:2px 7px;border-radius:6px;font-weight:600;letter-spacing:.3px}
.score{position:absolute;top:8px;right:8px;z-index:3;background:rgba(13,44,41,.78);color:#f2c14e;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:6px}
卡片主体：
css
复制
下载
.card-body{padding:9px 4px 4px}
.card-title{font-size:14px;font-weight:700;color:#16241f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:11.5px;color:#8d9a96;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
卡片操作区：
css
复制
下载
.card-actions{display:flex;gap:6px;margin-top:auto;padding:8px 4px 2px}
.card-actions button{flex:1;font-size:12px;padding:6px 0;border-radius:8px;transition:.22s;font-weight:600}
.btn-play{background:#15423c;color:#fff}
.btn-play:hover{background:#d9552f}
.btn-fav{background:#f6f3ec;color:#4c5a56;border:1px solid #e4ded2}
.btn-fav:hover{background:#f2c14e;color:#0f3330;border-color:#f2c14e}
侧边栏：
css
复制
下载
.side-card{background:#fff;border:1px solid #ece6da;border-radius:16px;padding:16px;margin-bottom:18px}
.side-title{font-size:16px;font-weight:800;color:#0f3330;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.side-title::before{content:"";width:5px;height:5px;border-radius:50%;background:#d9552f;box-shadow:0 0 0 4px rgba(217,85,47,.15)}
排行榜列表：
css
复制
下载
.rank-list li+li{margin-top:10px}
.rank-list a{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;transition:.25s}
.rank-list a:hover{background:#f6f3ec;transform:translateX(3px)}
.rank-no{flex:0 0 20px;font-size:13px;font-weight:800;color:#c3cbc7;font-style:italic}
.rank-list li:nth-child(1) .rank-no{color:#d9552f}
.rank-list li:nth-child(2) .rank-no{color:#e0932f}
.rank-list li:nth-child(3) .rank-no{color:#b5a03a}
.rank-list img{width:42px;height:58px;object-fit:cover;border-radius:7px;background:#0f3330;flex:0 0 auto}
.rank-name{font-size:13.5px;font-weight:600;color:#20302b;display:flex;flex-direction:column;min-width:0}
.rank-name em{font-style:normal;font-size:11.5px;color:#8d9a96;font-weight:400;margin-top:2px}
标签云：
css
复制
下载
.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag-cloud a{font-size:12.5px;padding:5px 11px;border-radius:999px;background:#f6f3ec;color:#4c5a56;transition:.22s}
.tag-cloud a:hover{background:#15423c;color:#fff}
新闻区域，用全宽网格加卡片。
css
复制
下载
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.news-item{display:flex;gap:12px;background:#fff;border:1px solid #ece6da;border-radius:14px;padding:12px;transition:.28s}
.news-item:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(15,51,48,.1)}
.news-thumb{width:96px;height:70px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:linear-gradient(135deg,#164a44,#0d2c29)}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-item:hover .news-thumb img{transform:scale(1.08)}
FAQ：
css
复制
下载
.faq-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.faq-item{background:#fff;border:1px solid #ece6da;border-radius:14px;padding:14px 16px;transition:.25s}
.faq-item:hover{border-color:#15423c}
.faq-item h3{font-size:14.5px;font-weight:700;color:#15423c;margin-bottom:6px}
.faq-item p{font-size:13px;color:#6b7a76}
评论列表：
css
复制
下载
.comment-list{display:grid;gap:12px}
.comment-item{display:flex;gap:12px;background:#fff;border:1px solid #ece6da;border-radius:14px;padding:14px}
.comment-item img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#15423c}
.comment-main{min-width:0}
.comment-top{display:flex;align-items:center;gap:8px;font-size:13px}
.comment-top b{color:#15423c}
.comment-top time{font-size:11.5px;color:#a3aeaa}
.comment-main p{font-size:13.5px;color:#4c5a56;margin-top:5px}
.comment-foot{display:flex;gap:14px;margin-top:8px;font-size:12px;color:#a3aeaa}
页脚：
css
复制
下载
.site-footer{background:linear-gradient(160deg,#0d2c29,#123b37);color:#a9c5bf;margin-top:40px;padding:36px 0 0;font-size:13px}
页脚网格用 4 列。
版权栏。
模态框：
css
复制
下载
.modal-mask{position:fixed;inset:0;z-index:200;background:rgba(10,26,24,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.28s}
.modal-mask.open{opacity:1;visibility:visible}
.modal-panel{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:86vh;overflow-y:auto;padding:22px;position:relative;transform:translateY(16px) scale(.97);transition:.3s}
.modal-mask.open .modal-panel{transform:none}
等等，面板的过渡需要放在 .modal-panel 上，并且被 .open 状态影响——但 .open 是在父级上，所以选择器应该是 .modal-mask.open .modal-panel{transform:none}，这样没问题。
模态框头部：
css
复制
下载
.modal-head{display:flex;gap:14px;margin-bottom:14px}
.modal-poster{width:96px;height:132px;object-fit:cover;border-radius:12px;background:#0f3330;flex:0 0 auto}
模态框标签用 span 小药丸样式。
提示条：
css
复制
下载
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:rgba(15,51,48,.94);color:#fff;font-size:13.5px;padding:10px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:.3s;z-index:300;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
好了，现在开始把整个东西写出来。
移动端适配：字号、内边距都调整一下。
现在开始写最终代码。得小心点，要完整。
我按顺序把所有 HTML 写出来。
注意 data-desc 属性里不能有双引号——用中文引号「」，这个没问题。
现在开始写。
再加上 aria-label 提升可访问性。
把作品数据敲定下来。
最新高清电影：
雾港回声 | 2025 · 悬疑犯罪 · 大陆 | 9.1 | HD国语 | 002-movie
desc：导演林砚把 47 分钟长镜头全部交给雾港码头，全片仅 3 处配乐却拿下年度最佳声音设计提名。片尾滚动字幕里反复出现的蓝色信封悄悄变红，是第二重结局的暗示。上映首周排片占比仅 8.6%，第三周凭口碑逆袭到 21%。
tags：悬疑|长镜头|年度黑马
第七次日落 | 2025 · 科幻 · 美国 | 8.7 | 蓝光中字 | 009-movie
desc：影片用 7 个平行的黄昏串联起时间闭环，置景团队手工搭建了 1:32 的环形城市模型，实拍比例高达 78%。有趣的是，全片没有一句台词解释时间规则，观众需要靠墙上的钟表指针自行
更新至08集
9.1
