，点击触发模态框，视觉上呈现可点状态。
但“站内所有链接统一规范，静态化链接优先”——导航和页脚这些地方还是要有真实链接。行吧，卡片用按钮式行为。
其实为了兼顾，我把卡片主体设成 role="button" tabindex="0"。
那就这么做：点击 .card-main 打开模态框。卡片底部放两个小链接——就那种“播放”和“详情”的 chip 按钮？“不包括底部按钮”——底部按钮是独立的。让底部放一个小的“立即播放”按钮，点击显示 toast，而不是打开模态框。
好。
现在写 JS：
js
复制
下载
const modal = document.getElementById('detailModal');
document.querySelectorAll('.card').forEach(card => {
const main = card.querySelector('.card-main');
main.addEventListener('click', () => openModal(card));
main.addEventListener('keydown', e => { if (e.key === 'Enter') openModal(card); });
});
openModal 读取数据集并填充。
还有播放按钮 → toast“已加入播放列表”。
还有筛选标签锚点 → 它们本来就是锚点链接。
还要加一个“更新角标”脉冲动画。
开始写吧。
CSS 细节：
css
复制
下载
*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#080c11;--panel:#101821;--panel2:#16202b;--line:#1f2c39;--text:#e8eef5;--muted:#7f93a6;--gold:#f5b544;--teal:#3fd0bd;--rose:#ff6b7f}
body{background:var(--ink);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
头部吸顶。
顶栏：用跑马灯式滚动显示更新通知。
导航：logo 用内联 SVG。
主视觉：网格布局。
我写一下主视觉：
html
复制
下载
运行
主视觉主图这块用整个区域作为可点击元素，点击打开弹窗。嗯，保持简单就好，用按钮。
现在处理布局网格：
css
复制
下载
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;max-width:1280px;margin:0 auto;padding:0 16px}
@media(max-width:960px){.layout{grid-template-columns:1fr}}
作品网格：
css
复制
下载
.grid-posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
海报宽高比 2/3。
行，开始写完整代码。
关于“长尾关键词”的标签——加一个标签云，用锚点链接指向各个板块。
然后是评论展示：4-5 条评论，带头像、昵称、时间、内容。不提供提交表单（按指令不能有提交功能）。嗯，指令说“禁止出现提交功能，网站的评论或者留言只做展示无法提交”。所以我只展示评论，可能加一个禁用的输入框？不行——完全不要表单。就展示。
FAQ 折叠用
。
JSON-LD 放在页脚底部。
开始写吧。
最后确定图片分配：
Banner：066-banner.webp、021-banner.webp、074-banner.webp
热播电影（5 张）：003-movie、017-movie、042-movie、058-movie、089-movie
电视剧（6 张）：011-tv、026-tv、035-tv、047-tv、062-tv、078-tv
综艺（4 张）：005-variety、019-variety、033-variety、044-variety
动漫（4 张）：007-anime、023-anime、039-anime、051-anime
漫改（3 张）：013-manga、028-manga、094-manga
头像：088-avatar、072-avatar、055-avatar、031-avatar
全部唯一。好。
现在把标题之类的写出来。
热播电影：
003-movie《深海回声》 科幻悬疑 9.2 更新至 4K 完结
017-movie《雨季来信》 文艺爱情 8.7
042-movie《边境七小时》 动作犯罪 9.0
058-movie《天台上的鲸鱼》 治愈剧情 8.9
089-movie《锈色黎明》 西部 8.4
电视剧：
011-tv《长夜灯火》 更新至 24 集
026-tv《雪落无声》 全 36 集
035-tv《山海街 17 号》 更新至 12 集
047-tv《雾港迷局》 全 28 集
062-tv《风起南屿》 更新至 08 集
078-tv《旧城档案馆》 全 40 集
综艺：
005-variety《今夜不设限》、019-variety《厨房大乱斗》、033-variety《声音的边界》、044-variety《野生观察室》
动漫：
007-anime《星轨列车》、023-anime《琉璃剑心》、039-anime《机械花园》、051-anime《雨后少年》
漫改：
013-manga《黑街食客》、028-manga《纸鸢武士》、094-manga《异想书店》
好，现在开始写。
内容——每张卡的简介要写得有原创影评的味道，带独家数据或观点。每张卡在 modal 里配一句简短的独家评论。
我认真写一下。
现在开始组装 HTML。
关于 onerror —— 我用 onerror="this.style.opacity='0'"，让父元素的渐变透出来。
开始写了。
关于模态框，在卡片里用 data 属性，有“大段文字”，需要转义引号——用单引号属性吗？HTML 属性用双引号包，内容里不要出现双引号。好。
开写。
JS：
js
复制
下载
(function(){
var modal=document.getElementById('detailModal');
var mTitle=document.getElementById('mTitle');
...
function open(card){
mPoster.src=card.querySelector('img').src;
...
}
})();
另外 toast：
js
复制
下载
function toast(msg){...}
再加一个“返回顶部”按钮。
写 CSS 动画：@keyframes pulse 给更新角标用，还有 shimmer 骨架屏。
给卡片加悬浮位移。
好，现在完整写出来。
导航栏要放搜索吗？搜索在静态页面里没有后端……可以放一个装饰性输入框，不是表单。算了，跳过或做成装饰性的。搞个假搜索框，聚焦时弹提示“搜索功能即将开放”？可能有点烦。就放个装饰性搜索框，配个搜索按钮，点击弹 toast。行吧。
其实还是跳过搜索吧，让代码更干净。嗯，但运营感强……算了，加上——它确实有运营感。
继续写。
更新至24集
9.2
