feat: Add CSS layout exercises and corresponding HTML files

- 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.

02-css-layout/05-final-page/README.md

@@ -0,0 +1,33 @@
+# 练习 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)