HTML+CSS即可实现语义化、响应式成就页：用<section>按类型分组并设aria-label，grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))自适应列数，状态通过预设class（如achieved/locked）控制，图标优先内联SVG以保障样式统一与性能。
直接用 HTML + CSS 就能做出清晰、可扩展的游戏成就页，不需要框架也能让徽章按逻辑分组、带状态标识、响应式排列——关键是结构语义化 + CSS Grid/Flex 控制布局节奏。
用 <section> 按成就类型分组，别堆在同一个 <div> 里
用户扫一眼就得知道“战斗类”“探索类”“隐藏成就”在哪，硬塞进扁平列表会失去信息层级。每个成就类型用 <section> 包裹，并加 aria-label 方便读屏器识别：
<section aria-label="战斗成就">
<h2>⚔️ 战斗大师</h2>
<ul class="achievements-grid">
<li class="achievement achieved">…</li>
</ul>
</section>
常见错误：用一堆无意义的 <div> 套娃，后期加筛选或动画时 DOM 难定位、CSS 选择器冗长。
display: grid 控制徽章网格，用 minmax() 防止小屏挤成一列
成就徽章不是固定 3 列或 4 列——屏幕宽度变化时，列数该自适应。用 Grid 的 minmax() + auto-fit 最稳妥：
立即学习“前端免费学习笔记（深入）”；
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
关键点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
240px是单个徽章最小合理宽度（含图标、文字、边距），再窄就糊了 - 别用
flex-wrap替代 —— Flex 在列数动态变化时对齐难控制，尤其有不同高度徽章时容易错行 - 如果必须支持 IE11，改用
display: flex+@supports not (display: grid)降级
成就状态靠 class 切换，别用 JS 动态写 style
“已解锁”“未获得”“进行中”这些状态，应该通过预设 class 控制样式，而不是每次用 JS 改 element.style.opacity 或内联 style：
<li class="achievement achieved">…</li> <li class="achievement locked">…</li> <li class="achievement in-progress">…</li>
这样做的好处：
- CSS 可统一控制过渡动画：
transition: opacity 0.2s, transform 0.2s - 方便用
:not(.achieved)批量禁用点击事件 - 服务端渲染或静态生成时，状态能直接输出，不依赖 JS 初始化
容易踩的坑：把所有状态逻辑塞进一个 data-status 属性，然后靠 JS 解析再加 class——多此一举，且首次渲染闪动明显。
徽章图标优先用 SVG 内联，别用 <img> 或字体图标
SVG 内联能直接用 CSS 控制颜色、尺寸、hover 动画，且无额外请求、无字体加载失败风险：
<li class="achievement achieved">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/>
</svg>
<h3>首杀 Boss</h3>
<p>击败熔岩巨兽一次</p>
</li>
注意：
- 删掉 SVG 中的
width/height属性，用 CSSwidth控制，确保响应式缩放 - 避免用
font-icon（如 Font Awesome）——图标颜色无法随状态 class 统一变更，且字符编码易出错 - 如果图标来自第三方资源，务必转为内联 SVG 并精简 path（可用 SVGOMG）
真正麻烦的不是布局，是状态同步和语义一致性——比如“已解锁”徽章被用户分享时，要确保链接带 hash 锚点直达对应 <section>，而不仅仅是整页滚动。这点常被忽略，但影响传播体验。
