front-end-example/02-css-layout/05-final-page

练习 5：综合页面

目标

把前面的 CSS 知识拼起来，做一个完整页面。

项目名称

前端学习路线页

任务

请基于给定 HTML，把页面排成一个完整的学习介绍页，要求：

• 页面有明显的内容容器
• 页头、主视觉、课程卡片、进度表单区分明显
• 使用 Flex 做卡片区布局
• 使用颜色、留白、边框和圆角提升可读性
• 不要为了排版去破坏 HTML 结构

建议顺序

1. 先给 body 和主容器设置基础样式
2. 再写 header、hero
3. 再写课程卡片布局
4. 最后写表单和按钮

文件

• [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.html)
• [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.css)
• [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.html)
• [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.css)