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.
49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
# 练习 5：综合项目
|
||
|
||
## 目标
|
||
|
||
把前面学过的结构知识拼成一个完整页面。
|
||
|
||
## 项目名称
|
||
|
||
个人前端学习主页
|
||
|
||
## 任务
|
||
|
||
请独立完成一个单页网站，要求至少包含：
|
||
|
||
- `header`
|
||
- `nav`
|
||
- `main`
|
||
- `section`
|
||
- `article`
|
||
- `aside`
|
||
- `footer`
|
||
- 一个列表
|
||
- 一张表格
|
||
- 一个表单
|
||
- 至少 3 个层级的标题
|
||
|
||
## 推荐页面拆分
|
||
|
||
- 页头：站点标题 + 导航
|
||
- 主要介绍区：你是谁、你在学什么
|
||
- 学习路线区：用列表展示
|
||
- 作品展示区：用 `article` 展示 2 个项目
|
||
- 学习进度区：用表格展示
|
||
- 联系我区：用表单收集信息
|
||
- 页脚：版权信息
|
||
|
||
## 自检标准
|
||
|
||
- 页面结构是否一眼能看懂
|
||
- 是否不是全都用 `div`
|
||
- 标题层级是否合理
|
||
- 列表、表格、表单是否嵌套正确
|
||
- 每个区域是否有明确职责
|
||
|
||
## 文件
|
||
|
||
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/starter.html)
|
||
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/answer.html)
|