结课项目：完成响应式学习网站

这一节要完成什么

整合排版、颜色、盒模型、Flex、Grid、状态和响应式规则，交付可复核的 CSS 作品。

先理解：为什么要学它

验收看任务完成度，不追求复杂特效。

跟着做

css/
├─ tokens.css   /* colors, type, spacing */
├─ base.css     /* reset and elements */
├─ components.css
└─ layout.css   /* flex, grid, media queries */

1. 先删除重复和失效规则，再按职责整理文件。
2. 逐页检查 Home、About、Week 1 的一致性。
3. 完成键盘焦点、200% 缩放、320/768/1280 宽度和深浅主题对比检查。
4. 在 DevTools Coverage 与 Computed 中找到一条无用规则和一次意外覆盖并修复。

关键代码怎么读

• 验收看任务完成度，不追求复杂特效。
• 组件类表示可复用模式，工具类只解决单一职责。
• 保留浏览器能力，不让 CSS 破坏 HTML 语义与键盘顺序。

常见错误：看到什么，检查什么

自己完成一次

写一份 10 项验收记录，包含三种宽度截图、键盘焦点、对比度、缩放和一个已修复的层叠问题。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况