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：综合项目
目标
把前面学过的结构知识拼成一个完整页面。
项目名称
个人前端学习主页
任务
请独立完成一个单页网站，要求至少包含：
headernavmainsectionarticleasidefooter- 一个列表
- 一张表格
- 一个表单
- 至少 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)