From 4495ae0e28898a7b82452649b57532aa5015b98d Mon Sep 17 00:00:00 2001 From: chali Date: Mon, 9 Mar 2026 14:16:22 +0800 Subject: [PATCH] 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. --- .../01-document-skeleton/README.md | 36 ++++ .../01-document-skeleton/answer.html | 19 ++ .../01-document-skeleton/starter.html | 16 ++ .../02-text-links-lists/README.md | 37 ++++ .../02-text-links-lists/answer.html | 31 +++ .../02-text-links-lists/starter.html | 16 ++ .../03-semantic-layout/README.md | 39 ++++ .../03-semantic-layout/answer.html | 43 ++++ .../03-semantic-layout/starter.html | 17 ++ .../04-tables-and-forms/README.md | 40 ++++ .../04-tables-and-forms/answer.html | 59 ++++++ .../04-tables-and-forms/starter.html | 15 ++ 01-html-structure/05-final-project/README.md | 48 +++++ .../05-final-project/answer.html | 106 ++++++++++ .../05-final-project/starter.html | 16 ++ .../06-block-and-inline/README.md | 28 +++ .../06-block-and-inline/answer.html | 25 +++ .../06-block-and-inline/starter.html | 16 ++ .../07-media-and-paths/README.md | 29 +++ .../07-media-and-paths/answer.html | 18 ++ .../07-media-and-paths/starter.html | 15 ++ .../08-advanced-form-controls/README.md | 28 +++ .../08-advanced-form-controls/answer.html | 62 ++++++ .../08-advanced-form-controls/starter.html | 17 ++ 01-html-structure/09-nesting-review/README.md | 21 ++ .../09-nesting-review/answer.html | 26 +++ .../09-nesting-review/starter.html | 28 +++ 01-html-structure/README.md | 190 ++++++++++++++++++ 02-css-layout/01-selectors-and-text/README.md | 32 +++ .../01-selectors-and-text/answer.css | 37 ++++ .../01-selectors-and-text/answer.html | 23 +++ .../01-selectors-and-text/starter.css | 17 ++ .../01-selectors-and-text/starter.html | 23 +++ 02-css-layout/02-box-model-card/README.md | 31 +++ 02-css-layout/02-box-model-card/answer.css | 37 ++++ 02-css-layout/02-box-model-card/answer.html | 20 ++ 02-css-layout/02-box-model-card/starter.css | 14 ++ 02-css-layout/02-box-model-card/starter.html | 20 ++ 02-css-layout/03-flex-layout/README.md | 30 +++ 02-css-layout/03-flex-layout/answer.css | 31 +++ 02-css-layout/03-flex-layout/answer.html | 30 +++ 02-css-layout/03-flex-layout/starter.css | 11 + 02-css-layout/03-flex-layout/starter.html | 30 +++ 02-css-layout/04-position-badge/README.md | 29 +++ 02-css-layout/04-position-badge/answer.css | 38 ++++ 02-css-layout/04-position-badge/answer.html | 17 ++ 02-css-layout/04-position-badge/starter.css | 11 + 02-css-layout/04-position-badge/starter.html | 17 ++ 02-css-layout/05-final-page/README.md | 33 +++ 02-css-layout/05-final-page/answer.css | 113 +++++++++++ 02-css-layout/05-final-page/answer.html | 60 ++++++ 02-css-layout/05-final-page/starter.css | 34 ++++ 02-css-layout/05-final-page/starter.html | 60 ++++++ 02-css-layout/06-display-and-flow/README.md | 12 ++ 02-css-layout/06-display-and-flow/answer.css | 29 +++ 02-css-layout/06-display-and-flow/answer.html | 19 ++ 02-css-layout/06-display-and-flow/starter.css | 14 ++ .../06-display-and-flow/starter.html | 19 ++ .../07-selectors-and-pseudo-classes/README.md | 12 ++ .../answer.css | 23 +++ .../answer.html | 25 +++ .../starter.css | 11 + .../starter.html | 25 +++ .../08-overflow-and-sizing/README.md | 12 ++ .../08-overflow-and-sizing/answer.css | 17 ++ .../08-overflow-and-sizing/answer.html | 18 ++ .../08-overflow-and-sizing/starter.css | 5 + .../08-overflow-and-sizing/starter.html | 18 ++ 02-css-layout/09-grid-layout/README.md | 12 ++ 02-css-layout/09-grid-layout/answer.css | 24 +++ 02-css-layout/09-grid-layout/answer.html | 17 ++ 02-css-layout/09-grid-layout/starter.css | 8 + 02-css-layout/09-grid-layout/starter.html | 17 ++ 02-css-layout/10-fixed-and-sticky/README.md | 12 ++ 02-css-layout/10-fixed-and-sticky/answer.css | 35 ++++ 02-css-layout/10-fixed-and-sticky/answer.html | 28 +++ 02-css-layout/10-fixed-and-sticky/starter.css | 14 ++ .../10-fixed-and-sticky/starter.html | 28 +++ 02-css-layout/11-centering-lab/README.md | 12 ++ 02-css-layout/11-centering-lab/answer.css | 20 ++ 02-css-layout/11-centering-lab/answer.html | 14 ++ 02-css-layout/11-centering-lab/starter.css | 8 + 02-css-layout/11-centering-lab/starter.html | 14 ++ 02-css-layout/README.md | 166 +++++++++++++++ README.md | 39 ++++ 85 files changed, 2566 insertions(+) create mode 100644 01-html-structure/01-document-skeleton/README.md create mode 100644 01-html-structure/01-document-skeleton/answer.html create mode 100644 01-html-structure/01-document-skeleton/starter.html create mode 100644 01-html-structure/02-text-links-lists/README.md create mode 100644 01-html-structure/02-text-links-lists/answer.html create mode 100644 01-html-structure/02-text-links-lists/starter.html create mode 100644 01-html-structure/03-semantic-layout/README.md create mode 100644 01-html-structure/03-semantic-layout/answer.html create mode 100644 01-html-structure/03-semantic-layout/starter.html create mode 100644 01-html-structure/04-tables-and-forms/README.md create mode 100644 01-html-structure/04-tables-and-forms/answer.html create mode 100644 01-html-structure/04-tables-and-forms/starter.html create mode 100644 01-html-structure/05-final-project/README.md create mode 100644 01-html-structure/05-final-project/answer.html create mode 100644 01-html-structure/05-final-project/starter.html create mode 100644 01-html-structure/06-block-and-inline/README.md create mode 100644 01-html-structure/06-block-and-inline/answer.html create mode 100644 01-html-structure/06-block-and-inline/starter.html create mode 100644 01-html-structure/07-media-and-paths/README.md create mode 100644 01-html-structure/07-media-and-paths/answer.html create mode 100644 01-html-structure/07-media-and-paths/starter.html create mode 100644 01-html-structure/08-advanced-form-controls/README.md create mode 100644 01-html-structure/08-advanced-form-controls/answer.html create mode 100644 01-html-structure/08-advanced-form-controls/starter.html create mode 100644 01-html-structure/09-nesting-review/README.md create mode 100644 01-html-structure/09-nesting-review/answer.html create mode 100644 01-html-structure/09-nesting-review/starter.html create mode 100644 01-html-structure/README.md create mode 100644 02-css-layout/01-selectors-and-text/README.md create mode 100644 02-css-layout/01-selectors-and-text/answer.css create mode 100644 02-css-layout/01-selectors-and-text/answer.html create mode 100644 02-css-layout/01-selectors-and-text/starter.css create mode 100644 02-css-layout/01-selectors-and-text/starter.html create mode 100644 02-css-layout/02-box-model-card/README.md create mode 100644 02-css-layout/02-box-model-card/answer.css create mode 100644 02-css-layout/02-box-model-card/answer.html create mode 100644 02-css-layout/02-box-model-card/starter.css create mode 100644 02-css-layout/02-box-model-card/starter.html create mode 100644 02-css-layout/03-flex-layout/README.md create mode 100644 02-css-layout/03-flex-layout/answer.css create mode 100644 02-css-layout/03-flex-layout/answer.html create mode 100644 02-css-layout/03-flex-layout/starter.css create mode 100644 02-css-layout/03-flex-layout/starter.html create mode 100644 02-css-layout/04-position-badge/README.md create mode 100644 02-css-layout/04-position-badge/answer.css create mode 100644 02-css-layout/04-position-badge/answer.html create mode 100644 02-css-layout/04-position-badge/starter.css create mode 100644 02-css-layout/04-position-badge/starter.html create mode 100644 02-css-layout/05-final-page/README.md create mode 100644 02-css-layout/05-final-page/answer.css create mode 100644 02-css-layout/05-final-page/answer.html create mode 100644 02-css-layout/05-final-page/starter.css create mode 100644 02-css-layout/05-final-page/starter.html create mode 100644 02-css-layout/06-display-and-flow/README.md create mode 100644 02-css-layout/06-display-and-flow/answer.css create mode 100644 02-css-layout/06-display-and-flow/answer.html create mode 100644 02-css-layout/06-display-and-flow/starter.css create mode 100644 02-css-layout/06-display-and-flow/starter.html create mode 100644 02-css-layout/07-selectors-and-pseudo-classes/README.md create mode 100644 02-css-layout/07-selectors-and-pseudo-classes/answer.css create mode 100644 02-css-layout/07-selectors-and-pseudo-classes/answer.html create mode 100644 02-css-layout/07-selectors-and-pseudo-classes/starter.css create mode 100644 02-css-layout/07-selectors-and-pseudo-classes/starter.html create mode 100644 02-css-layout/08-overflow-and-sizing/README.md create mode 100644 02-css-layout/08-overflow-and-sizing/answer.css create mode 100644 02-css-layout/08-overflow-and-sizing/answer.html create mode 100644 02-css-layout/08-overflow-and-sizing/starter.css create mode 100644 02-css-layout/08-overflow-and-sizing/starter.html create mode 100644 02-css-layout/09-grid-layout/README.md create mode 100644 02-css-layout/09-grid-layout/answer.css create mode 100644 02-css-layout/09-grid-layout/answer.html create mode 100644 02-css-layout/09-grid-layout/starter.css create mode 100644 02-css-layout/09-grid-layout/starter.html create mode 100644 02-css-layout/10-fixed-and-sticky/README.md create mode 100644 02-css-layout/10-fixed-and-sticky/answer.css create mode 100644 02-css-layout/10-fixed-and-sticky/answer.html create mode 100644 02-css-layout/10-fixed-and-sticky/starter.css create mode 100644 02-css-layout/10-fixed-and-sticky/starter.html create mode 100644 02-css-layout/11-centering-lab/README.md create mode 100644 02-css-layout/11-centering-lab/answer.css create mode 100644 02-css-layout/11-centering-lab/answer.html create mode 100644 02-css-layout/11-centering-lab/starter.css create mode 100644 02-css-layout/11-centering-lab/starter.html create mode 100644 02-css-layout/README.md create mode 100644 README.md diff --git a/01-html-structure/01-document-skeleton/README.md b/01-html-structure/01-document-skeleton/README.md new file mode 100644 index 0000000..1e4ede2 --- /dev/null +++ b/01-html-structure/01-document-skeleton/README.md @@ -0,0 +1,36 @@ +# 练习 1：文档骨架 + +## 目标 + +掌握一个 HTML 页面最基本的完整结构。 + +## 你要练什么 + +- `` +- `` +- `` +- `` +- `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) diff --git a/01-html-structure/01-document-skeleton/answer.html b/01-html-structure/01-document-skeleton/answer.html new file mode 100644 index 0000000..2763fb7 --- /dev/null +++ b/01-html-structure/01-document-skeleton/answer.html @@ -0,0 +1,19 @@ + + + + + + 前端学习计划 + + +

我的前端学习路线

+

我正在学习 HTML 结构，目标是先把页面骨架写清楚，再继续学习 CSS 和 JavaScript。

+ +

本周目标

+ + + diff --git a/01-html-structure/01-document-skeleton/starter.html b/01-html-structure/01-document-skeleton/starter.html new file mode 100644 index 0000000..452e227 --- /dev/null +++ b/01-html-structure/01-document-skeleton/starter.html @@ -0,0 +1,16 @@ + + + + + + TODO + + + + + diff --git a/01-html-structure/02-text-links-lists/README.md b/01-html-structure/02-text-links-lists/README.md new file mode 100644 index 0000000..8c04a43 --- /dev/null +++ b/01-html-structure/02-text-links-lists/README.md @@ -0,0 +1,37 @@ +# 练习 2：文本、链接、列表 + +## 目标 + +掌握最常见的内容组织标签。 + +## 你要练什么 + +- `h1` 到 `h3` +- `p` +- `strong` +- `em` +- `a` +- `ul` / `ol` / `li` + +## 任务 + +请完成一个“前端新手资源页”，要求包含： + +- 一个主标题 +- 一个资源介绍段落，段落中要有 `strong` 和 `em` +- 一个“推荐网站”二级标题 +- 一个无序列表，里面至少 3 个链接 +- 一个“学习步骤”二级标题 +- 一个有序列表，里面至少 4 步 + +## 检查点 + +- `a` 是否有 `href` +- 列表项是否全部在 `li` 中 +- 强调内容是否使用了合适标签 +- 标题层级是否合理 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/02-text-links-lists/starter.html) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/02-text-links-lists/answer.html) diff --git a/01-html-structure/02-text-links-lists/answer.html b/01-html-structure/02-text-links-lists/answer.html new file mode 100644 index 0000000..b4d7c81 --- /dev/null +++ b/01-html-structure/02-text-links-lists/answer.html @@ -0,0 +1,31 @@ + + + + + + 前端新手资源页 + + +

前端新手资源页

+ +

+ 学习前端时，最重要的是先把 HTML 结构 打稳，再逐步进入 + CSS 布局 和 JavaScript 交互。 +

+ +

推荐网站

+ + +

学习步骤

+
    +
  1. 先掌握 HTML 页面骨架
    2. +
  2. 练习文本、链接和列表结构
    3. +
  3. 开始写语义化页面布局
    4. +
  4. 再进入表格和表单练习
    5. +
+ + diff --git a/01-html-structure/02-text-links-lists/starter.html b/01-html-structure/02-text-links-lists/starter.html new file mode 100644 index 0000000..3ccda3e --- /dev/null +++ b/01-html-structure/02-text-links-lists/starter.html @@ -0,0 +1,16 @@ + + + + + + 前端新手资源页 + + + + + diff --git a/01-html-structure/03-semantic-layout/README.md b/01-html-structure/03-semantic-layout/README.md new file mode 100644 index 0000000..f20c405 --- /dev/null +++ b/01-html-structure/03-semantic-layout/README.md @@ -0,0 +1,39 @@ +# 练习 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) diff --git a/01-html-structure/03-semantic-layout/answer.html b/01-html-structure/03-semantic-layout/answer.html new file mode 100644 index 0000000..514fbcf --- /dev/null +++ b/01-html-structure/03-semantic-layout/answer.html @@ -0,0 +1,43 @@ + + + + + + 个人博客首页 + + +
+

小周的前端博客

+ +
+ +
+
+

最新文章

+ +
+

HTML 结构入门

+

这篇文章介绍如何用标题、段落和列表搭建页面基础结构。

+
+ +
+

为什么要写语义化标签

+

语义化标签让页面更清晰，也更方便后期维护。

+
+
+ + +
+ + + + diff --git a/01-html-structure/03-semantic-layout/starter.html b/01-html-structure/03-semantic-layout/starter.html new file mode 100644 index 0000000..ecd9b06 --- /dev/null +++ b/01-html-structure/03-semantic-layout/starter.html @@ -0,0 +1,17 @@ + + + + + + 个人博客首页 + + + + + diff --git a/01-html-structure/04-tables-and-forms/README.md b/01-html-structure/04-tables-and-forms/README.md new file mode 100644 index 0000000..6b67c26 --- /dev/null +++ b/01-html-structure/04-tables-and-forms/README.md @@ -0,0 +1,40 @@ +# 练习 4：表格与表单 + +## 目标 + +掌握结构化数据和信息收集的 HTML 写法。 + +## 你要练什么 + +- `table` +- `thead` +- `tbody` +- `tr` +- `th` +- `td` +- `form` +- `label` +- `input` +- `textarea` +- `button` + +## 任务 + +请完成一个“前端训练营报名页”，要求包含： + +- 一个课程安排表格 +- 表格至少 3 列、3 行数据 +- 一个报名表单 +- 表单中至少有姓名、邮箱、学习目标、提交按钮 + +## 检查点 + +- 表头是否使用 `th` +- 数据是否使用 `td` +- 表单控件是否和 `label` 对应 +- 提交按钮是否在 `form` 中 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/04-tables-and-forms/starter.html) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/04-tables-and-forms/answer.html) diff --git a/01-html-structure/04-tables-and-forms/answer.html b/01-html-structure/04-tables-and-forms/answer.html new file mode 100644 index 0000000..5d43071 --- /dev/null +++ b/01-html-structure/04-tables-and-forms/answer.html @@ -0,0 +1,59 @@ + + + + + + 前端训练营报名页 + + +

前端训练营报名页

+ +

课程安排

+ + + + + + + + + + + + + + + + + + + + + + + + + +
周次主题目标
第 1 周HTML 结构掌握页面骨架与常用标签
第 2 周CSS 布局掌握盒模型和 Flex
第 3 周JavaScript 基础掌握变量、函数和对象
+ +

报名表单

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ + diff --git a/01-html-structure/04-tables-and-forms/starter.html b/01-html-structure/04-tables-and-forms/starter.html new file mode 100644 index 0000000..b5d22cd --- /dev/null +++ b/01-html-structure/04-tables-and-forms/starter.html @@ -0,0 +1,15 @@ + + + + + + 前端训练营报名页 + + + + + diff --git a/01-html-structure/05-final-project/README.md b/01-html-structure/05-final-project/README.md new file mode 100644 index 0000000..fa851a4 --- /dev/null +++ b/01-html-structure/05-final-project/README.md @@ -0,0 +1,48 @@ +# 练习 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) diff --git a/01-html-structure/05-final-project/answer.html b/01-html-structure/05-final-project/answer.html new file mode 100644 index 0000000..9f86bf2 --- /dev/null +++ b/01-html-structure/05-final-project/answer.html @@ -0,0 +1,106 @@ + + + + + + 个人前端学习主页 + + +
+

小周的前端学习主页

+ +
+ +
+
+

自我介绍

+

我正在系统学习前端开发，目前优先掌握 HTML 结构、CSS 布局和 JavaScript 基础。

+
+ +
+

学习路线

+
    +
  • HTML 结构
    • +
  • CSS 布局与视觉
    • +
  • JavaScript 语言本体
    • +
  • DOM 与事件
    • +
+
+ +
+

练习项目

+ +
+

项目一：博客首页结构

+

重点练习 `header`、`nav`、`main`、`section` 和 `article` 的页面组织方式。

+
+ +
+

项目二：训练营报名页

+

重点练习表格和表单的结构化写法。

+
+
+ +
+

学习进度

+ + + + + + + + + + + + + + + + + + + + +
模块状态说明
HTML 结构学习中正在练习语义化标签
CSS未开始等 HTML 熟练后进入
+
+ + + +
+

联系我

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+ + + + diff --git a/01-html-structure/05-final-project/starter.html b/01-html-structure/05-final-project/starter.html new file mode 100644 index 0000000..e0dfa6b --- /dev/null +++ b/01-html-structure/05-final-project/starter.html @@ -0,0 +1,16 @@ + + + + + + 个人前端学习主页 + + + + + diff --git a/01-html-structure/06-block-and-inline/README.md b/01-html-structure/06-block-and-inline/README.md new file mode 100644 index 0000000..ac09c2b --- /dev/null +++ b/01-html-structure/06-block-and-inline/README.md @@ -0,0 +1,28 @@ +# 练习 6：块级与行内元素 + +## 目标 + +分清什么标签默认独占一行，什么标签默认跟着文字流动。 + +## 你要练什么 + +- 块级元素 +- 行内元素 +- `div` +- `span` +- `p` +- `a` +- `strong` + +## 任务 + +完成一个“学习提示条”，要求： + +- 用块级元素搭出 3 条提示 +- 每条提示中有关键词，用行内标签包起来 +- 不要把段落错误地放进行内标签里 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/06-block-and-inline/starter.html) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/06-block-and-inline/answer.html) diff --git a/01-html-structure/06-block-and-inline/answer.html b/01-html-structure/06-block-and-inline/answer.html new file mode 100644 index 0000000..2102128 --- /dev/null +++ b/01-html-structure/06-block-and-inline/answer.html @@ -0,0 +1,25 @@ + + + + + + 块级与行内元素 + + +

块级与行内元素练习

+ +
+

先保证 结构 正确，再考虑样式。

+
+ +
+

页面区域通常由 块级元素 负责搭建。

+
+ +
+

一句话中的局部强调，通常用 行内元素 处理。

+
+ +

查看完整学习文档

+ + diff --git a/01-html-structure/06-block-and-inline/starter.html b/01-html-structure/06-block-and-inline/starter.html new file mode 100644 index 0000000..e25ad0c --- /dev/null +++ b/01-html-structure/06-block-and-inline/starter.html @@ -0,0 +1,16 @@ + + + + + + 块级与行内元素 + + + + + diff --git a/01-html-structure/07-media-and-paths/README.md b/01-html-structure/07-media-and-paths/README.md new file mode 100644 index 0000000..7319619 --- /dev/null +++ b/01-html-structure/07-media-and-paths/README.md @@ -0,0 +1,29 @@ +# 练习 7：图片、视频与路径 + +## 目标 + +掌握媒体标签和资源路径的基础写法。 + +## 你要练什么 + +- `img` +- `video` +- `src` +- `alt` +- `controls` + +## 任务 + +请完成一个“课程展示页”，要求包含： + +- 一个课程封面图 +- 一段图片说明 +- 一个视频区域 +- 一个下载讲义链接 + +资源文件可以先用占位路径，不要求真实可播放。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/07-media-and-paths/starter.html) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/07-media-and-paths/answer.html) diff --git a/01-html-structure/07-media-and-paths/answer.html b/01-html-structure/07-media-and-paths/answer.html new file mode 100644 index 0000000..5562f3d --- /dev/null +++ b/01-html-structure/07-media-and-paths/answer.html @@ -0,0 +1,18 @@ + + + + + + 图片、视频与路径 + + +

课程展示页

+ + HTML 结构课程封面 +

这是一门面向初学者的 HTML 结构课程。

+ + + +

下载讲义

+ + diff --git a/01-html-structure/07-media-and-paths/starter.html b/01-html-structure/07-media-and-paths/starter.html new file mode 100644 index 0000000..f19b2e0 --- /dev/null +++ b/01-html-structure/07-media-and-paths/starter.html @@ -0,0 +1,15 @@ + + + + + + 图片、视频与路径 + + + + + diff --git a/01-html-structure/08-advanced-form-controls/README.md b/01-html-structure/08-advanced-form-controls/README.md new file mode 100644 index 0000000..f8fa568 --- /dev/null +++ b/01-html-structure/08-advanced-form-controls/README.md @@ -0,0 +1,28 @@ +# 练习 8：进阶表单控件 + +## 目标 + +补齐常见表单控件的结构写法。 + +## 你要练什么 + +- `select` +- `option` +- `input type="radio"` +- `input type="checkbox"` +- `label` + +## 任务 + +完成一个“学习偏好登记表”，要求包含： + +- 姓名输入框 +- 学习方向下拉框 +- 学习节奏单选 +- 感兴趣模块多选 +- 提交按钮 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/08-advanced-form-controls/starter.html) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/08-advanced-form-controls/answer.html) diff --git a/01-html-structure/08-advanced-form-controls/answer.html b/01-html-structure/08-advanced-form-controls/answer.html new file mode 100644 index 0000000..37aab53 --- /dev/null +++ b/01-html-structure/08-advanced-form-controls/answer.html @@ -0,0 +1,62 @@ + + + + + + 进阶表单控件 + + +

学习偏好登记表

+ +
+
+ + +
+ +
+ + +
+ +
+ 学习节奏 + + + +
+ +
+ 感兴趣模块 + + + +
+ + +
+ + diff --git a/01-html-structure/08-advanced-form-controls/starter.html b/01-html-structure/08-advanced-form-controls/starter.html new file mode 100644 index 0000000..e899671 --- /dev/null +++ b/01-html-structure/08-advanced-form-controls/starter.html @@ -0,0 +1,17 @@ + + + + + + 进阶表单控件 + + + + + diff --git a/01-html-structure/09-nesting-review/README.md b/01-html-structure/09-nesting-review/README.md new file mode 100644 index 0000000..4f0fd5e --- /dev/null +++ b/01-html-structure/09-nesting-review/README.md @@ -0,0 +1,21 @@ +# 练习 9：嵌套纠错 + +## 目标 + +训练你检查 HTML 结构是否写错。 + +## 你要练什么 + +- 标签闭合 +- 父子关系 +- 列表嵌套 +- 表单结构 + +## 任务 + +先看 `starter.html`，里面故意写了一些常见错误。你的任务是自己修正，再对照 `answer.html`。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/09-nesting-review/starter.html) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/09-nesting-review/answer.html) diff --git a/01-html-structure/09-nesting-review/answer.html b/01-html-structure/09-nesting-review/answer.html new file mode 100644 index 0000000..6944c82 --- /dev/null +++ b/01-html-structure/09-nesting-review/answer.html @@ -0,0 +1,26 @@ + + + + + + 嵌套纠错 + + +

HTML 纠错练习

+ +

下面这些结构已经修正完成。

+ + + +

这里改成更清晰的链接结构

+ +
+ + + +
+ + diff --git a/01-html-structure/09-nesting-review/starter.html b/01-html-structure/09-nesting-review/starter.html new file mode 100644 index 0000000..64b3867 --- /dev/null +++ b/01-html-structure/09-nesting-review/starter.html @@ -0,0 +1,28 @@ + + + + + + 嵌套纠错 + + +

HTML 纠错练习

+ +

下面这些结构有错误，请你自己修正。 + +

+ + +

这里的嵌套写法是否合理？

+ + +
+ + +
+ + + + + + diff --git a/02-css-layout/05-final-page/starter.css b/02-css-layout/05-final-page/starter.css new file mode 100644 index 0000000..965c0b0 --- /dev/null +++ b/02-css-layout/05-final-page/starter.css @@ -0,0 +1,34 @@ +body { +} + +.page { +} + +.site-header { +} + +.nav { +} + +.hero { +} + +.hero-link { +} + +.tracks { +} + +.track-card { +} + +.contact { +} + +.form { +} + +input, +textarea, +button { +} diff --git a/02-css-layout/05-final-page/starter.html b/02-css-layout/05-final-page/starter.html new file mode 100644 index 0000000..f4a2e44 --- /dev/null +++ b/02-css-layout/05-final-page/starter.html @@ -0,0 +1,60 @@ + + + + + + 前端学习路线页 + + + +
+
+

前端学习路线

+ +
+ +
+
+
+

第 2 阶段

+

CSS 布局与视觉

+

目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。

+
+ 开始练习 +
+ +
+
+

盒模型

+

理解 margin、padding、border 的区别。

+
+
+

Flex

+

学会横向排列、间距和居中。

+
+
+

定位

+

掌握相对定位和绝对定位的配合。

+
+
+ +
+

练习登记

+
+ + + + + + + +
+
+
+
+ + diff --git a/02-css-layout/06-display-and-flow/README.md b/02-css-layout/06-display-and-flow/README.md new file mode 100644 index 0000000..2df2a4c --- /dev/null +++ b/02-css-layout/06-display-and-flow/README.md @@ -0,0 +1,12 @@ +# 练习 6：Display 与文档流 + +## 目标 + +理解 `block`、`inline`、`inline-block`、`none` 和默认文档流。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/06-display-and-flow/starter.html) +- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/06-display-and-flow/starter.css) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/06-display-and-flow/answer.html) +- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/06-display-and-flow/answer.css) diff --git a/02-css-layout/06-display-and-flow/answer.css b/02-css-layout/06-display-and-flow/answer.css new file mode 100644 index 0000000..f36b3fa --- /dev/null +++ b/02-css-layout/06-display-and-flow/answer.css @@ -0,0 +1,29 @@ +body { + margin: 0; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; + background: #f8fafc; +} + +.wrap { + width: 760px; + margin: 40px auto; +} + +.tag { + display: inline-block; + padding: 8px 14px; + margin-right: 10px; + background: #dbeafe; + border-radius: 999px; +} + +.hide-me { + display: none; +} + +.box { + margin-top: 16px; + padding: 16px; + background: #ffffff; + border: 1px solid #cbd5e1; +} diff --git a/02-css-layout/06-display-and-flow/answer.html b/02-css-layout/06-display-and-flow/answer.html new file mode 100644 index 0000000..cbb1c83 --- /dev/null +++ b/02-css-layout/06-display-and-flow/answer.html @@ -0,0 +1,19 @@ + + + + + + Display 与文档流 + + + +
+ HTML + CSS + JavaScript + +
这是块级盒子 A
+
这是块级盒子 B
+
+ + diff --git a/02-css-layout/06-display-and-flow/starter.css b/02-css-layout/06-display-and-flow/starter.css new file mode 100644 index 0000000..7e887c5 --- /dev/null +++ b/02-css-layout/06-display-and-flow/starter.css @@ -0,0 +1,14 @@ +body { +} + +.wrap { +} + +.tag { +} + +.hide-me { +} + +.box { +} diff --git a/02-css-layout/06-display-and-flow/starter.html b/02-css-layout/06-display-and-flow/starter.html new file mode 100644 index 0000000..f8d78b4 --- /dev/null +++ b/02-css-layout/06-display-and-flow/starter.html @@ -0,0 +1,19 @@ + + + + + + Display 与文档流 + + + +
+ HTML + CSS + JavaScript + +
这是块级盒子 A
+
这是块级盒子 B
+
+ + diff --git a/02-css-layout/07-selectors-and-pseudo-classes/README.md b/02-css-layout/07-selectors-and-pseudo-classes/README.md new file mode 100644 index 0000000..714e8e4 --- /dev/null +++ b/02-css-layout/07-selectors-and-pseudo-classes/README.md @@ -0,0 +1,12 @@ +# 练习 7：组合选择器与伪类 + +## 目标 + +补齐后代选择器、子代选择器、`:hover`、`:first-child`。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/07-selectors-and-pseudo-classes/starter.html) +- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/07-selectors-and-pseudo-classes/starter.css) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/07-selectors-and-pseudo-classes/answer.html) +- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/07-selectors-and-pseudo-classes/answer.css) diff --git a/02-css-layout/07-selectors-and-pseudo-classes/answer.css b/02-css-layout/07-selectors-and-pseudo-classes/answer.css new file mode 100644 index 0000000..2e7acae --- /dev/null +++ b/02-css-layout/07-selectors-and-pseudo-classes/answer.css @@ -0,0 +1,23 @@ +body { + margin: 40px; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; +} + +.menu a { + color: #475569; + text-decoration: none; +} + +.menu > a { + margin-right: 16px; + font-weight: 600; +} + +.menu a:hover { + color: #2563eb; +} + +.list li:first-child { + color: #b45309; + font-weight: 700; +} diff --git a/02-css-layout/07-selectors-and-pseudo-classes/answer.html b/02-css-layout/07-selectors-and-pseudo-classes/answer.html new file mode 100644 index 0000000..c14fcc5 --- /dev/null +++ b/02-css-layout/07-selectors-and-pseudo-classes/answer.html @@ -0,0 +1,25 @@ + + + + + + 组合选择器与伪类 + + + + + +
+

学习建议

+ +
+ + diff --git a/02-css-layout/07-selectors-and-pseudo-classes/starter.css b/02-css-layout/07-selectors-and-pseudo-classes/starter.css new file mode 100644 index 0000000..b38c37b --- /dev/null +++ b/02-css-layout/07-selectors-and-pseudo-classes/starter.css @@ -0,0 +1,11 @@ +.menu a { +} + +.menu > a { +} + +.menu a:hover { +} + +.list li:first-child { +} diff --git a/02-css-layout/07-selectors-and-pseudo-classes/starter.html b/02-css-layout/07-selectors-and-pseudo-classes/starter.html new file mode 100644 index 0000000..9440b08 --- /dev/null +++ b/02-css-layout/07-selectors-and-pseudo-classes/starter.html @@ -0,0 +1,25 @@ + + + + + + 组合选择器与伪类 + + + + + +
+

学习建议

+ +
+ + diff --git a/02-css-layout/08-overflow-and-sizing/README.md b/02-css-layout/08-overflow-and-sizing/README.md new file mode 100644 index 0000000..27d4bae --- /dev/null +++ b/02-css-layout/08-overflow-and-sizing/README.md @@ -0,0 +1,12 @@ +# 练习 8：Overflow 与尺寸 + +## 目标 + +掌握内容过多时的处理方式。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/08-overflow-and-sizing/starter.html) +- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/08-overflow-and-sizing/starter.css) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/08-overflow-and-sizing/answer.html) +- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/08-overflow-and-sizing/answer.css) diff --git a/02-css-layout/08-overflow-and-sizing/answer.css b/02-css-layout/08-overflow-and-sizing/answer.css new file mode 100644 index 0000000..76397f3 --- /dev/null +++ b/02-css-layout/08-overflow-and-sizing/answer.css @@ -0,0 +1,17 @@ +body { + margin: 0; + background: #f1f5f9; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; +} + +.panel { + width: 320px; + height: 180px; + margin: 48px auto; + padding: 18px; + overflow: auto; + background: #ffffff; + border: 1px solid #cbd5e1; + border-radius: 16px; + box-sizing: border-box; +} diff --git a/02-css-layout/08-overflow-and-sizing/answer.html b/02-css-layout/08-overflow-and-sizing/answer.html new file mode 100644 index 0000000..d5e1beb --- /dev/null +++ b/02-css-layout/08-overflow-and-sizing/answer.html @@ -0,0 +1,18 @@ + + + + + + Overflow 与尺寸 + + + +
+

学习记录

+

+ 今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 + CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。 +

+
+ + diff --git a/02-css-layout/08-overflow-and-sizing/starter.css b/02-css-layout/08-overflow-and-sizing/starter.css new file mode 100644 index 0000000..e829b4b --- /dev/null +++ b/02-css-layout/08-overflow-and-sizing/starter.css @@ -0,0 +1,5 @@ +body { +} + +.panel { +} diff --git a/02-css-layout/08-overflow-and-sizing/starter.html b/02-css-layout/08-overflow-and-sizing/starter.html new file mode 100644 index 0000000..2483293 --- /dev/null +++ b/02-css-layout/08-overflow-and-sizing/starter.html @@ -0,0 +1,18 @@ + + + + + + Overflow 与尺寸 + + + +
+

学习记录

+

+ 今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 + CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。 +

+
+ + diff --git a/02-css-layout/09-grid-layout/README.md b/02-css-layout/09-grid-layout/README.md new file mode 100644 index 0000000..c15c380 --- /dev/null +++ b/02-css-layout/09-grid-layout/README.md @@ -0,0 +1,12 @@ +# 练习 9：Grid 布局 + +## 目标 + +掌握最基础的二维网格排版。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/09-grid-layout/starter.html) +- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/09-grid-layout/starter.css) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/09-grid-layout/answer.html) +- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/09-grid-layout/answer.css) diff --git a/02-css-layout/09-grid-layout/answer.css b/02-css-layout/09-grid-layout/answer.css new file mode 100644 index 0000000..f891952 --- /dev/null +++ b/02-css-layout/09-grid-layout/answer.css @@ -0,0 +1,24 @@ +body { + margin: 0; + min-height: 100vh; + display: grid; + place-items: center; + background: #eff6ff; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; +} + +.grid { + width: min(760px, calc(100% - 40px)); + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 18px; +} + +.cell { + padding: 28px; + background: #ffffff; + border: 1px solid #bfdbfe; + border-radius: 18px; + text-align: center; + font-weight: 700; +} diff --git a/02-css-layout/09-grid-layout/answer.html b/02-css-layout/09-grid-layout/answer.html new file mode 100644 index 0000000..c9dde48 --- /dev/null +++ b/02-css-layout/09-grid-layout/answer.html @@ -0,0 +1,17 @@ + + + + + + Grid 布局 + + + +
+
HTML
+
CSS
+
JavaScript
+
TypeScript
+
+ + diff --git a/02-css-layout/09-grid-layout/starter.css b/02-css-layout/09-grid-layout/starter.css new file mode 100644 index 0000000..4aefd06 --- /dev/null +++ b/02-css-layout/09-grid-layout/starter.css @@ -0,0 +1,8 @@ +body { +} + +.grid { +} + +.cell { +} diff --git a/02-css-layout/09-grid-layout/starter.html b/02-css-layout/09-grid-layout/starter.html new file mode 100644 index 0000000..7c2b219 --- /dev/null +++ b/02-css-layout/09-grid-layout/starter.html @@ -0,0 +1,17 @@ + + + + + + Grid 布局 + + + +
+
HTML
+
CSS
+
JavaScript
+
TypeScript
+
+ + diff --git a/02-css-layout/10-fixed-and-sticky/README.md b/02-css-layout/10-fixed-and-sticky/README.md new file mode 100644 index 0000000..0fc5e8f --- /dev/null +++ b/02-css-layout/10-fixed-and-sticky/README.md @@ -0,0 +1,12 @@ +# 练习 10：Fixed 与 Sticky + +## 目标 + +理解固定定位和粘性定位的使用场景。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/10-fixed-and-sticky/starter.html) +- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/10-fixed-and-sticky/starter.css) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/10-fixed-and-sticky/answer.html) +- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/10-fixed-and-sticky/answer.css) diff --git a/02-css-layout/10-fixed-and-sticky/answer.css b/02-css-layout/10-fixed-and-sticky/answer.css new file mode 100644 index 0000000..3649f46 --- /dev/null +++ b/02-css-layout/10-fixed-and-sticky/answer.css @@ -0,0 +1,35 @@ +body { + margin: 0; + background: #f8fafc; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; +} + +.help { + position: fixed; + right: 20px; + bottom: 20px; + padding: 12px 16px; + border-radius: 999px; + background: #0f766e; + color: #ffffff; + text-decoration: none; +} + +.page { + width: min(760px, calc(100% - 40px)); + margin: 0 auto; +} + +.topbar { + position: sticky; + top: 0; + padding: 16px; + background: #ffffff; + border-bottom: 1px solid #cbd5e1; + font-weight: 700; +} + +.content { + min-height: 1200px; + padding: 24px 0 80px; +} diff --git a/02-css-layout/10-fixed-and-sticky/answer.html b/02-css-layout/10-fixed-and-sticky/answer.html new file mode 100644 index 0000000..3f0fea7 --- /dev/null +++ b/02-css-layout/10-fixed-and-sticky/answer.html @@ -0,0 +1,28 @@ + + + + + + Fixed 与 Sticky + + + + 帮助 + +
+
学习导航
+
+

向下滚动时观察导航位置。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+
+
+ + diff --git a/02-css-layout/10-fixed-and-sticky/starter.css b/02-css-layout/10-fixed-and-sticky/starter.css new file mode 100644 index 0000000..0b2afa5 --- /dev/null +++ b/02-css-layout/10-fixed-and-sticky/starter.css @@ -0,0 +1,14 @@ +body { +} + +.help { +} + +.page { +} + +.topbar { +} + +.content { +} diff --git a/02-css-layout/10-fixed-and-sticky/starter.html b/02-css-layout/10-fixed-and-sticky/starter.html new file mode 100644 index 0000000..aa2c47a --- /dev/null +++ b/02-css-layout/10-fixed-and-sticky/starter.html @@ -0,0 +1,28 @@ + + + + + + Fixed 与 Sticky + + + + 帮助 + +
+
学习导航
+
+

向下滚动时观察导航位置。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+

这里放一些占位内容。

+
+
+ + diff --git a/02-css-layout/11-centering-lab/README.md b/02-css-layout/11-centering-lab/README.md new file mode 100644 index 0000000..bc98b17 --- /dev/null +++ b/02-css-layout/11-centering-lab/README.md @@ -0,0 +1,12 @@ +# 练习 11：居中专题 + +## 目标 + +练习最常见的内容居中写法。 + +## 文件 + +- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/11-centering-lab/starter.html) +- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/11-centering-lab/starter.css) +- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/11-centering-lab/answer.html) +- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/11-centering-lab/answer.css) diff --git a/02-css-layout/11-centering-lab/answer.css b/02-css-layout/11-centering-lab/answer.css new file mode 100644 index 0000000..00ad27a --- /dev/null +++ b/02-css-layout/11-centering-lab/answer.css @@ -0,0 +1,20 @@ +body { + margin: 0; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; +} + +.stage { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%); +} + +.box { + padding: 28px 36px; + border-radius: 18px; + background: #ffffff; + border: 1px solid #fed7aa; + box-shadow: 0 20px 40px rgba(234, 88, 12, 0.12); +} diff --git a/02-css-layout/11-centering-lab/answer.html b/02-css-layout/11-centering-lab/answer.html new file mode 100644 index 0000000..71e99e3 --- /dev/null +++ b/02-css-layout/11-centering-lab/answer.html @@ -0,0 +1,14 @@ + + + + + + 居中专题 + + + +
+
把我放到中间
+
+ + diff --git a/02-css-layout/11-centering-lab/starter.css b/02-css-layout/11-centering-lab/starter.css new file mode 100644 index 0000000..1a9f4e5 --- /dev/null +++ b/02-css-layout/11-centering-lab/starter.css @@ -0,0 +1,8 @@ +body { +} + +.stage { +} + +.box { +} diff --git a/02-css-layout/11-centering-lab/starter.html b/02-css-layout/11-centering-lab/starter.html new file mode 100644 index 0000000..0d72667 --- /dev/null +++ b/02-css-layout/11-centering-lab/starter.html @@ -0,0 +1,14 @@ + + + + + + 居中专题 + + + +
+
把我放到中间
+
+ + diff --git a/02-css-layout/README.md b/02-css-layout/README.md new file mode 100644 index 0000000..f7854b6 --- /dev/null +++ b/02-css-layout/README.md @@ -0,0 +1,166 @@ +# CSS Layout + +这部分只解决一个问题：你能不能把已经写好的 HTML 结构，变成清晰、好读、布局正确的页面。 + +## 学完后你应该掌握 + +- CSS 选择器的基本使用 +- 常见组合选择器和伪类 +- 盒模型的组成 +- `display` 的常见取值 +- 宽高、边距、边框、背景的控制 +- Flex 布局的核心属性 +- Grid 布局的基础用法 +- 定位 `position` 的基础用法 +- `overflow`、文档流和常见居中方式 +- 如何把一个普通 HTML 页面排成可读的界面 + +## CSS 是什么 + +CSS 负责的是页面的视觉和布局。 + +它回答的是： + +- 元素长什么样 +- 元素之间怎么排 +- 间距有多大 +- 文字颜色、大小、背景是什么 + +如果 HTML 是骨架，CSS 就是排版和外观。 + +## 必须建立的 5 个核心意识 + +### 1. 先有结构，再有样式 + +CSS 不是替代 HTML。 + +正确顺序是： + +1. 先把 HTML 结构写清楚 +2. 再用 CSS 调整视觉和布局 + +### 2. 你写的不是“好看”，而是“规则” + +CSS 不是一条条临时修补。 + +你写的是一组规则，例如： + +```css +.card { + padding: 16px; + border: 1px solid #d0d7de; +} +``` + +意思是：所有 `class="card"` 的元素都遵守这套样式。 + +### 3. 先控制外部间距，再控制内部间距 + +- `margin`：元素和外面的距离 +- `padding`：内容和边框的距离 + +这是初学 CSS 最容易混的地方。 + +### 4. 布局优先用 Flex + +现代页面里，很多一维布局都优先用 Flex： + +- 水平排列 +- 垂直居中 +- 两端对齐 +- 等宽分栏 + +### 5. 少写“碰运气”的样式 + +比如乱写固定高度、随意加很多空格、靠多个 `br` 撑页面，这些都不是可靠布局。 + +## 高频属性速记 + +### 盒模型 + +- `width` +- `height` +- `padding` +- `border` +- `margin` +- `box-sizing` + +### 文字与颜色 + +- `color` +- `font-size` +- `font-weight` +- `line-height` +- `text-align` + +### 背景与边框 + +- `background` +- `background-color` +- `border` +- `border-radius` +- `box-shadow` + +### 布局 + +- `display` +- `flex` +- `justify-content` +- `align-items` +- `gap` +- `grid-template-columns` +- `place-items` + +### 定位 + +- `position` +- `top` +- `right` +- `bottom` +- `left` +- `z-index` +- `sticky` +- `fixed` + +## 学习顺序 + +1. 选择器与基础样式 +2. 盒模型 +3. `display` +4. Flex 布局 +5. 定位 +6. 综合页面练习 + +## 练习目录 + +- [01-selectors-and-text/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/README.md) +- [02-box-model-card/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/README.md) +- [03-flex-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/README.md) +- [04-position-badge/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/README.md) +- [05-final-page/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/README.md) +- [06-display-and-flow/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/06-display-and-flow/README.md) +- [07-selectors-and-pseudo-classes/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/07-selectors-and-pseudo-classes/README.md) +- [08-overflow-and-sizing/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/08-overflow-and-sizing/README.md) +- [09-grid-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/09-grid-layout/README.md) +- [10-fixed-and-sticky/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/10-fixed-and-sticky/README.md) +- [11-centering-lab/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/11-centering-lab/README.md) + +## 过关标准 + +如果你能独立做到下面这些，就说明你的 CSS 已经入门： + +- 能看懂并写出常见选择器 +- 能写后代选择器、子代选择器和伪类 +- 能分清 `margin`、`padding`、`border` +- 能用 Flex 写出横向排列和居中 +- 能用 Grid 写基础网格布局 +- 能理解相对定位和绝对定位的配合 +- 能理解 `fixed`、`sticky`、`overflow` 的常见场景 +- 能把一个简单页面排成可读的布局 + +## 学习建议 + +- 每次先观察页面分区，再决定写哪些类名 +- 少堆无意义类名，类名尽量体现用途 +- 先写大布局，再修文字、颜色、边框 +- 写完后删掉无效样式，保持规则干净 diff --git a/README.md b/README.md new file mode 100644 index 0000000..d55dc63 --- /dev/null +++ b/README.md @@ -0,0 +1,39 @@ +# Front-End Study Workspace + +这个工作区按知识点分目录，便于你后续继续加入 CSS、JavaScript、DOM、TypeScript 等内容。 + +## 目录规则 + +- `01-html-structure`：HTML 结构 +- `02-css-layout`：预留给 CSS +- `03-javascript-core`：预留给 JavaScript +- `04-dom-events-async`：预留给 DOM + 事件 + 异步 +- `05-typescript`：预留给 TypeScript + +## 当前可学内容 + +现在已经为你整理好 `01-html-structure`，里面包含： + +- 讲义 +- 分阶段练习 +- `starter.html` 起始代码 +- `answer.html` 参考答案 + +现在也已经整理好 `02-css-layout`，里面包含： + +- CSS 讲义 +- 分阶段案例 +- `starter.html` / `starter.css` 起始代码 +- `answer.html` / `answer.css` 参考答案 + +两部分现在都已经补充到“核心主线 + 常见细分知识点”。 + +## 使用方式 + +1. 先阅读 [01-html-structure/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/README.md) +2. 再阅读 [02-css-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/README.md) +3. 按顺序完成每个练习目录 +4. 先写 `starter.html` 或 `starter.css` +5. 写完后再对照答案文件 + +如果你后面要继续学其他知识点，我可以按同样结构继续给你补 `03-javascript-core`、`04-dom-events-async` 等目录。