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.
34 lines
1.0 KiB
Markdown
34 lines
1.0 KiB
Markdown
# 练习 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)
|