现在是 CSS 部分。
css
复制
下载
:root{
--bg:#0d0f14;
--panel:#161a22;
--panel2:#1d222c;
--line:#262c38;
--txt:#e8edf5;
--dim:#8b95a7;
--mint:#5ce1b9;
--amber:#ffb85c;
--rose:#ff6b81;
}
字体栈是 system-ui……
先想一下 header 的部分：做成 sticky，带模糊效果。
Logo：用内联 SVG 加上文字“漫格汇”。其实 logo 也可以直接用图片？需求里说“图片和logo一起完善”—— 那 logo 也用图片来做？可以做一个内联 SVG 的 logo 标识，再加文字。不过我还是把 logo 做成内联 SVG 图形，这样更稳，不依赖外部资源。
嗯，不过“图片和logo一起完善”——也许该用 /upload/vod/ 下的图片……但 logo 命名规则又没覆盖到。所以还是用内联 SVG 做 logo 比较合适。
接下来就搭整体了。
顶部导航链接：首页、热榜、分类、新番速递、短剧漫画、资讯、留言。
接下来是 hero 区域：
html
复制
下载
运行
等等，h1 应该只出现一次，并且包含主关键词。好的。
轮播：也许可以加几个小的缩略图当指示器。保留它。
实际上我要把 hero 做成一个真正的迷你轮播，用纯 JS 自动轮换横幅图，并且带指示器圆点。挺不错的细节。
继续写。
然后是分类条：带锚点的标签 —— #hot #selection #new #shortplay #rank #news。
然后是主布局：
html
复制
下载
运行
侧边栏：热搜榜（锚点到 #hot）、推荐内链、标签云、追更日历。
嗯，侧边栏应该用 sticky 定位。
然后是全宽的 FAQ + 留言区。
评论区展示一些评论和头像。
好，现在来写 CSS。
我需要让卡片用 .card 类，包含 .card-poster img、更新角标、标题和元信息。
图片降级：用 onerror 设置一个占位背景——onerror="this.style.display='none'" 然后父元素已经有背景了。实际上更好的做法是：onerror="this.classList.add('img-fail')" 加上父元素背景渐变。更简单的方式：onerror="this.src='/upload/vod/066-banner.webp'"——但这是内联 data，允许的（不是外部资源）。嗯，可能有点乱。还是用 onerror 来设置一个 data URI 的 SVG 占位符吧。
实际上最简单的是：onerror="this.style.opacity=0"，父元素的 .poster 已经有了渐变背景和 🎬 emoji 作为 ::after 内容。可以——父元素有背景。
就用这个：
css
复制
下载
.poster{position:relative;background:linear-gradient(135deg,#1d222c,#2a3140);overflow:hidden}
.poster::after{content:"📖";position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;opacity:.25;z-index:0}
.poster img{position:relative;z-index:1;...}
这样，如果图片加载失败（被隐藏或直接移除），占位符就会显示出来。
用 onerror="this.remove()" 来移除图片，这样底下的占位 emoji 就能露出来了。可以。
然后是 lazy loading：加一个 loading="lazy" 属性。
现在开始写完整代码。
卡片数据用 JS 来写——每个卡片用 data 属性来承载详情内容。
我会用这种方式来组织卡片：
html
复制
下载
运行
更新至第128话