4495ae0e28
- Created multiple exercises under the CSS layout section, including: - Final page layout with CSS styles and HTML structure. - Display and flow concepts with examples of block, inline, and none display types. - Selectors and pseudo-classes with practical examples. - Overflow and sizing handling in CSS. - Grid layout basics for two-dimensional layouts. - Fixed and sticky positioning examples. - Centering techniques for common layout scenarios. - Added README files for each exercise to outline objectives and file structures. - Updated main README to include new sections and usage instructions.
练习 5：综合页面
目标
把前面的 CSS 知识拼起来，做一个完整页面。
项目名称
前端学习路线页
任务
请基于给定 HTML，把页面排成一个完整的学习介绍页，要求：
- 页面有明显的内容容器
- 页头、主视觉、课程卡片、进度表单区分明显
- 使用 Flex 做卡片区布局
- 使用颜色、留白、边框和圆角提升可读性
- 不要为了排版去破坏 HTML 结构
建议顺序
- 先给
body和主容器设置基础样式 - 再写
header、hero - 再写课程卡片布局
- 最后写表单和按钮
文件
- [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)