xuyue/webpreview
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
yuetsh
2025-03-17 12:59:08 +08:00
parent 5f8c96c1da
commit e10bc77978
6 changed files with 134 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public/tutorial/2/README.md
View File

@@ -1,4 +1,4 @@
# 盒模型（1） # 盒模型（1）DIV+CSS
> [!NOTE] > [!NOTE]
> 这是测试的版本 > 这是测试的版本
@@ -15,11 +15,13 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
```html ```html
<div> <div>
<div>Web前端开发工程师</div> <div>Web前端开发工程师</div>
<div>岗位要求</div> <div>岗位要求</div>
<div>1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div> <div>1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
<div>2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div> <div>
<div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div> 2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
</div>
<div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；</div>
</div> </div>
``` ```
@@ -31,11 +33,15 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
```html ```html
<div class="main"> <div class="main">
<div class="title">Web前端开发工程师</div> <div class="title">Web前端开发工程师</div>
<div class="subtitle">岗位要求</div> <div class="subtitle">岗位要求</div>
<div class="item">1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div> <div class="item">
<div class="item">2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div> 1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；
<div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div> </div>
<div class="item">
2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
</div>
<div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；</div>
</div> </div>
``` ```
@@ -45,21 +51,21 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
```css ```css
.title { .title {
font-size: 32px; font-size: 32px;
font-weight: bold; /* 字体加粗 */ font-weight: bold; /* 字体加粗 */
line-height: 64px; line-height: 64px;
color: #000099; color: #000099;
} }
.subtitle { .subtitle {
font-size: 24px; font-size: 24px;
line-height: 48px; line-height: 48px;
} }
.item { .item {
font-size: 20px; font-size: 20px;
text-indent: 2em; text-indent: 2em;
line-height: 40px; line-height: 40px;
} }
``` ```
@@ -67,11 +73,15 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
> 注意 class 类名要有意义，不要随便起名，不然数量多了之后容易混淆 > 注意 class 类名要有意义，不要随便起名，不然数量多了之后容易混淆
## 任务 ## 任务
### HTML ### HTML
上网搜索 🔍 或询问 AI 🤖，找到【初级网络工程师】的岗位要求，通过 Div 嵌套，写上合适的 class 类名，完成 HTML 内容的排版。 上网搜索 🔍 或询问 AI 🤖，找到【初级网络工程师】的岗位要求，通过 Div 嵌套，写上合适的 class 类名，完成 HTML 内容的排版。
### CSS ### CSS
自由调整合适的字体大小、行间距、字体颜色、字重、缩进等样式，美化排版内容。 自由调整合适的字体大小、行间距、字体颜色、字重、缩进等样式，美化排版内容。
### 例子 ### 例子
[初级网络工程师岗位要求](/tutorial/2/demo.html) [初级网络工程师岗位要求](/tutorial/2/demo.html)

154
public/tutorial/3/README.md
View File

@@ -1,4 +1,4 @@
# 盒模型（2） # 盒模型（2）margin+padding+border
> [!NOTE] > [!NOTE]
> 以下是 AI 生成的，不代表 xuyue 的观点 > 以下是 AI 生成的，不代表 xuyue 的观点
@@ -7,12 +7,12 @@
在 HTML 和 CSS 中，每个元素都可以看作是一个矩形的盒子。这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是掌握网页布局的关键。 在 HTML 和 CSS 中，每个元素都可以看作是一个矩形的盒子。这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是掌握网页布局的关键。
![box](/tutorial/3/box.svg) ![box](/tutorial/3/box.svg)
## 2. 盒模型的组成部分 ## 2. 盒模型的组成部分
### 2.1 内容（Content） ### 2.1 内容（Content）
内容区域是盒子的核心部分，显示元素的实际内容，如文本、图片等。内容的大小可以通过 `width` 和 `height` 属性来设置。 内容区域是盒子的核心部分，显示元素的实际内容，如文本、图片等。内容的大小可以通过 `width` 和 `height` 属性来设置。
```html ```html
@@ -21,22 +21,23 @@
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
} }
``` ```
### 2.2 内边距（Padding） ### 2.2 内边距（Padding）
内边距是内容区域与边框之间的空间。它可以通过 `padding` 属性来设置。内边距会增加元素的总宽度和高度。 内边距是内容区域与边框之间的空间。它可以通过 `padding` 属性来设置。内边距会增加元素的总宽度和高度。
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
padding: 10px; /* 上下左右的内边距都为10px */ padding: 10px; /* 上下左右的内边距都为10px */
} }
``` ```
@@ -44,27 +45,28 @@ div {
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
padding-top: 10px; padding-top: 10px;
padding-right: 15px; padding-right: 15px;
padding-bottom: 20px; padding-bottom: 20px;
padding-left: 25px; padding-left: 25px;
} }
``` ```
### 2.3 边框（Border） ### 2.3 边框（Border）
边框是围绕内容和内边距的线条。你可以通过 `border` 属性来设置边框的宽度、样式和颜色。 边框是围绕内容和内边距的线条。你可以通过 `border` 属性来设置边框的宽度、样式和颜色。
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
border: 2px solid black; /* 2px宽的黑色实线边框 */ border: 2px solid black; /* 2px宽的黑色实线边框 */
} }
``` ```
@@ -72,26 +74,27 @@ div {
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
border-color: black; border-color: black;
} }
``` ```
### 2.4 外边距（Margin） ### 2.4 外边距（Margin）
外边距是元素与其他元素之间的空间。它可以通过 `margin` 属性来设置。外边距不会影响元素的总宽度和高度，但会影响元素在页面中的位置。 外边距是元素与其他元素之间的空间。它可以通过 `margin` 属性来设置。外边距不会影响元素的总宽度和高度，但会影响元素在页面中的位置。
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
margin: 10px; /* 上下左右的外边距都为10px */ margin: 10px; /* 上下左右的外边距都为10px */
} }
``` ```
@@ -99,14 +102,14 @@ div {
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
margin-top: 10px; margin-top: 10px;
margin-right: 15px; margin-right: 15px;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 25px; margin-left: 25px;
} }
``` ```
@@ -121,12 +124,12 @@ div {
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
padding: 10px; padding: 10px;
border: 2px solid black; border: 2px solid black;
margin: 20px; margin: 20px;
} }
``` ```
@@ -139,14 +142,14 @@ div {
```css ```css
div { div {
background-color: lightblue; background-color: lightblue;
width: 200px; width: 200px;
height: 100px; height: 100px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
border: 2px solid black; border: 2px solid black;
margin: 20px; margin: 20px;
} }
``` ```
@@ -170,10 +173,12 @@ div {
### 任务要求 ### 任务要求
#### 1. 基础盒子 #### 1. 基础盒子
- 创建 6 个 `div` 元素，每个元素的 `width` 和 `height` 都为 `100px`。 - 创建 6 个 `div` 元素，每个元素的 `width` 和 `height` 都为 `100px`。
- 每个盒子的背景色可以不同，方便区分。 - 每个盒子的背景色可以不同，方便区分。
#### 2. 使用 `padding`、`margin` 和 `border` #### 2. 使用 `padding`、`margin` 和 `border`
- 每个盒子必须设置 `padding`、`margin` 和 `border`，且值不能为 `0`。 - 每个盒子必须设置 `padding`、`margin` 和 `border`，且值不能为 `0`。
- 通过调整这三个属性，让盒子按照以下规则排列： - 通过调整这三个属性，让盒子按照以下规则排列：
- 盒子之间不能有重叠。 - 盒子之间不能有重叠。
@@ -182,59 +187,65 @@ div {
- 边框必须清晰可见，且每个盒子的边框颜色可以不同。 - 边框必须清晰可见，且每个盒子的边框颜色可以不同。
#### 3. 排列规则 #### 3. 排列规则
- 将 6 个盒子排列成一个 **2x3 的网格**。 - 将 6 个盒子排列成一个 **2x3 的网格**。
- 网格的行间距和列间距必须完全由 `margin` 控制。 - 网格的行间距和列间距必须完全由 `margin` 控制。
- 每个盒子的 `padding` 和 `border` 必须清晰可见。 - 每个盒子的 `padding` 和 `border` 必须清晰可见。
### 4. 最终效果 ### 4. 最终效果
- 页面中应该有一个清晰的 2x3 网格，每个盒子之间有均匀的间距。 - 页面中应该有一个清晰的 2x3 网格，每个盒子之间有均匀的间距。
- 每个盒子的内容区域、内边距和边框都应该清晰可见。 - 每个盒子的内容区域、内边距和边框都应该清晰可见。
## 初始代码 ## 初始代码
```html ```html
<div class="container"> <div class="container">
<div class="box">1</div> <div class="box">1</div>
<div class="box">2</div> <div class="box">2</div>
<div class="box">3</div> <div class="box">3</div>
<div class="box">4</div> <div class="box">4</div>
<div class="box">5</div> <div class="box">5</div>
<div class="box">6</div> <div class="box">6</div>
</div> </div>
``` ```
```css ```css
/* 容器样式 */ /* 容器样式 */
.container { .container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 400px; /* 容器宽度 */ width: 400px; /* 容器宽度 */
margin: 0 auto; /* 居中 */ margin: 0 auto; /* 居中 */
} }
/* 基础盒子样式 */ /* 基础盒子样式 */
.box { .box {
width: 100px; width: 100px;
height: 100px; height: 100px;
background-color: lightblue; background-color: lightblue;
padding: 10px; /* 内边距 */ padding: 10px; /* 内边距 */
border: 5px solid black; /* 边框 */ border: 5px solid black; /* 边框 */
margin: 15px; /* 外边距 */ margin: 15px; /* 外边距 */
text-align: center; text-align: center;
line-height: 100px; /* 文字垂直居中 */ line-height: 100px; /* 文字垂直居中 */
} }
``` ```
### 任务提示 ### 任务提示
1. **`padding`** 1. **`padding`**
- 控制内容与边框之间的距离。 - 控制内容与边框之间的距离。
- 尝试为不同的盒子设置不同的 `padding` 值，观察内容区域的变化。 - 尝试为不同的盒子设置不同的 `padding` 值，观察内容区域的变化。
2. **`border`** 2. **`border`**
- 控制边框的宽度、样式和颜色。 - 控制边框的宽度、样式和颜色。
- 尝试为不同的盒子设置不同的边框样式（如 `dashed`、`dotted`）。 - 尝试为不同的盒子设置不同的边框样式（如 `dashed`、`dotted`）。
3. **`margin`** 3. **`margin`**
- 控制盒子之间的间距。 - 控制盒子之间的间距。
- 尝试为不同的盒子设置不同的 `margin` 值，观察盒子之间的间距变化。 - 尝试为不同的盒子设置不同的 `margin` 值，观察盒子之间的间距变化。
@@ -245,13 +256,14 @@ div {
### 任务扩展（可选） ### 任务扩展（可选）
1. **动态效果** 1. **动态效果**
- 使用 `:hover` 伪类，当鼠标悬停在盒子上时，改变盒子的 `padding`、`margin` 或 `border`。 - 使用 `:hover` 伪类，当鼠标悬停在盒子上时，改变盒子的 `padding`、`margin` 或 `border`。
- 例如： - 例如：
```css ```css
.box:hover { .box:hover {
padding: 20px; padding: 20px;
margin: 10px; margin: 10px;
border: 10px solid red; border: 10px solid red;
} }
``` ```

19
public/tutorial/4/README.md Normal file
View File

@@ -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
演示...
### 查看盒模型
演示...
（未完待续...）

BIN
public/tutorial/4/image-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/tutorial/4/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

1
public/tutorial/README.md
View File

@@ -1,3 +1,4 @@
1 标题和段落 1 标题和段落
2 盒模型（1） 2 盒模型（1）
3 盒模型（2） 3 盒模型（2）
4 盒模型（3）