rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4495ae0e28898a7b82452649b57532aa5015b98d
front-end-example/01-html-structure/03-semantic-layout/README.md
chali 4495ae0e28 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.
2026-03-09 14:16:22 +08:00

868 B
Raw Blame History

练习 3：语义化布局

目标

学会把一个页面拆成有意义的结构区域。

你要练什么

  • header
  • nav
  • main
  • section
  • article
  • aside
  • footer

任务

请完成一个“个人博客首页结构”，要求包含：

  • 页头：博客名称
  • 导航：至少 3 个链接
  • 主内容区
  • 一个“最新文章”分区
  • 分区里至少 2 篇 article
  • 一个侧边栏，写上“关于我”
  • 一个页脚

检查点

  • 页面是否有清晰的区域划分
  • article 是否适合承载独立内容
  • aside 是否作为补充信息
  • footer 是否放在页面结尾

文件

  • [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/03-semantic-layout/starter.html)
  • [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/03-semantic-layout/answer.html)