应使用语义化包裹团队区域，每个成员用表示，头像需设alt="姓名-职位"、width/height相等、object-fit:cover及aspect-ratio:1/1，css grid采用repeat(auto-fill,minmax(280px,1fr))并用gap统一间距。
直接用语义化 <section></section> + <article></article> 结构配 CSS Grid，不写死列数、不手动调间距、不硬编码图片尺寸——这才是能维护、能响应、能无障碍的团队页底子。
怎么组织 HTML 结构才不翻车
别用一堆 <div class="member"> 堆砌。浏览器和屏幕阅读器需要知道“这是一个人”，不是“一堆盒子”。<ul>
<li>整个团队区域用 <code><section id="team"></section> 包裹，加 aria-labelledby 指向标题
<article></article>，不是 <div> 或 <code><section></section> ——<article></article> 表示可独立分发的内容单元<img>，alt 必须写真实姓名+职位，比如 alt="王磊 - 后端架构师"，不能是空或 "headshot"
<h3></h3>（不是 <h2></h2> 或 <p></p>），职位用 <p class="role"></p>，简介用 <p class="bio"></p>
rel="noopener noreferrer"，否则存在安全漏洞CSS Grid 布局为什么不能写死 repeat(3, 1fr)
写死三列在手机上会横向溢出，小屏用户得左右拖动才能看全，而且无法适配折叠屏或横屏平板。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) -
minmax(280px, 1fr)是底线：卡片最小 280px（保证头像和文字可读），但能自动撑满容器宽度 -
auto-fill比auto-fit更稳——前者保留空位占位，避免最后一行突然拉宽导致视觉失衡 - 统一用
gap: 1.5rem控制间距，别给每个<article></article>加margin，后者在断点切换时容易错位或边缘多出空白 - 卡片本身加
max-width: 100%，防止大图撑破容器；头像<img>加width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
头像变形/切脸/模糊的三个硬伤点
不是图源问题，是 CSS 层没控住。哪怕换 100 张正方形图，只要这三行缺一，照样歪。
-
width和height必须相等（如140px），否则border-radius: 50%不生效 -
object-fit: cover是核心——它保持比例裁剪显示，不是缩放填满（fill）也不是留白（contain） - 用户上传头像必须后端强制转为 ≥400×400 的 JPEG/WebP，前端只负责渲染；小图放大后模糊，CSS 再怎么写也救不回来
动态渲染时 data- 属性怎么用才不埋雷
如果团队数据来自 JSON，别拼字符串塞 innerHTML，更别把 ID 写进 class 名里（如 member-123）。
- 原始数据存
data-member-id、data-role等属性，只放非敏感字段 - 用
document.createElement('article')+.append()插入，比字符串拼接快且支持键盘导航 - 每条成员项加
role="article"和唯一id，方便后续用aria-activedescendant做焦点管理 - 如果用事件委托监听“查看详情”，绑定在
#team容器上，用e.target.matches('.detail-btn')判断，而不是对每个按钮单独绑
真正卡住进度的往往不是“怎么写第一张卡片”，而是“加第 12 个人时要不要改三处样式”“小屏下头像突然变成长方形”“点击链接后新窗口跳转丢失登录态”——这些细节不提前控住，后面全是补丁。
