面包屑：首页 > 免费动漫全集 > 今日更新
主要网格布局：主内容列 + 侧边栏
主内容：
- 英雄轮播 #top
- 更新角标信息
- #anime-hall 免费动漫全集板块
- #platform-hot 平台热搜榜
- #drama-zone 热播影视与短剧
- #category-map 分类筛选
- #ranking 排行榜
- #news 相关资讯
- #faq 常见问题
- #comment 留言
侧边栏：每周榜单、猜你喜欢、标签云、追番提醒
然后 footer、JSON-LD、script。
等等——aside 放在 grid 里面的话，有些板块会放到侧边去。让我这样布局：两列布局；左边主列放 hero、动漫、平台热搜、影视、分类、榜单、资讯、FAQ、留言。右边侧栏是粘性定位，放榜单和推荐。
嗯，不过这样的话侧栏会挺长。没关系，把它做成 sticky 就行。
其实更简单也更稳的办法：用类似 CSS grid 的两列布局，但侧栏放在右边。
先把 CSS 写出来。
配色：
--bg: #0a0d12
--panel: #121821
--panel-2: #172030
--line: #22303f
--amber: #ffb347
--teal: #45d9c4
--text: #dbe4ee
--muted: #8a99ab
字体用系统字体栈。
现在仔细写。
头部导航用 sticky。
Hero：左侧大 banner 图（037-banner），右侧是更新列表。
我把 hero 做成网格：一张大图卡片 + 三张小的？其实用单独的 banner 轮播？先保持简单：一个主 banner 加浮层文字，再加一个“今日更新”的小列表。
就用这个 banner 图 037-banner.webp，文字浮在上面。
然后下面加一排“更新角标”的小卡片。
接着是动漫大厅：用卡片网格，每张卡片包含：
```html
更新至12集
9.4
免费动漫全集
2024 · 日本 · 热血
免费动漫全集...
点击卡片会打开模态框。按钮：单独处理吗？“点击整个卡片区域（图片、标题区域，但不包括底部按钮）”——所以底部按钮不该触发模态框。嗯，这里有点绕：底部按钮……但我又希望整个卡片都能点击。我本来打算让卡片本身带点击事件，但按钮通过 stopPropagation 阻止冒泡。那底部按钮就做“收藏”/“追番”这类。不过按需求，底部按钮不触发模态框——好，那就让它们只做切换状态。
其实更简单：不要底部按钮，就纯卡片 → 模态框。但需求里提到了底部按钮，所以还是加一行按钮：“追番”和“详情”？“详情”应该打开模态框。那就底部放“追番”按钮，点击切换状态，用 stopPropagation 阻止冒泡。好。
嗯等等，“点击整个卡片区域（图片、标题区域，但不包括底部按钮）时，弹出模态框”——对。
好。
平台热搜榜部分：#platform-hot——用 tab 切换？还是搞成 6 个栏目，每个带平台名和排名列表。为了减少篇幅，做成 6 张紧凑卡片，每张 5 个条目，共用一个容器网格。这就是 30 个条目，代码有点多，但还行。
也许每张卡片 4 个条目吧，30 个太多了。每张 4 个，那就是 24 个。算了，还是每张 3 个，总共 18 个条目。嗯，为了丰富度还是多放点。每张 4 个吧，可以。
其实为了省点篇幅，每张平台卡片就放 4 个条目。
平台：腾讯视频、爱奇艺、红果短剧、小红书、抖音、快手。
热播影视和短剧：#drama-zone——卡片网格。
分类筛选：#category-map——标签按组分类（类型、地区、年份、题材），全部锚链接到 #anime-hall。
榜单：#ranking——排名列表。
资讯：#news——文章卡片。
FAQ：#faq——手风琴效果？用 details/summary，对 SEO 友好。
评论：#comment——评论列表。
侧边栏：
本周追番榜（带锚点的排名列表）
编辑精选推荐
热门标签云
追番提醒/订阅提示
页脚：链接 + 版权信息。
再加一个固定的“回到顶部”按钮。
现在开始写代码。
图片降级 CSS：
css
复制
下载
.thumb-wrap{position:relative;aspect-ratio:16/10;background:linear-gradient(110deg,#1a2431 25%,#22303f 37%,#1a2431 63%);background-size:400% 100%;animation:shimmer 1.4s infinite linear;overflow:hidden}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
然后 img 设置 width 100% height 100% object-fit cover；坏图时加 .is-broken{opacity:0}。
嗯，不过图片加载完之后动画还在继续——这本来也没事，但有点浪费性能。那就保持这样吧。
其实也许该把动画移到 ::after 上……算了，不折腾了。
现在开始写所有内容。
模态框 HTML：
html
复制
下载
运行
JS：
js
复制
下载
document.querySelectorAll('.anime-card').forEach(card=>{
card.addEventListener('click',e=>{
if(e.target.closest('.card-actions')) return;
openModal(card.dataset);
});
});
还有键盘操作（Enter 键）。加上 tabindex 吧。
好，现在开始写完整内容。保持干净整洁。
关键词密度：免费动漫全集要出现得足够频繁，但别堆得太夸张。大约出现 12-18 次。
下面写实际 HTML。
nav 切换这边：小屏上用一个复选框 hack，或者 JS。用 JS 切换类名。
现在把代码写出来。
HTML 里的中文引号要小心处理。
先把各个板块草拟出来。
页头部分：
html
复制
下载
运行
logo 的 SVG 就用一个简单的播放三角 + 圆形。
然后是面包屑。
接着主体布局：
html
复制
下载
运行
Hero 部分：
html
复制
下载
运行
覆盖层文字
独家推荐
实际上 hero 迷你卡片应该可以点击，打开模态框，或者锚点跳转。那让它们也做成带 data 属性的动漫卡片吧。
嗯，hero-main 也做成可点击并打开模态框。
好。
更新轮播？算了，跳过。
然后是 #anime-hall，带网格。
继续写。
该输出了。我得小心代码长度，但也要写全。
先把数据条目写出来。
动漫大厅卡片（8 张）：
005-anime 咒术回战·涩谷事变 第 2 季 9.4 更新至第 47 话
023-anime 葬送的芙莉莲 9.7 全 28 话
048-anime 我推的孩子 9.2 更新至第 13 话
071-anime 间谍过家家 第 3 季 9.3 更新至第 09 话
092-anime 药屋少女的呢喃 9.1 全 24 话
011-manga 迷宫饭 9.0 更新至第 21 话
063-manga 蓝色监狱 8.8 更新至第 30 话
088-manga 鬼灭之刃·柱训练篇 9.5 全 08 话
等等，088 本来想留给头像的。改用 086-manga。行，调整一下：086-manga。
影视区（6 张）：
019-tv 庆余年 第二季
034-tv 繁花
057-tv 墨雨云间
002-movie 抓娃娃
041-movie 热辣滚烫
069-movie 消失的她
其实换个搭配，加入短剧：
095-movie 红果短剧·闪婚老公是首富
我这样放：
019-tv 庆余年 第二季
034-tv 玫瑰的故事
057-tv 墨雨云间
002-movie 抓娃娃
041-movie 热辣滚烫
069-movie 消失的她
095-movie 短剧·千金归来
总共 7 张，行，网格能兜住。
综艺卡片也许放侧栏，用 007-variety、029-variety、054-variety。
侧栏用：007-variety、029-variety、054-variety 作为编辑精选？也行。
头像用：088-avatar、013-avatar、026-avatar、045-avatar、062-avatar、079-avatar，给评论用。
评论：6 条，但也许只展示 4 条。
先放 4 条评论：
088-avatar 追番小分队
013-avatar 深夜看番人
026-avatar 番剧考古学家
045-avatar 短剧观察员
行。
资讯：3 篇文章加缩略图？用 029-variety？嗯，资讯缩略图用 anime/manga 命名。那就用：
054-variety 配资讯……算了，其实没关系，就按规则给每张图随机挑个数字和词。
资讯图片用：
073-anime
084-manga
036-tv
保证唯一性。目前用过的数字：037、082、014（banner）；005、023、048、071、092、011、063、086（anime/manga）；019、034、057、002、041、069、095；007、029、054；088、013、026、045、062、079；073、084、036。
加起来是 3+8+7+3+6+3 = 30 张图。没问题，都在 001-099 范围内，而且唯一。
等等，我还得用 hero 的小缩略图——可以复用 anime 那些吗？最好还是给它们单独的唯一图片。用 016-anime、027-anime、058-anime……嗯，这样数字越来越多了。其实 hero 的侧边小条目我可以直接用文字加序号，不用图片——但那样就缺缩略图。或者直接复用相同图片？规则说每个数字全局唯一，那就得给它们单独的文件名。
那我加：016-anime、027-anime、058-anime，当 hero 小缩略图用。这样一来有点长，但问题不大。
其实，干脆把 hero 小条目只做成文字列表、不放图片，免得再多三个文件。但配图会更好看……那就还是加上吧。
嗯，等等——082-banner 和 014-banner 也还没用上。轮播图至少得有 3 张。但我现在只有一个 hero 主图。那不如在 hero 里做一个滑动轮播，三张 banner 用 CSS 动画轮换？这有点花哨，但不用 JS 就能实现：堆叠三张图，用不同的延迟做交叉淡入淡出动画。挺酷，而且挺有运营感。
不过文字覆盖层就得跟着换。更简单一点：hero 主图只放一张 banner 图，另外两张 banner 放在第二个小轮播里？算了。
还是这样：hero 区域拆成主图加右侧竖排。其实我也可以把三张 banner 做成自动播放的幻灯片，每张都带自己的标题覆盖层，用 keyframes 循环切换透明度。就这么干：
css
复制
下载
.hero-slide{position:absolute;inset:0;opacity:0;animation:slideFade 18s infinite}
.hero-slide:nth-child(2){animation-delay:6s}
.hero-slide:nth-child(3){animation-delay:12s}
@keyframes slideFade{0%{opacity:0}5%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}}
还有文字覆盖层……它也会淡出。把文字放进每张幻灯片里。
但这样点击整个 hero 打开模态框就会有点模糊——因为活动幻灯片会变。那就算了，直接让 hero 链接到 #anime-hall 吧。其实也行——hero 是个锚点链接，也不算死链。那就这样。
嗯，不过“点击整个卡片区域时弹出模态框”这条是针对作品卡片的。hero 可以是轮播图链接。没问题。
其实更简单也更稳妥的做法：hero 做成三张幻灯片，每张都是一个指向 #anime-hall 的锚点，配一个假播放按钮。就这么定了。
好。
然后是动画时间的细节：每张 18 秒、总共 3 张，每张的可见窗口就是 6 秒左右。
来写：
css
复制
下载
@keyframes heroCycle{
0%{opacity:0;transform:scale(1.04)}
4%{opacity:1}
30%{opacity:1}
36%{opacity:0}
100%{opacity:0}
}
时长 18 秒，延迟分别是 0、6、12 秒。嗯，每张的总周期也是 18 秒，那第 1 张在 t=0 到 6.48 秒可见，第 2 张在 t=6 到 12.48 秒可见……会有一点重叠，问题不大。
等等，延迟：第 1 张延迟 0，第 2 张延迟 -12 秒？那不如用负延迟让它们同步？更简单的做法：给三张都设 18 秒的动画时长，延迟分别是 0、6、12 秒，但关键是……动画开始前它不会渲染吗？其实有延迟的话，元素会停在初始状态（0% 的关键帧 = opacity 0），所以没问题。
实际上 CSS 动画加延迟时，元素会在延迟期间保持 0% 关键帧的样式（相当于 backwards 填充）？默认填充模式是 none，所以延迟期间它会取基础样式。那把基础样式设成 opacity: 0，再设 animation-fill-mode: backwards，它就会在延迟期间取 0% 关键帧的样式。但 0% 的透明度本来就是 0，所以效果一样。行吧。
好。
现在开始写所有内容。
其实还有一点：让 hero 保持适中大小。行。
让我写 CSS。
css
复制
下载
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0a0d12;--panel:#121821;--panel2:#182131;--line:#233040;
--amber:#ffb347;--teal:#45d9c4;--rose:#ff6b81;
--tx:#dbe4ee;--mut:#8697ab;
--r:14px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
再加一层 body 的背景光晕渐变。
页头：吸顶，背景模糊。
开始写完整样式。
我得注意总体规模。我会写得高效一点。
现在来产出最终 HTML。
留言区要有数据属性和头像图片。
FAQ 用 details/summary 来做。
JSON-LD 放在结尾。
我来写。
侧边栏还有：
本周追番榜（5 条，锚点指向 #anime-hall / #ranking）
编辑精选（3 个迷你卡片）
热门标签云
追更提醒
锚文本规则：链接指向本页的锚点。好。
正文段落中也要埋锚文本，每段 2-3 个。
好，现在写。
我得再核对一下：主内容列里的模块顺序——
#hero
快速筛选栏（锚点 chips）
#anime-hall 免费动漫全集精选
#platform-hot 六大平台热搜榜
#drama-zone 热播影视与短剧
#category-map 分类筛选
#ranking 人气榜
#news 动漫资讯
#faq 常见问题
#comment 留言区
侧边栏：榜单、编辑精选、标签云、追更提醒。
页脚。
好。
现在开始写代码。走起。
搜索框：只做输入展示，没有表单提交，用只读输入框？还是用普通 input 加 placeholder 文本，不包 form。
好，开始写。
每个卡片的模态框数据：data-title、data-img、data-meta、data-desc、data-tags。
JS 里：
js
复制
下载
const mask=document.getElementById('modalMask');
const mImg=document.getElementById('modalImg');
...
document.querySelectorAll('[data-modal="1"]').forEach(el=>{
el.addEventListener('click',ev=>{
if(ev.target.closest('.card-actions')) return;
const d=el.dataset;
mImg.src=d.img;
mTitle.textContent=d.title;
...
mask.classList.add('open');
document.body.style.overflow='hidden';
});
});
等等，hero 那边不该触发模态框。我就给卡片标上 data-modal="1" 就行了。
然后是 close 函数。
再加一个 ESC 键关闭。
好了，开始写最终代码。
要注意：“禁止出现多余的标点符号”——这个有点含糊，我尽量写干净点就行。
现在开始写。
卡片结构：
html
复制
下载
运行
更新至 47 话
9.4
▶
咒术回战 涩谷事变
2024 · 日本 · 热血 / 动作
12.8 万人在追
然后按钮点击就用 stopPropagation 处理——不过其实我的检查逻辑是 ev.target.closest('.card-actions')，所以已经能拦住了。但按钮会切换状态，得加监听：
js
复制
下载
document.querySelectorAll('.act-btn').forEach(b=>{
b.addEventListener('click',e=>{
e.stopPropagation();
b.classList.toggle('on');
b.textContent = b.classList.contains('on') ? '✓ 已追番' : '＋ 追番';
});
});
可以。
卡片标题的 h3——没问题。
现在写 CSS 网格：
css
复制
下载
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
主页布局：
css
复制
下载
.layout{max-width:1280px;margin:0 auto;padding:0 16px 60px;