用 flex 布局实现响应式头像网格：设 display: flex + flex-wrap: wrap，gap 控制间距，子项 column 排列；小屏用媒体查询调整 flex-basis 为 50% 或 100%；头像 img 用 width: 100%; height: auto;；加载失败时通过 onerror 切换至带首字母的 avatar-placeholder；语义化使用 figure/figcaption，alt 含姓名角色技能；优先内联 SVG 占位图，深色模式用 currentColor；统一处理图片方向避免歪斜。
用 flex 布局实现响应式头像网格，别硬套 float 或表格
固定宽度的“团队墙”在小屏上直接溢出或堆叠错乱，根本原因是用了静态定位或 float。现代方案就是 display: flex 配合 flex-wrap: wrap —— 它能自动换行，且子项默认等高对齐，省去 JS 计算高度的麻烦。
关键点：
-
flex容器设gap: 1rem控制间距，比用margin更干净（不用处理首尾边距） - 每个头像卡片用
flex-direction: column，确保头像在上、姓名职位在下垂直排列 - 小屏下通过媒体查询把
flex-basis从25%（四列）改成50%（两列），再小就100%（单列） - 避免给头像
img设固定宽高，用width: 100%; height: auto;保比例，否则在 Retina 屏模糊
头像图片加载失败时显示姓名首字母，用 onerror + CSS ::before 双保险
网络波动或路径错误导致头像变红叉，光靠 alt 文字不够直观。真正在产线稳的方案是：HTML 层用 onerror 回退到文字容器，CSS 层用 ::before 渲染首字母 + 背景色。
实操写法：
立即学习“前端免费学习笔记（深入）”；
<div class="avatar-card">
<div class="avatar-placeholder" data-name="张三"></div>
<img src="team/zhangsan.jpg" onerror="this.parentElement.querySelector('.avatar-placeholder').style.display='block'; this.style.display='none'" alt="">
<div class="name">张三</div>
</div>CSS 中定义：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.avatar-placeholder {
display: none;
width: 80px; height: 80px;
border-radius: 50%;
background: #4a6fa5;
color: white;
font-weight: bold;
line-height: 80px;
text-align: center;
}
.avatar-placeholder::before {
content: attr(data-name) "";
content: attr(data-name) " ";
content: attr(data-name) " ";
content: attr(data-name);
}
/* 兜底：截取第一个汉字或英文字母 */
.avatar-placeholder::before {
content: attr(data-name) " ";
content: attr(data-name) " ";
content: attr(data-name);
}
/* 实际项目中建议用 JS 提取首字符，这里仅示意逻辑 */语义化结构必须用 figure + figcaption，别只用 div
搜索引擎和读屏软件依赖语义标签识别“这是谁的照片+谁的信息”。纯 div 套娃会让无障碍体验断层，也影响 SEO。
正确结构示例：
<figure class="member-card">
<img src="team/liwei.jpg" alt="李威，前端工程师，专注 React 性能优化">
<figcaption>
<h3 class="name">李威</h3>
<p class="role">前端工程师</p>
<p class="bio">专注 React 性能优化与微前端落地</p>
</figcaption>
</figure>注意点：
-
alt文本必须含姓名+角色+关键技能，不能只写“头像” -
figcaption内部用h3而非div包姓名，保持标题层级合理 - 如果团队页有筛选功能（如按角色过滤），
figure的语义能让 JS 更容易批量操作
字体图标替代 SVG 头像占位图？小心渲染阻塞和可访问性陷阱
有些团队用 Font Awesome 的 fa-user 当默认头像，看似省事，但字体文件加载失败时整个头像区域空白，且屏幕阅读器无法识别其含义。
更稳妥的做法：
- 用内联 SVG 替代字体图标：
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>，无外部依赖 - 若必须用图标字体，至少加
aria-hidden="true"并保留figcaption的完整信息 - 不要用 CSS
content: "\f007"生成图标——它无法被复制、缩放失真、且无语义 - 深色模式下，SVG 填充色要用
currentColor自动适配文本色，而不是写死#333
实际排版中最容易被忽略的是头像宽高比一致性。哪怕所有图片都裁成正方形，JPG 和 PNG 的 EXIF 旋转信息可能让浏览器渲染歪斜——上线前务必用 image-orientation: from-image（需加 -webkit- 前缀兼容 Safari）或统一用工具预处理。
