作品集页面需3秒内传达身份、能力与联系方式，CSS应以功能优先：用grid布局替代float，图片加载失败时用alt文本和背景色降级，动效仅限单一属性，字体回退链须含sans-serif，链接对比度须达WCAG AA标准。
个人作品集页面不需要炫技，但必须让访客在 3 秒内看懂你是谁、能做什么、怎么联系你。CSS 是实现这个目标的核心，不是装饰工具。
用 grid 布局快速搭建响应式骨架，别碰 float 或手动计算 margin
传统浮动或绝对定位在作品集里极易失控，尤其当项目卡片数量动态变化时。grid 能天然处理行列对齐、间隙控制和断点重排。
- 首页主区域用
display: grid+grid-template-areas明确划分"header hero projects contact"区域，语义清晰且便于媒体查询覆盖 - 作品卡片列表用
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，自动适配从手机到桌面的列数，无需写多个@media - 避免给卡片设固定高度——用
align-items: start防止文字截断，用min-height保基本视觉平衡
图片加载失败时，alt 文本要可读，background-image 要有降级色
作品集依赖图片，但网络波动、路径错误或 CORS 限制会让 <img alt="css实战项目_开发一个个人作品集页面" > 显示空白或浏览器默认破损图标。这不是 UI 问题，是信息可用性问题。
- 所有
<img alt="css实战项目_开发一个个人作品集页面" >必须带描述性alt，比如alt="电商后台管理界面，含订单筛选与导出功能"，而不是alt="project1" - 若用
background-image做封面图（如项目卡片背景），务必叠加background-color，例如：background: #f0f4f8 url('./projects/dashboard.jpg') no-repeat center/cover; - 检查控制台是否报
Failed to load resource: net::ERR_FILE_NOT_FOUND—— 这说明路径错了，别靠肉眼猜，用 VS Code 的「Go to Definition」跳转验证
:hover 动效只加一个属性，别堆 transform + opacity + box-shadow
作品集不是动画演示页。过度动效会分散注意力，还可能在旧版 Safari 或低端安卓机上卡顿甚至失效。
立即学习“前端免费学习笔记（深入）”；
- 卡片悬停只做
transform: translateY(-4px)或只加box-shadow: 0 4px 12px rgba(0,0,0,0.1)，二选一 - 禁用
transition: all .3s ease—— 改成明确属性，例如transition: transform .2s ease，避免字体、边框等意外参与过渡 - 移动端没有
:hover，所以不要把关键操作（如“查看详情”按钮）仅依赖悬停显示；确保默认状态就可见
字体加载失败时，font-family 回退链必须包含系统默认字体
自定义字体（如 Google Fonts）加载慢或被拦截后，如果 font-family 写成 "Inter", "SF Pro Display", sans-serif，而用户设备没装这些字体，最终可能回退到不可读的等宽字体或乱码。
- 回退链末尾必须是通用族名：优先用
sans-serif，不用system-ui（部分 Windows 旧版本不支持） - 推荐写法：
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
- 用
@font-face自托管字体时，确认font-display: swap已设置，否则文字会长时间空白
最常被忽略的其实是链接颜色对比度——用浏览器 DevTools 的「Accessibility」面板检查 a 标签是否满足 WCAG AA 级（4.5:1）。深灰文字配浅蓝链接，在 MacBook 屏幕上看可能刚好达标，但在 iPad 或投影仪上就失效了。
