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
commit 4495ae0e28
85 changed files with 2566 additions and 0 deletions
--- a/01-html-structure/01-document-skeleton/README.md
+++ b/01-html-structure/01-document-skeleton/README.md
@@ -0,0 +1,36 @@
+# 练习 1：文档骨架
+
+## 目标
+
+掌握一个 HTML 页面最基本的完整结构。
+
+## 你要练什么
+
+- `<!DOCTYPE html>`
+- `<html>`
+- `<head>`
+- `<body>`
+- `title`
+- 标题和段落
+
+## 任务
+
+请完成一个“前端学习计划”页面，要求包含：
+
+- 页面标题：前端学习计划
+- 一级标题：我的前端学习路线
+- 一段介绍文字，说明自己正在学习 HTML 结构
+- 二级标题：本周目标
+- 一个无序列表，至少 3 项
+
+## 检查点
+
+- 页面是否有完整骨架
+- `title` 是否写在 `head` 里
+- 页面内容是否都放在 `body` 中
+- 列表项是否都写在 `li` 里
+
+## 文件
+
+- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/01-document-skeleton/starter.html)
+- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/01-document-skeleton/answer.html)