rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add CSS layout exercises and corresponding HTML files

Browse Source 
- 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.
This commit is contained in:
chali
2026-03-09 14:16:22 +08:00
commit 4495ae0e28
85 changed files with 2566 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
01-html-structure/01-document-skeleton/README.md Normal file
View File

@@ -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)

19
01-html-structure/01-document-skeleton/answer.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端学习计划</title>
</head>
<body>
<h1>我的前端学习路线</h1>
<p>我正在学习 HTML 结构，目标是先把页面骨架写清楚，再继续学习 CSS 和 JavaScript。</p>
<h2>本周目标</h2>
<ul>
<li>理解 HTML 基本骨架</li>
<li>掌握标题、段落和列表标签</li>
<li>独立写出一个简单页面</li>
</ul>
</body>
</html>

16
01-html-structure/01-document-skeleton/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TODO</title>
</head>
<body>
<!-- 任务：
1. 写一个 h1
2. 写一段自我介绍
3. 写一个 h2
4. 写一个 ul，里面至少 3 个 li
-->
</body>
</html>

37
01-html-structure/02-text-links-lists/README.md Normal file
View File

@@ -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)

31
01-html-structure/02-text-links-lists/answer.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端新手资源页</title>
</head>
<body>
<h1>前端新手资源页</h1>
<p>
学习前端时，最重要的是先把 <strong>HTML 结构</strong> 打稳，再逐步进入
<em>CSS 布局</em> 和 JavaScript 交互。
</p>
<h2>推荐网站</h2>
<ul>
<li><a href="https://developer.mozilla.org/" target="_blank">MDN Web Docs</a></li>
<li><a href="https://www.w3schools.com/" target="_blank">W3Schools</a></li>
<li><a href="https://html.spec.whatwg.org/" target="_blank">HTML Standard</a></li>
</ul>
<h2>学习步骤</h2>
<ol>
<li>先掌握 HTML 页面骨架</li>
<li>练习文本、链接和列表结构</li>
<li>开始写语义化页面布局</li>
<li>再进入表格和表单练习</li>
</ol>
</body>
</html>

16
01-html-structure/02-text-links-lists/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端新手资源页</title>
</head>
<body>
<!-- 任务：
1. 写一个主标题
2. 写一个介绍段落，包含 strong 和 em
3. 写一个推荐网站区域，包含 ul 和多个 a
4. 写一个学习步骤区域，包含 ol
-->
</body>
</html>

39
01-html-structure/03-semantic-layout/README.md Normal file
View File

@@ -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)

43
01-html-structure/03-semantic-layout/answer.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人博客首页</title>
</head>
<body>
<header>
<h1>小周的前端博客</h1>
<nav>
<a href="#home">首页</a>
<a href="#posts">文章</a>
<a href="#about">关于我</a>
</nav>
</header>
<main>
<section id="posts">
<h2>最新文章</h2>
<article>
<h3>HTML 结构入门</h3>
<p>这篇文章介绍如何用标题、段落和列表搭建页面基础结构。</p>
</article>
<article>
<h3>为什么要写语义化标签</h3>
<p>语义化标签让页面更清晰，也更方便后期维护。</p>
</article>
</section>
<aside id="about">
<h2>关于我</h2>
<p>我是一名正在学习前端的同学，目前专注于 HTML 和 CSS 基础。</p>
</aside>
</main>
<footer>
<p>2026 小周的前端博客</p>
</footer>
</body>
</html>

17
01-html-structure/03-semantic-layout/starter.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人博客首页</title>
</head>
<body>
<!-- 任务：
1. 写 header 和 nav
2. 写 main
3. 在 main 里写一个 section
4. section 里至少放 2 个 article
5. 写 aside 和 footer
-->
</body>
</html>

40
01-html-structure/04-tables-and-forms/README.md Normal file
View File

@@ -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)

59
01-html-structure/04-tables-and-forms/answer.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端训练营报名页</title>
</head>
<body>
<h1>前端训练营报名页</h1>
<h2>课程安排</h2>
<table>
<thead>
<tr>
<th>周次</th>
<th>主题</th>
<th>目标</th>
</tr>
</thead>
<tbody>
<tr>
<td>第 1 周</td>
<td>HTML 结构</td>
<td>掌握页面骨架与常用标签</td>
</tr>
<tr>
<td>第 2 周</td>
<td>CSS 布局</td>
<td>掌握盒模型和 Flex</td>
</tr>
<tr>
<td>第 3 周</td>
<td>JavaScript 基础</td>
<td>掌握变量、函数和对象</td>
</tr>
</tbody>
</table>
<h2>报名表单</h2>
<form>
<div>
<label for="name">姓名</label>
<input id="name" name="name" type="text" placeholder="请输入姓名" />
</div>
<div>
<label for="email">邮箱</label>
<input id="email" name="email" type="email" placeholder="请输入邮箱" />
</div>
<div>
<label for="goal">学习目标</label>
<textarea id="goal" name="goal" rows="4" cols="30" placeholder="写下你的学习目标"></textarea>
</div>
<button type="submit">提交报名</button>
</form>
</body>
</html>

15
01-html-structure/04-tables-and-forms/starter.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端训练营报名页</title>
</head>
<body>
<!-- 任务：
1. 写一个 table，包含 thead 和 tbody
2. 写一个 form
3. 在 form 里加入 label、input、textarea、button
-->
</body>
</html>

48
01-html-structure/05-final-project/README.md Normal file
View File

@@ -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)

106
01-html-structure/05-final-project/answer.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人前端学习主页</title>
</head>
<body>
<header>
<h1>小周的前端学习主页</h1>
<nav>
<a href="#intro">自我介绍</a>
<a href="#roadmap">学习路线</a>
<a href="#projects">练习项目</a>
<a href="#contact">联系我</a>
</nav>
</header>
<main>
<section id="intro">
<h2>自我介绍</h2>
<p>我正在系统学习前端开发，目前优先掌握 HTML 结构、CSS 布局和 JavaScript 基础。</p>
</section>
<section id="roadmap">
<h2>学习路线</h2>
<ul>
<li>HTML 结构</li>
<li>CSS 布局与视觉</li>
<li>JavaScript 语言本体</li>
<li>DOM 与事件</li>
</ul>
</section>
<section id="projects">
<h2>练习项目</h2>
<article>
<h3>项目一：博客首页结构</h3>
<p>重点练习 `header`、`nav`、`main`、`section` 和 `article` 的页面组织方式。</p>
</article>
<article>
<h3>项目二：训练营报名页</h3>
<p>重点练习表格和表单的结构化写法。</p>
</article>
</section>
<section>
<h2>学习进度</h2>
<table>
<thead>
<tr>
<th>模块</th>
<th>状态</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML 结构</td>
<td>学习中</td>
<td>正在练习语义化标签</td>
</tr>
<tr>
<td>CSS</td>
<td>未开始</td>
<td>等 HTML 熟练后进入</td>
</tr>
</tbody>
</table>
</section>
<aside>
<h2>当前提醒</h2>
<p>先把结构写对，再考虑样式。先会拆页面，再会写页面。</p>
</aside>
<section id="contact">
<h2>联系我</h2>
<form>
<div>
<label for="visitor-name">姓名</label>
<input id="visitor-name" name="visitorName" type="text" />
</div>
<div>
<label for="visitor-email">邮箱</label>
<input id="visitor-email" name="visitorEmail" type="email" />
</div>
<div>
<label for="message">留言</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>
</div>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer>
<p>2026 小周的前端学习主页</p>
</footer>
</body>
</html>

16
01-html-structure/05-final-project/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人前端学习主页</title>
</head>
<body>
<!-- 任务：
1. 写完整语义化页面结构
2. 至少写 3 个 section
3. 加入 article、aside、table、form
4. 不要急着写 CSS，先保证 HTML 结构正确
-->
</body>
</html>

28
01-html-structure/06-block-and-inline/README.md Normal file
View File

@@ -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)

25
01-html-structure/06-block-and-inline/answer.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>块级与行内元素</title>
</head>
<body>
<h1>块级与行内元素练习</h1>
<div>
<p>先保证 <strong>结构</strong> 正确，再考虑样式。</p>
</div>
<div>
<p>页面区域通常由 <span>块级元素</span> 负责搭建。</p>
</div>
<div>
<p>一句话中的局部强调，通常用 <strong>行内元素</strong> 处理。</p>
</div>
<p><a href="#">查看完整学习文档</a></p>
</body>
</html>

16
01-html-structure/06-block-and-inline/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>块级与行内元素</title>
</head>
<body>
<!-- 任务：
1. 写一个主标题
2. 写 3 个提示块
3. 每个提示块里用 span 或 strong 包住关键词
4. 再写一个链接，跳到学习文档
-->
</body>
</html>

29
01-html-structure/07-media-and-paths/README.md Normal file
View File

@@ -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)

18
01-html-structure/07-media-and-paths/answer.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片、视频与路径</title>
</head>
<body>
<h1>课程展示页</h1>
<img src="./images/html-cover.png" alt="HTML 结构课程封面" />
<p>这是一门面向初学者的 HTML 结构课程。</p>
<video src="./videos/html-intro.mp4" controls></video>
<p><a href="./docs/html-notes.pdf">下载讲义</a></p>
</body>
</html>

15
01-html-structure/07-media-and-paths/starter.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片、视频与路径</title>
</head>
<body>
<!-- 任务：
1. 写一个 img，并补上 alt
2. 写一个 video，并加上 controls
3. 写一个下载讲义的 a 标签
-->
</body>
</html>

28
01-html-structure/08-advanced-form-controls/README.md Normal file
View File

@@ -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)

62
01-html-structure/08-advanced-form-controls/answer.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>进阶表单控件</title>
</head>
<body>
<h1>学习偏好登记表</h1>
<form>
<div>
<label for="student-name">姓名</label>
<input id="student-name" name="studentName" type="text" />
</div>
<div>
<label for="track">学习方向</label>
<select id="track" name="track">
<option value="">请选择</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
</div>
<fieldset>
<legend>学习节奏</legend>
<label>
<input type="radio" name="pace" value="slow" />
慢节奏
</label>
<label>
<input type="radio" name="pace" value="normal" />
正常
</label>
<label>
<input type="radio" name="pace" value="fast" />
快节奏
</label>
</fieldset>
<fieldset>
<legend>感兴趣模块</legend>
<label>
<input type="checkbox" name="modules" value="layout" />
布局
</label>
<label>
<input type="checkbox" name="modules" value="animation" />
动画
</label>
<label>
<input type="checkbox" name="modules" value="project" />
项目实战
</label>
</fieldset>
<button type="submit">提交</button>
</form>
</body>
</html>

17
01-html-structure/08-advanced-form-controls/starter.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>进阶表单控件</title>
</head>
<body>
<!-- 任务：
1. 写一个 form
2. 加入 select 和 option
3. 加入 radio
4. 加入 checkbox
5. 每项都尽量配 label
-->
</body>
</html>

21
01-html-structure/09-nesting-review/README.md Normal file
View File

@@ -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)

26
01-html-structure/09-nesting-review/answer.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>嵌套纠错</title>
</head>
<body>
<h1>HTML 纠错练习</h1>
<p>下面这些结构已经修正完成。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<p><a href="#">这里改成更清晰的链接结构</a></p>
<form>
<label for="email">邮箱</label>
<input id="email" name="email" type="email" />
<button type="submit">提交</button>
</form>
</body>
</html>

28
01-html-structure/09-nesting-review/starter.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>嵌套纠错</title>
</head>
<body>
<h1>HTML 纠错练习</h1>
<p>下面这些结构有错误，请你自己修正。
<ul>
<li>列表项 1
<li>列表项 2</li>
</ul>
<a href="#">
<p>这里的嵌套写法是否合理？</p>
</a>
<form>
<label for="email">邮箱</label>
<input id="email" name="email">
<button>提交
</form>
</body>
</html>

190
01-html-structure/README.md Normal file
View File

@@ -0,0 +1,190 @@
# HTML Structure
这部分只解决一个问题：你能不能把页面内容写成清晰、正确、可维护的 HTML 结构。
## 学完后你应该掌握
- HTML 文档的基本骨架
- 标签的嵌套关系
- 常见文本标签的作用
- 块级元素和行内元素的区别
- 列表、链接、图片的结构写法
- 媒体标签的基础写法
- 表格和表单的基础结构
- 进阶表单控件的使用
- 语义化标签的使用场景
- 如何把一个页面先拆成结构，再开始写代码
## HTML 是什么
HTML 不是“样式语言”，也不是“交互语言”。
HTML 负责的是：
- 页面有什么内容
- 内容之间是什么关系
- 哪部分是标题，哪部分是正文，哪部分是导航，哪部分是表单
你可以把 HTML 理解成网页的骨架。
## 必须建立的 5 个核心意识
### 1. 页面是树状结构
一个页面不是一堆标签平铺，而是父子嵌套关系。
示例：
```html
<body>
<main>
<section>
<h1>标题</h1>
<p>正文</p>
</section>
</main>
</body>
```
这里的关系是：
- `body` 包含 `main`
- `main` 包含 `section`
- `section` 包含 `h1` 和 `p`
### 2. 先想结构，再写标签
写页面前先问自己：
- 这一块是不是标题区
- 这一块是不是导航区
- 这一块是不是主要内容
- 这一块是不是补充信息
- 这一块是不是页脚
### 3. 能用语义化标签时，别只会写 `div`
常见语义化标签：
- `header`
- `nav`
- `main`
- `section`
- `article`
- `aside`
- `footer`
### 4. 标签要和内容类型匹配
- 标题用 `h1` 到 `h6`
- 段落用 `p`
- 列表用 `ul` / `ol` / `li`
- 链接用 `a`
- 图片用 `img`
- 表单用 `form`
- 表格用 `table`
### 5. 结构正确比数量多更重要
不是标签越多越厉害，而是结构越合理越好。
## 高频标签速记
### 文本
- `h1` - `h6`：标题
- `p`：段落
- `strong`：强调
- `em`：语气强调
### 容器
- `div`：通用容器
- `span`：行内容器
- `section`：主题分区
- `article`：独立内容块
### 导航和布局
- `header`
- `nav`
- `main`
- `aside`
- `footer`
### 列表和媒体
- `ul`
- `ol`
- `li`
- `a`
- `img`
- `video`
### 表格和表单
- `table`
- `thead`
- `tbody`
- `tr`
- `th`
- `td`
- `form`
- `label`
- `input`
- `textarea`
- `button`
- `select`
- `option`
## 常用属性
- `id`：唯一标识
- `class`：分组标识
- `href`：链接地址
- `src`：资源地址
- `alt`：图片说明
- `name`：表单字段名
- `placeholder`：输入提示
- `type`：输入类型
## 学习顺序
1. 文档骨架
2. 文本结构
3. 链接、图片、列表
4. 语义化布局
5. 表格
6. 表单
7. 综合页面拆解
## 练习目录
- [01-document-skeleton/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/01-document-skeleton/README.md)
- [02-text-links-lists/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/02-text-links-lists/README.md)
- [03-semantic-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/03-semantic-layout/README.md)
- [04-tables-and-forms/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/04-tables-and-forms/README.md)
- [05-final-project/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/README.md)
- [06-block-and-inline/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/06-block-and-inline/README.md)
- [07-media-and-paths/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/07-media-and-paths/README.md)
- [08-advanced-form-controls/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/08-advanced-form-controls/README.md)
- [09-nesting-review/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/09-nesting-review/README.md)
## 过关标准
如果你能独立做到下面这些，就说明你已经真正入门：
- 不看答案写出完整 HTML 基本骨架
- 能把一段需求描述拆成标题区、内容区、列表区、表单区
- 能区分 `div`、`span`、`section`、`article`
- 能区分块级元素和行内元素
- 能独立写出列表、表格、表单的正确嵌套
- 能写出图片、视频、`select` 等常见结构
- 能写出一个结构清晰的单页介绍页面
## 学习建议
- 每个练习至少手写一遍，不要只看答案
- 写完后自己检查嵌套关系
- 不要急着加 CSS，先把结构写准
- 每次写页面都先画结构草图

32
02-css-layout/01-selectors-and-text/README.md Normal file
View File

@@ -0,0 +1,32 @@
# 练习 1：选择器与文本样式
## 目标
掌握最基础的 CSS 选择器和文字样式。
## 你要练什么
- 元素选择器
- 类选择器
- `color`
- `font-size`
- `font-weight`
- `line-height`
- `background-color`
## 任务
请把页面排成一个简洁的学习卡片，要求：
- 页面背景换成浅色
- 主标题颜色更明显
- 介绍段落提高可读性
- 给提示文字单独加一个背景色块
- 给列表中的重点项单独强调
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/answer.css)

37
02-css-layout/01-selectors-and-text/answer.css Normal file
View File

@@ -0,0 +1,37 @@
body {
margin: 0;
background-color: #f5f7fb;
color: #1f2937;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.card {
width: 720px;
margin: 48px auto;
padding: 24px;
background-color: #ffffff;
border: 1px solid #dbe3ee;
border-radius: 16px;
}
h1 {
color: #1d4ed8;
font-size: 32px;
}
.intro {
font-size: 16px;
line-height: 1.8;
}
.note {
background-color: #e0f2fe;
color: #0f172a;
padding: 12px;
border-radius: 10px;
}
.important {
color: #b45309;
font-weight: 700;
}

23
02-css-layout/01-selectors-and-text/answer.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器与文本样式</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<div class="card">
<h1>CSS 入门练习</h1>
<p class="intro">CSS 负责页面的视觉和布局。你现在要做的是把这段内容排得更清晰。</p>
<p class="note">练习重点：选择器、颜色、字号、行高。</p>
<h2>本次任务</h2>
<ul>
<li>调整页面背景</li>
<li class="important">强调主标题和重点项</li>
<li>让段落更容易阅读</li>
</ul>
</div>
</body>
</html>

17
02-css-layout/01-selectors-and-text/starter.css Normal file
View File

@@ -0,0 +1,17 @@
body {
}
.card {
}
h1 {
}
.intro {
}
.note {
}
.important {
}

23
02-css-layout/01-selectors-and-text/starter.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器与文本样式</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<div class="card">
<h1>CSS 入门练习</h1>
<p class="intro">CSS 负责页面的视觉和布局。你现在要做的是把这段内容排得更清晰。</p>
<p class="note">练习重点：选择器、颜色、字号、行高。</p>
<h2>本次任务</h2>
<ul>
<li>调整页面背景</li>
<li class="important">强调主标题和重点项</li>
<li>让段落更容易阅读</li>
</ul>
</div>
</body>
</html>

31
02-css-layout/02-box-model-card/README.md Normal file
View File

@@ -0,0 +1,31 @@
# 练习 2：盒模型卡片
## 目标
彻底理解 `margin`、`padding`、`border` 的区别。
## 你要练什么
- `width`
- `padding`
- `border`
- `margin`
- `border-radius`
- `box-shadow`
## 任务
请把一个课程卡片做出来，要求：
- 卡片和页面边缘有距离
- 卡片内部文字和边框有距离
- 卡片有边框和圆角
- 卡片有轻微阴影
- 按钮区域和正文之间有明显间隔
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/02-box-model-card/answer.css)

37
02-css-layout/02-box-model-card/answer.css Normal file
View File

@@ -0,0 +1,37 @@
body {
margin: 0;
background: #eef2ff;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.course-card {
width: 360px;
margin: 56px auto;
padding: 28px;
border: 1px solid #c7d2fe;
border-radius: 20px;
background: #ffffff;
box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
}
.tag {
display: inline-block;
margin: 0;
padding: 6px 12px;
border-radius: 999px;
background: #dbeafe;
color: #1d4ed8;
}
.actions {
margin-top: 24px;
}
a {
display: inline-block;
padding: 10px 18px;
border-radius: 10px;
background: #1d4ed8;
color: #ffffff;
text-decoration: none;
}

20
02-css-layout/02-box-model-card/answer.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盒模型卡片</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<article class="course-card">
<p class="tag">HTML 基础</p>
<h1>前端入门训练营</h1>
<p>从 HTML 结构开始，逐步学习 CSS 布局和 JavaScript 基础。</p>
<div class="actions">
<a href="#">立即报名</a>
</div>
</article>
</body>
</html>

14
02-css-layout/02-box-model-card/starter.css Normal file
View File

@@ -0,0 +1,14 @@
body {
}
.course-card {
}
.tag {
}
.actions {
}
a {
}

20
02-css-layout/02-box-model-card/starter.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盒模型卡片</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<article class="course-card">
<p class="tag">HTML 基础</p>
<h1>前端入门训练营</h1>
<p>从 HTML 结构开始，逐步学习 CSS 布局和 JavaScript 基础。</p>
<div class="actions">
<a href="#">立即报名</a>
</div>
</article>
</body>
</html>

30
02-css-layout/03-flex-layout/README.md Normal file
View File

@@ -0,0 +1,30 @@
# 练习 3：Flex 布局
## 目标
学会用 Flex 做横向排列、间距和居中。
## 你要练什么
- `display: flex`
- `justify-content`
- `align-items`
- `gap`
- `flex: 1`
## 任务
请完成一个三列学习面板，要求：
- 3 个卡片横向排列
- 卡片之间有统一间距
- 每个卡片宽度尽量均分
- 标题和按钮排版清晰
- 整个区域居中显示
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/03-flex-layout/answer.css)

31
02-css-layout/03-flex-layout/answer.css Normal file
View File

@@ -0,0 +1,31 @@
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f8fafc;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.panel {
width: min(1100px, calc(100% - 48px));
display: flex;
gap: 20px;
}
.item {
flex: 1;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #e2e8f0;
}
a {
display: inline-block;
margin-top: 16px;
color: #0f766e;
text-decoration: none;
font-weight: 700;
}

30
02-css-layout/03-flex-layout/answer.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex 布局</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<section class="panel">
<article class="item">
<h2>HTML</h2>
<p>学习页面结构和标签。</p>
<a href="#">开始</a>
</article>
<article class="item">
<h2>CSS</h2>
<p>学习布局、样式和视觉表现。</p>
<a href="#">开始</a>
</article>
<article class="item">
<h2>JavaScript</h2>
<p>学习交互、逻辑和数据处理。</p>
<a href="#">开始</a>
</article>
</section>
</body>
</html>

11
02-css-layout/03-flex-layout/starter.css Normal file
View File

@@ -0,0 +1,11 @@
body {
}
.panel {
}
.item {
}
a {
}

30
02-css-layout/03-flex-layout/starter.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex 布局</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<section class="panel">
<article class="item">
<h2>HTML</h2>
<p>学习页面结构和标签。</p>
<a href="#">开始</a>
</article>
<article class="item">
<h2>CSS</h2>
<p>学习布局、样式和视觉表现。</p>
<a href="#">开始</a>
</article>
<article class="item">
<h2>JavaScript</h2>
<p>学习交互、逻辑和数据处理。</p>
<a href="#">开始</a>
</article>
</section>
</body>
</html>

29
02-css-layout/04-position-badge/README.md Normal file
View File

@@ -0,0 +1,29 @@
# 练习 4：定位与徽标
## 目标
理解 `position: relative` 和 `position: absolute` 的配合。
## 你要练什么
- `position: relative`
- `position: absolute`
- `top`
- `right`
- `z-index`
## 任务
请完成一个课程推荐卡片，要求：
- 卡片右上角有一个“热门”徽标
- 徽标固定贴在卡片角上
- 卡片主体仍保持正常排版
- 按钮和标题之间留出合理距离
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/04-position-badge/answer.css)

38
02-css-layout/04-position-badge/answer.css Normal file
View File

@@ -0,0 +1,38 @@
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #fff7ed;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.card {
position: relative;
width: 360px;
padding: 32px 24px 24px;
border-radius: 20px;
background: #ffffff;
border: 1px solid #fed7aa;
box-shadow: 0 18px 40px rgba(234, 88, 12, 0.12);
}
.badge {
position: absolute;
top: -10px;
right: 18px;
z-index: 1;
padding: 6px 12px;
border-radius: 999px;
background: #ea580c;
color: #ffffff;
font-size: 14px;
}
a {
display: inline-block;
margin-top: 18px;
color: #9a3412;
text-decoration: none;
font-weight: 700;
}

17
02-css-layout/04-position-badge/answer.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位与徽标</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<article class="card">
<span class="badge">热门</span>
<h1>CSS 布局专项课</h1>
<p>重点掌握盒模型、Flex、定位和常见页面排版方式。</p>
<a href="#">查看详情</a>
</article>
</body>
</html>

11
02-css-layout/04-position-badge/starter.css Normal file
View File

@@ -0,0 +1,11 @@
body {
}
.card {
}
.badge {
}
a {
}

17
02-css-layout/04-position-badge/starter.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位与徽标</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<article class="card">
<span class="badge">热门</span>
<h1>CSS 布局专项课</h1>
<p>重点掌握盒模型、Flex、定位和常见页面排版方式。</p>
<a href="#">查看详情</a>
</article>
</body>
</html>

33
02-css-layout/05-final-page/README.md Normal file
View File

@@ -0,0 +1,33 @@
# 练习 5：综合页面
## 目标
把前面的 CSS 知识拼起来，做一个完整页面。
## 项目名称
前端学习路线页
## 任务
请基于给定 HTML，把页面排成一个完整的学习介绍页，要求：
- 页面有明显的内容容器
- 页头、主视觉、课程卡片、进度表单区分明显
- 使用 Flex 做卡片区布局
- 使用颜色、留白、边框和圆角提升可读性
- 不要为了排版去破坏 HTML 结构
## 建议顺序
1. 先给 `body` 和主容器设置基础样式
2. 再写 `header`、`hero`
3. 再写课程卡片布局
4. 最后写表单和按钮
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.css)

113
02-css-layout/05-final-page/answer.css Normal file
View File

@@ -0,0 +1,113 @@
body {
margin: 0;
background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
color: #0f172a;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.page {
width: min(1100px, calc(100% - 40px));
margin: 32px auto 48px;
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid #dbeafe;
}
.nav {
display: flex;
gap: 18px;
}
.nav a {
color: #1d4ed8;
text-decoration: none;
font-weight: 600;
}
.hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-top: 24px;
padding: 32px 28px;
border-radius: 24px;
background: #1d4ed8;
color: #ffffff;
}
.eyebrow {
margin: 0 0 8px;
color: #bfdbfe;
}
.hero h2 {
margin: 0 0 12px;
font-size: 36px;
}
.hero-link {
display: inline-block;
padding: 12px 18px;
border-radius: 12px;
background: #ffffff;
color: #1d4ed8;
text-decoration: none;
font-weight: 700;
white-space: nowrap;
}
.tracks {
display: flex;
gap: 18px;
margin-top: 24px;
}
.track-card {
flex: 1;
padding: 22px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #dbe4f0;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}
.contact {
margin-top: 24px;
padding: 24px;
border-radius: 20px;
background: #ffffff;
border: 1px solid #dbe4f0;
}
.form {
display: flex;
flex-direction: column;
gap: 12px;
}
input,
textarea {
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 12px;
font: inherit;
}
button {
width: 140px;
padding: 12px 16px;
border: 0;
border-radius: 12px;
background: #0f766e;
color: #ffffff;
font: inherit;
font-weight: 700;
}

60
02-css-layout/05-final-page/answer.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端学习路线页</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<div class="page">
<header class="site-header">
<h1>前端学习路线</h1>
<nav class="nav">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
</nav>
</header>
<main>
<section class="hero">
<div>
<p class="eyebrow">第 2 阶段</p>
<h2>CSS 布局与视觉</h2>
<p>目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
</div>
<a class="hero-link" href="#tracks">开始练习</a>
</section>
<section class="tracks" id="tracks">
<article class="track-card" id="html">
<h3>盒模型</h3>
<p>理解 margin、padding、border 的区别。</p>
</article>
<article class="track-card" id="css">
<h3>Flex</h3>
<p>学会横向排列、间距和居中。</p>
</article>
<article class="track-card" id="js">
<h3>定位</h3>
<p>掌握相对定位和绝对定位的配合。</p>
</article>
</section>
<section class="contact">
<h3>练习登记</h3>
<form class="form">
<label for="name">姓名</label>
<input id="name" type="text" />
<label for="goal">今日目标</label>
<textarea id="goal" rows="4"></textarea>
<button type="submit">提交</button>
</form>
</section>
</main>
</div>
</body>
</html>

34
02-css-layout/05-final-page/starter.css Normal file
View File

@@ -0,0 +1,34 @@
body {
}
.page {
}
.site-header {
}
.nav {
}
.hero {
}
.hero-link {
}
.tracks {
}
.track-card {
}
.contact {
}
.form {
}
input,
textarea,
button {
}

60
02-css-layout/05-final-page/starter.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端学习路线页</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<div class="page">
<header class="site-header">
<h1>前端学习路线</h1>
<nav class="nav">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
</nav>
</header>
<main>
<section class="hero">
<div>
<p class="eyebrow">第 2 阶段</p>
<h2>CSS 布局与视觉</h2>
<p>目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
</div>
<a class="hero-link" href="#tracks">开始练习</a>
</section>
<section class="tracks" id="tracks">
<article class="track-card" id="html">
<h3>盒模型</h3>
<p>理解 margin、padding、border 的区别。</p>
</article>
<article class="track-card" id="css">
<h3>Flex</h3>
<p>学会横向排列、间距和居中。</p>
</article>
<article class="track-card" id="js">
<h3>定位</h3>
<p>掌握相对定位和绝对定位的配合。</p>
</article>
</section>
<section class="contact">
<h3>练习登记</h3>
<form class="form">
<label for="name">姓名</label>
<input id="name" type="text" />
<label for="goal">今日目标</label>
<textarea id="goal" rows="4"></textarea>
<button type="submit">提交</button>
</form>
</section>
</main>
</div>
</body>
</html>

12
02-css-layout/06-display-and-flow/README.md Normal file
View File

@@ -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)

29
02-css-layout/06-display-and-flow/answer.css Normal file
View File

@@ -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;
}

19
02-css-layout/06-display-and-flow/answer.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display 与文档流</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<section class="wrap">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag hide-me">JavaScript</span>
<div class="box">这是块级盒子 A</div>
<div class="box">这是块级盒子 B</div>
</section>
</body>
</html>

14
02-css-layout/06-display-and-flow/starter.css Normal file
View File

@@ -0,0 +1,14 @@
body {
}
.wrap {
}
.tag {
}
.hide-me {
}
.box {
}

19
02-css-layout/06-display-and-flow/starter.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display 与文档流</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<section class="wrap">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag hide-me">JavaScript</span>
<div class="box">这是块级盒子 A</div>
<div class="box">这是块级盒子 B</div>
</section>
</body>
</html>

12
02-css-layout/07-selectors-and-pseudo-classes/README.md Normal file
View File

@@ -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)

23
02-css-layout/07-selectors-and-pseudo-classes/answer.css Normal file
View File

@@ -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;
}

25
02-css-layout/07-selectors-and-pseudo-classes/answer.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组合选择器与伪类</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<nav class="menu">
<a href="#">首页</a>
<a href="#">课程</a>
<a href="#">练习</a>
</nav>
<section class="list">
<p>学习建议</p>
<ul>
<li>先学结构</li>
<li>再学布局</li>
<li>最后学交互</li>
</ul>
</section>
</body>
</html>

11
02-css-layout/07-selectors-and-pseudo-classes/starter.css Normal file
View File

@@ -0,0 +1,11 @@
.menu a {
}
.menu > a {
}
.menu a:hover {
}
.list li:first-child {
}

25
02-css-layout/07-selectors-and-pseudo-classes/starter.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组合选择器与伪类</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<nav class="menu">
<a href="#">首页</a>
<a href="#">课程</a>
<a href="#">练习</a>
</nav>
<section class="list">
<p>学习建议</p>
<ul>
<li>先学结构</li>
<li>再学布局</li>
<li>最后学交互</li>
</ul>
</section>
</body>
</html>

12
02-css-layout/08-overflow-and-sizing/README.md Normal file
View File

@@ -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)

17
02-css-layout/08-overflow-and-sizing/answer.css Normal file
View File

@@ -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;
}

18
02-css-layout/08-overflow-and-sizing/answer.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overflow 与尺寸</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<div class="panel">
<h1>学习记录</h1>
<p>
今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习
CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。
</p>
</div>
</body>
</html>

5
02-css-layout/08-overflow-and-sizing/starter.css Normal file
View File

@@ -0,0 +1,5 @@
body {
}
.panel {
}

18
02-css-layout/08-overflow-and-sizing/starter.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overflow 与尺寸</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<div class="panel">
<h1>学习记录</h1>
<p>
今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习
CSS。今天继续练习 CSS。今天继续练习 CSS。今天继续练习 CSS。
</p>
</div>
</body>
</html>

12
02-css-layout/09-grid-layout/README.md Normal file
View File

@@ -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)

24
02-css-layout/09-grid-layout/answer.css Normal file
View File

@@ -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;
}

17
02-css-layout/09-grid-layout/answer.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid 布局</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<section class="grid">
<div class="cell">HTML</div>
<div class="cell">CSS</div>
<div class="cell">JavaScript</div>
<div class="cell">TypeScript</div>
</section>
</body>
</html>

8
02-css-layout/09-grid-layout/starter.css Normal file
View File

@@ -0,0 +1,8 @@
body {
}
.grid {
}
.cell {
}

17
02-css-layout/09-grid-layout/starter.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid 布局</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<section class="grid">
<div class="cell">HTML</div>
<div class="cell">CSS</div>
<div class="cell">JavaScript</div>
<div class="cell">TypeScript</div>
</section>
</body>
</html>

12
02-css-layout/10-fixed-and-sticky/README.md Normal file
View File

@@ -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)

35
02-css-layout/10-fixed-and-sticky/answer.css Normal file
View File

@@ -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;
}

28
02-css-layout/10-fixed-and-sticky/answer.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fixed 与 Sticky</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<a class="help" href="#">帮助</a>
<section class="page">
<header class="topbar">学习导航</header>
<div class="content">
<p>向下滚动时观察导航位置。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
</div>
</section>
</body>
</html>

14
02-css-layout/10-fixed-and-sticky/starter.css Normal file
View File

@@ -0,0 +1,14 @@
body {
}
.help {
}
.page {
}
.topbar {
}
.content {
}

28
02-css-layout/10-fixed-and-sticky/starter.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fixed 与 Sticky</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<a class="help" href="#">帮助</a>
<section class="page">
<header class="topbar">学习导航</header>
<div class="content">
<p>向下滚动时观察导航位置。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
<p>这里放一些占位内容。</p>
</div>
</section>
</body>
</html>

12
02-css-layout/11-centering-lab/README.md Normal file
View File

@@ -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)

20
02-css-layout/11-centering-lab/answer.css Normal file
View File

@@ -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);
}

14
02-css-layout/11-centering-lab/answer.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>居中专题</title>
<link rel="stylesheet" href="./answer.css" />
</head>
<body>
<div class="stage">
<div class="box">把我放到中间</div>
</div>
</body>
</html>

8
02-css-layout/11-centering-lab/starter.css Normal file
View File

@@ -0,0 +1,8 @@
body {
}
.stage {
}
.box {
}

14
02-css-layout/11-centering-lab/starter.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>居中专题</title>
<link rel="stylesheet" href="./starter.css" />
</head>
<body>
<div class="stage">
<div class="box">把我放到中间</div>
</div>
</body>
</html>

166
02-css-layout/README.md Normal file
View File

@@ -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` 的常见场景
- 能把一个简单页面排成可读的布局
## 学习建议
- 每次先观察页面分区，再决定写哪些类名
- 少堆无意义类名，类名尽量体现用途
- 先写大布局，再修文字、颜色、边框
- 写完后删掉无效样式，保持规则干净

39
README.md Normal file
View File

@@ -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` 等目录。