update

2025-03-17 12:59:08 +08:00
parent 5f8c96c1da
commit e10bc77978
6 changed files with 134 additions and 92 deletions
--- a/public/tutorial/2/README.md
+++ b/public/tutorial/2/README.md
@@ -1,4 +1,4 @@
-# 盒模型（1）
+# 盒模型（1）DIV+CSS

 > [!NOTE]
 > 这是测试的版本
@@ -15,11 +15,13 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块

 ```html
 <div>
-    <div>Web前端开发工程师</div>
-    <div>岗位要求</div>
-    <div>1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
-    <div>2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
-    <div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
+  <div>Web前端开发工程师</div>
+  <div>岗位要求</div>
+  <div>1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
+  <div>
+    2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
+  </div>
+  <div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；</div>
 </div>
 ```

@@ -31,11 +33,15 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块

 ```html
 <div class="main">
-    <div class="title">Web前端开发工程师</div>
-    <div class="subtitle">岗位要求</div>
-    <div class="item">1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
-    <div class="item">2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
-    <div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
+  <div class="title">Web前端开发工程师</div>
+  <div class="subtitle">岗位要求</div>
+  <div class="item">
+    1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；
+  </div>
+  <div class="item">
+    2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
+  </div>
+  <div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；</div>
 </div>
 ```

@@ -45,21 +51,21 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块

 ```css
 .title {
-    font-size: 32px;
-    font-weight: bold; /* 字体加粗 */
-    line-height: 64px;
-    color: #000099;
+  font-size: 32px;
+  font-weight: bold; /* 字体加粗 */
+  line-height: 64px;
+  color: #000099;
 }

 .subtitle {
-    font-size: 24px;
-    line-height: 48px;
+  font-size: 24px;
+  line-height: 48px;
 }

 .item {
-    font-size: 20px;
-    text-indent: 2em;
-    line-height: 40px;
+  font-size: 20px;
+  text-indent: 2em;
+  line-height: 40px;
 }
 ```

@@ -67,11 +73,15 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
 > 注意 class 类名要有意义，不要随便起名，不然数量多了之后容易混淆

 ## 任务
+
 ### HTML
+
 上网搜索 🔍 或询问 AI 🤖，找到【初级网络工程师】的岗位要求，通过 Div 嵌套，写上合适的 class 类名，完成 HTML 内容的排版。

 ### CSS
+
 自由调整合适的字体大小、行间距、字体颜色、字重、缩进等样式，美化排版内容。

 ### 例子
+
 [初级网络工程师岗位要求](/tutorial/2/demo.html)
--- a/public/tutorial/3/README.md
+++ b/public/tutorial/3/README.md
@@ -1,4 +1,4 @@
-# 盒模型（2）
+# 盒模型（2）margin+padding+border

 > [!NOTE]
 > 以下是 AI 生成的，不代表 xuyue 的观点
@@ -7,12 +7,12 @@

 在 HTML 和 CSS 中，每个元素都可以看作是一个矩形的盒子。这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是掌握网页布局的关键。

-
 ![box](/tutorial/3/box.svg)

 ## 2. 盒模型的组成部分

 ### 2.1 内容（Content）
+
 内容区域是盒子的核心部分，显示元素的实际内容，如文本、图片等。内容的大小可以通过 `width` 和 `height` 属性来设置。

 ```html
@@ -21,22 +21,23 @@

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;
 }
 ```

 ### 2.2 内边距（Padding）
+
 内边距是内容区域与边框之间的空间。它可以通过 `padding` 属性来设置。内边距会增加元素的总宽度和高度。

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;

-    padding: 10px; /* 上下左右的内边距都为10px */
+  padding: 10px; /* 上下左右的内边距都为10px */
 }
 ```

@@ -44,27 +45,28 @@ div {

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;

-    padding-top: 10px;
-    padding-right: 15px;
-    padding-bottom: 20px;
-    padding-left: 25px;
+  padding-top: 10px;
+  padding-right: 15px;
+  padding-bottom: 20px;
+  padding-left: 25px;
 }
 ```

 ### 2.3 边框（Border）
+
 边框是围绕内容和内边距的线条。你可以通过 `border` 属性来设置边框的宽度、样式和颜色。

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;

-    border: 2px solid black; /* 2px宽的黑色实线边框 */
+  border: 2px solid black; /* 2px宽的黑色实线边框 */
 }
 ```

@@ -72,26 +74,27 @@ div {

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;

-    border-width: 2px;
-    border-style: solid;
-    border-color: black;
+  border-width: 2px;
+  border-style: solid;
+  border-color: black;
 }
 ```

 ### 2.4 外边距（Margin）
+
 外边距是元素与其他元素之间的空间。它可以通过 `margin` 属性来设置。外边距不会影响元素的总宽度和高度，但会影响元素在页面中的位置。

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;

-    margin: 10px; /* 上下左右的外边距都为10px */
+  margin: 10px; /* 上下左右的外边距都为10px */
 }
 ```

@@ -99,14 +102,14 @@ div {

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;

-    margin-top: 10px;
-    margin-right: 15px;
-    margin-bottom: 20px;
-    margin-left: 25px;
+  margin-top: 10px;
+  margin-right: 15px;
+  margin-bottom: 20px;
+  margin-left: 25px;
 }
 ```

@@ -121,12 +124,12 @@ div {

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
-    padding: 10px;
-    border: 2px solid black;
-    margin: 20px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;
+  padding: 10px;
+  border: 2px solid black;
+  margin: 20px;
 }
 ```

@@ -139,14 +142,14 @@ div {

 ```css
 div {
-    background-color: lightblue;
-    width: 200px;
-    height: 100px;
+  background-color: lightblue;
+  width: 200px;
+  height: 100px;

-    box-sizing: border-box;
-    padding: 10px;
-    border: 2px solid black;
-    margin: 20px;
+  box-sizing: border-box;
+  padding: 10px;
+  border: 2px solid black;
+  margin: 20px;
 }
 ```

@@ -170,10 +173,12 @@ div {
 ### 任务要求

 #### 1. 基础盒子
+
 - 创建 6 个 `div` 元素，每个元素的 `width` 和 `height` 都为 `100px`。
 - 每个盒子的背景色可以不同，方便区分。

 #### 2. 使用 `padding`、`margin` 和 `border`
+
 - 每个盒子必须设置 `padding`、`margin` 和 `border`，且值不能为 `0`。
 - 通过调整这三个属性，让盒子按照以下规则排列：
  - 盒子之间不能有重叠。
@@ -182,59 +187,65 @@ div {
  - 边框必须清晰可见，且每个盒子的边框颜色可以不同。

 #### 3. 排列规则
+
 - 将 6 个盒子排列成一个 **2x3 的网格**。
 - 网格的行间距和列间距必须完全由 `margin` 控制。
 - 每个盒子的 `padding` 和 `border` 必须清晰可见。

 ### 4. 最终效果
+
 - 页面中应该有一个清晰的 2x3 网格，每个盒子之间有均匀的间距。
 - 每个盒子的内容区域、内边距和边框都应该清晰可见。

 ## 初始代码
+
 ```html
 <div class="container">
-    <div class="box">1</div>
-    <div class="box">2</div>
-    <div class="box">3</div>
-    <div class="box">4</div>
-    <div class="box">5</div>
-    <div class="box">6</div>
+  <div class="box">1</div>
+  <div class="box">2</div>
+  <div class="box">3</div>
+  <div class="box">4</div>
+  <div class="box">5</div>
+  <div class="box">6</div>
 </div>
 ```

 ```css
 /* 容器样式 */
 .container {
-    display: flex;
-    flex-wrap: wrap;
-    width: 400px; /* 容器宽度 */
-    margin: 0 auto; /* 居中 */
+  display: flex;
+  flex-wrap: wrap;
+  width: 400px; /* 容器宽度 */
+  margin: 0 auto; /* 居中 */
 }

 /* 基础盒子样式 */
 .box {
-    width: 100px;
-    height: 100px;
-    background-color: lightblue;
-    padding: 10px; /* 内边距 */
-    border: 5px solid black; /* 边框 */
-    margin: 15px; /* 外边距 */
-    text-align: center;
-    line-height: 100px; /* 文字垂直居中 */
+  width: 100px;
+  height: 100px;
+  background-color: lightblue;
+  padding: 10px; /* 内边距 */
+  border: 5px solid black; /* 边框 */
+  margin: 15px; /* 外边距 */
+  text-align: center;
+  line-height: 100px; /* 文字垂直居中 */
 }
 ```

 ### 任务提示

 1. **`padding`**
+
   - 控制内容与边框之间的距离。
   - 尝试为不同的盒子设置不同的 `padding` 值，观察内容区域的变化。

 2. **`border`**
+
   - 控制边框的宽度、样式和颜色。
   - 尝试为不同的盒子设置不同的边框样式（如 `dashed`、`dotted`）。

 3. **`margin`**
+
   - 控制盒子之间的间距。
   - 尝试为不同的盒子设置不同的 `margin` 值，观察盒子之间的间距变化。

@@ -245,13 +256,14 @@ div {
 ### 任务扩展（可选）

 1. **动态效果**
+
   - 使用 `:hover` 伪类，当鼠标悬停在盒子上时，改变盒子的 `padding`、`margin` 或 `border`。
   - 例如：
     ```css
     .box:hover {
-         padding: 20px;
-         margin: 10px;
-         border: 10px solid red;
+       padding: 20px;
+       margin: 10px;
+       border: 10px solid red;
     }
     ```

--- a/public/tutorial/4/README.md
+++ b/public/tutorial/4/README.md
@@ -0,0 +1,19 @@
+## 盒模型（3）使用浏览器开发者工具调试HTML和CSS
+
+打开[测试网页](https://web.xuyue.cc/tutorial/2/demo.html)，点击 F12 或者 ctrl+shift+c 打开浏览器开发者工具，在这里可以看到前端的所有代码（HTML+CSS+JS）
+
+![1](./image.png)
+
+### 查看 HTML
+
+演示...
+
+### 查看 CSS
+
+演示...
+
+### 查看盒模型
+
+演示...
+
+（未完待续...）
--- a/public/tutorial/4/image-1.png
+++ b/public/tutorial/4/image-1.png
--- a/public/tutorial/4/image.png
+++ b/public/tutorial/4/image.png
--- a/public/tutorial/README.md
+++ b/public/tutorial/README.md
@@ -1,3 +1,4 @@
 1 标题和段落
 2 盒模型（1）
-3 盒模型（2）
+3 盒模型（2）
+4 盒模型（3）