feat: Add CSS layout exercises and corresponding HTML files

- Created multiple exercises under the CSS layout section, including: - Final page layout with CSS styles and HTML structure. - Display and flow concepts with examples of block, inline, and none display types. - Selectors and pseudo-classes with practical examples. - Overflow and sizing handling in CSS. - Grid layout basics for two-dimensional layouts. - Fixed and sticky positioning examples. - Centering techniques for common layout scenarios. - Added README files for each exercise to outline objectives and file structures. - Updated main README to include new sections and usage instructions.
2026-03-09 14:16:22 +08:00
commit 4495ae0e28
85 changed files with 2566 additions and 0 deletions
--- a/02-css-layout/01-selectors-and-text/README.md
+++ b/02-css-layout/01-selectors-and-text/README.md
@@ -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)
--- a/02-css-layout/01-selectors-and-text/answer.css
+++ b/02-css-layout/01-selectors-and-text/answer.css
@@ -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;
+}
--- a/02-css-layout/01-selectors-and-text/answer.html
+++ b/02-css-layout/01-selectors-and-text/answer.html
@@ -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>
--- a/02-css-layout/01-selectors-and-text/starter.css
+++ b/02-css-layout/01-selectors-and-text/starter.css
@@ -0,0 +1,17 @@
+body {
+}
+
+.card {
+}
+
+h1 {
+}
+
+.intro {
+}
+
+.note {
+}
+
+.important {
+}
--- a/02-css-layout/01-selectors-and-text/starter.html
+++ b/02-css-layout/01-selectors-and-text/starter.html
@@ -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>
--- a/02-css-layout/02-box-model-card/README.md
+++ b/02-css-layout/02-box-model-card/README.md
@@ -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)
--- a/02-css-layout/02-box-model-card/answer.css
+++ b/02-css-layout/02-box-model-card/answer.css
@@ -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;
+}
--- a/02-css-layout/02-box-model-card/answer.html
+++ b/02-css-layout/02-box-model-card/answer.html
@@ -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>
--- a/02-css-layout/02-box-model-card/starter.css
+++ b/02-css-layout/02-box-model-card/starter.css
@@ -0,0 +1,14 @@
+body {
+}
+
+.course-card {
+}
+
+.tag {
+}
+
+.actions {
+}
+
+a {
+}
--- a/02-css-layout/02-box-model-card/starter.html
+++ b/02-css-layout/02-box-model-card/starter.html
@@ -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>
--- a/02-css-layout/03-flex-layout/README.md
+++ b/02-css-layout/03-flex-layout/README.md
@@ -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)
--- a/02-css-layout/03-flex-layout/answer.css
+++ b/02-css-layout/03-flex-layout/answer.css
@@ -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;
+}
--- a/02-css-layout/03-flex-layout/answer.html
+++ b/02-css-layout/03-flex-layout/answer.html
@@ -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>
--- a/02-css-layout/03-flex-layout/starter.css
+++ b/02-css-layout/03-flex-layout/starter.css
@@ -0,0 +1,11 @@
+body {
+}
+
+.panel {
+}
+
+.item {
+}
+
+a {
+}
--- a/02-css-layout/03-flex-layout/starter.html
+++ b/02-css-layout/03-flex-layout/starter.html
@@ -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>
--- a/02-css-layout/04-position-badge/README.md
+++ b/02-css-layout/04-position-badge/README.md
@@ -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)
--- a/02-css-layout/04-position-badge/answer.css
+++ b/02-css-layout/04-position-badge/answer.css
@@ -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;
+}
--- a/02-css-layout/04-position-badge/answer.html
+++ b/02-css-layout/04-position-badge/answer.html
@@ -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>
--- a/02-css-layout/04-position-badge/starter.css
+++ b/02-css-layout/04-position-badge/starter.css
@@ -0,0 +1,11 @@
+body {
+}
+
+.card {
+}
+
+.badge {
+}
+
+a {
+}
--- a/02-css-layout/04-position-badge/starter.html
+++ b/02-css-layout/04-position-badge/starter.html
@@ -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>
--- a/02-css-layout/05-final-page/README.md
+++ b/02-css-layout/05-final-page/README.md
@@ -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)
--- a/02-css-layout/05-final-page/answer.css
+++ b/02-css-layout/05-final-page/answer.css
@@ -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;
+}
--- a/02-css-layout/05-final-page/answer.html
+++ b/02-css-layout/05-final-page/answer.html
@@ -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>
--- a/02-css-layout/05-final-page/starter.css
+++ 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 {
+}
--- a/02-css-layout/05-final-page/starter.html
+++ b/02-css-layout/05-final-page/starter.html
@@ -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>
--- a/02-css-layout/06-display-and-flow/README.md
+++ 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)
--- a/02-css-layout/06-display-and-flow/answer.css
+++ 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;
+}
--- a/02-css-layout/06-display-and-flow/answer.html
+++ b/02-css-layout/06-display-and-flow/answer.html
@@ -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>
--- a/02-css-layout/06-display-and-flow/starter.css
+++ b/02-css-layout/06-display-and-flow/starter.css
@@ -0,0 +1,14 @@
+body {
+}
+
+.wrap {
+}
+
+.tag {
+}
+
+.hide-me {
+}
+
+.box {
+}
--- a/02-css-layout/06-display-and-flow/starter.html
+++ b/02-css-layout/06-display-and-flow/starter.html
@@ -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>
--- a/02-css-layout/07-selectors-and-pseudo-classes/README.md
+++ 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)
--- a/02-css-layout/07-selectors-and-pseudo-classes/answer.css
+++ 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;
+}
--- a/02-css-layout/07-selectors-and-pseudo-classes/answer.html
+++ b/02-css-layout/07-selectors-and-pseudo-classes/answer.html
@@ -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>
--- a/02-css-layout/07-selectors-and-pseudo-classes/starter.css
+++ 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 {
+}
--- a/02-css-layout/07-selectors-and-pseudo-classes/starter.html
+++ b/02-css-layout/07-selectors-and-pseudo-classes/starter.html
@@ -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>
--- a/02-css-layout/08-overflow-and-sizing/README.md
+++ 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)
--- a/02-css-layout/08-overflow-and-sizing/answer.css
+++ 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;
+}
--- a/02-css-layout/08-overflow-and-sizing/answer.html
+++ b/02-css-layout/08-overflow-and-sizing/answer.html
@@ -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>
--- a/02-css-layout/08-overflow-and-sizing/starter.css
+++ b/02-css-layout/08-overflow-and-sizing/starter.css
@@ -0,0 +1,5 @@
+body {
+}
+
+.panel {
+}
--- a/02-css-layout/08-overflow-and-sizing/starter.html
+++ b/02-css-layout/08-overflow-and-sizing/starter.html
@@ -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>
--- a/02-css-layout/09-grid-layout/README.md
+++ 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)
--- a/02-css-layout/09-grid-layout/answer.css
+++ 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;
+}
--- a/02-css-layout/09-grid-layout/answer.html
+++ b/02-css-layout/09-grid-layout/answer.html
@@ -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>
--- a/02-css-layout/09-grid-layout/starter.css
+++ b/02-css-layout/09-grid-layout/starter.css
@@ -0,0 +1,8 @@
+body {
+}
+
+.grid {
+}
+
+.cell {
+}
--- a/02-css-layout/09-grid-layout/starter.html
+++ b/02-css-layout/09-grid-layout/starter.html
@@ -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>
--- a/02-css-layout/10-fixed-and-sticky/README.md
+++ 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)
--- a/02-css-layout/10-fixed-and-sticky/answer.css
+++ 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;
+}
--- a/02-css-layout/10-fixed-and-sticky/answer.html
+++ b/02-css-layout/10-fixed-and-sticky/answer.html
@@ -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>
--- a/02-css-layout/10-fixed-and-sticky/starter.css
+++ b/02-css-layout/10-fixed-and-sticky/starter.css
@@ -0,0 +1,14 @@
+body {
+}
+
+.help {
+}
+
+.page {
+}
+
+.topbar {
+}
+
+.content {
+}
--- a/02-css-layout/10-fixed-and-sticky/starter.html
+++ b/02-css-layout/10-fixed-and-sticky/starter.html
@@ -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>
--- a/02-css-layout/11-centering-lab/README.md
+++ 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)
--- a/02-css-layout/11-centering-lab/answer.css
+++ 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);
+}
--- a/02-css-layout/11-centering-lab/answer.html
+++ b/02-css-layout/11-centering-lab/answer.html
@@ -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>
--- a/02-css-layout/11-centering-lab/starter.css
+++ b/02-css-layout/11-centering-lab/starter.css
@@ -0,0 +1,8 @@
+body {
+}
+
+.stage {
+}
+
+.box {
+}
--- a/02-css-layout/11-centering-lab/starter.html
+++ b/02-css-layout/11-centering-lab/starter.html
@@ -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>
--- a/02-css-layout/README.md
+++ 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` 的常见场景
+- 能把一个简单页面排成可读的布局
+
+## 学习建议
+
+- 每次先观察页面分区，再决定写哪些类名
+- 少堆无意义类名，类名尽量体现用途
+- 先写大布局，再修文字、颜色、边框
+- 写完后删掉无效样式，保持规则干净