PART 01让样式可预测01连接样式表与理解层叠创建独立 CSS 文件，用选择器命中元素，并用开发者工具判断哪条规则获胜。02盒模型、尺寸与间距用可计算的宽度和间距制作课程卡片，分清 content、padding、border 与 margin。03字体、颜色与可读性建立字体、字号、行高和颜色变量，让正文层级清楚并保持足够对比度。04交互状态与表单样式给链接、按钮和表单设计 hover、focus、disabled 与错误状态，保持键盘焦点清楚。
PART 02完成响应式页面05用 Flexbox 排一维布局把导航和卡片操作区改成能换行、对齐稳定的一维布局。06用 Grid 排二维卡片把学习记录做成自动适应列数的卡片网格。07响应式设计与媒体查询以小屏为默认，再为内容真正需要的断点增强导航、排版和布局。08结课项目：完成响应式学习网站整合排版、颜色、盒模型、Flex、Grid、状态和响应式规则，交付可复核的 CSS 作品。