用 flexbox 实现响应式荣誉墙：语义化结构（section/article）、图片响应式（picture/srcset/webp）、伪元素角标（data-level）、seo优化（alt/aria-label/lazyload）及json驱动维护。
怎么用纯 HTML + CSS 实现响应式荣誉墙
不用框架也能做出对齐整齐、适配手机的证书展示页，关键是用 flexbox 布局 + 语义化结构。别一上来就套 Bootstrap 栅格，反而容易被默认 margin 和断点搞乱。
常见错误是把每张证书塞进 <div class="item"> 后硬写固定宽高，结果在 iPad 上错位、在安卓机上图片模糊。正确做法是让容器控制换行逻辑，图片用 <code>max-width: 100% + height: auto 保比例。
- 用
<section></section>包整体荣誉区，加aria-label="企业荣誉资质展示"提升可访问性 - 每个证书用
<article></article>包裹，内部结构统一为：<img>+<h3></h3>（证书名称）+<p></p>（颁发单位/时间） - CSS 中给父容器设
display: flex+flex-wrap: wrap，子项设flex: 1 1 calc(33.333% - 1rem)（三列，留间隙），再用@media在max-width: 768px下切为两列，max-width: 480px下切为单列
证书图片怎么处理才不糊、不拉伸、不卡顿
直接丢 <img src="xxx.jpg" style="max-width:90%" style="max-width:90%"> 是最常见坑——浏览器会强制缩放，高清屏下文字发虚，加载还可能阻塞渲染。
必须用响应式图片方案：提供多尺寸源 + 显式声明宽高范围。
- 用
<picture></picture>+<source></source>配合srcset和sizes，例如：<source media="(max-width: 768px)" srcset="cert-mob-2x.jpg 2x, cert-mob-1x.jpg 1x"></source> -
<img>的width和height属性仍要保留（即使值是占位用的），否则 layout shift 严重 - 所有证书图建议统一导出为 WebP 格式，比 JPEG 小 30% 以上；若需兼容老 IE，用
<img>的srcfallback 到 JPG - 避免在 CSS 里用
background-image加证书图——无法被屏幕阅读器识别，也难设置alt文本
如何让“国家级”“AAA级”这类标签自动带角标样式
手写 <span class="badge">国家级</span> 再配一堆 CSS 是可行的，但维护成本高。更稳妥的是用伪元素 + 数据属性驱动样式，方便批量控制。
比如给 <h3></h3> 加 data-level="national"，CSS 里写：h3[data-level="national"]::after { content: "国家级"; background: #e74c3c; }。
- 支持的等级值建议限定为：
"national"、"industry"、"aaa"、"high-tech"，避免随意字符串导致样式漏掉 - 角标位置统一用
position: absolute配合top: -8px; right: -8px;，父容器记得加position: relative - 别用
font-size: 12px硬写，改用em或clamp()，例如：font-size: clamp(0.6rem, 0.8vw, 0.8rem);
SEO 和加载性能最容易被忽略的三个点
证书页常被当成“装饰页”随便写，结果百度不收录、Lighthouse 打分低于 50。核心问题不在内容，而在基础标记和资源加载策略。
-
<img>必须带alt，且不能是“证书图片”这种废话，要写清全称，例如：alt="ISO 9001:2015 质量管理体系认证证书（编号：CN12345678）" - 所有证书图加
loading="lazy"，但首屏第一张要去掉该属性（否则可能白屏），可用 JS 动态补或手动删 - 不要把全部证书一次性渲染出来，超过 6 张时用
IntersectionObserver实现懒加载，示例关键代码：new IntersectionObserver(cb).observe(document.querySelector("#cert-3"));
真正麻烦的不是写页面，而是每次新增证书时要同步更新 alt 文本、图片尺寸、data-level 值和懒加载监听器——建议用 JSON 配置驱动整个荣誉区，HTML 只做模板容器。
