diff --git a/public/tutorial/2/README.md b/public/tutorial/2/README.md index 105e5a2..31bc227 100644 --- 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
-
Web前端开发工程师
-
岗位要求
-
1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；
-
2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
-
3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；
+
Web前端开发工程师
+
岗位要求
+
1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；
+
+ 2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等； +
+
3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；
``` @@ -31,11 +33,15 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块 ```html
-
Web前端开发工程师
-
岗位要求
-
1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；
-
2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
-
3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；
+
Web前端开发工程师
+
岗位要求
+
+ 1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准； +
+
+ 2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等； +
+
3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；
``` @@ -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) diff --git a/public/tutorial/3/README.md b/public/tutorial/3/README.md index a082ec6..36b27d3 100644 --- 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
-
1
-
2
-
3
-
4
-
5
-
6
+
1
+
2
+
3
+
4
+
5
+
6
``` ```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; } ``` diff --git a/public/tutorial/4/README.md b/public/tutorial/4/README.md new file mode 100644 index 0000000..89cb628 --- /dev/null +++ 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 + +演示... + +### 查看盒模型 + +演示... + +（未完待续...） diff --git a/public/tutorial/4/image-1.png b/public/tutorial/4/image-1.png new file mode 100644 index 0000000..6939ed4 Binary files /dev/null and b/public/tutorial/4/image-1.png differ diff --git a/public/tutorial/4/image.png b/public/tutorial/4/image.png new file mode 100644 index 0000000..4ddf1bd Binary files /dev/null and b/public/tutorial/4/image.png differ diff --git a/public/tutorial/README.md b/public/tutorial/README.md index 50114a1..8de5ba2 100644 --- a/public/tutorial/README.md +++ b/public/tutorial/README.md @@ -1,3 +1,4 @@ 1 标题和段落 2 盒模型（1） -3 盒模型（2） \ No newline at end of file +3 盒模型（2） +4 盒模型（3）