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

去掉不需要的文件

Browse Source
This commit is contained in:
yuetsh
2025-06-15 22:50:10 +08:00
parent 4caa3b061a
commit 616bb2bfec
8 changed files with 0 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/tutorial/2/demo.html → public/demo/1.html
View File

126
public/tutorial/1/README.md
View File

@@ -1,126 +0,0 @@
# 标题和段落
> [!NOTE]
> 这是测试的版本
## 标题
`h1` 到 `h6`，一共六级标题。
```html
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
```
给六个标题字体颜色换一下，注意：`color` 表示**字体颜色**。
```css
h1 {
color: red;
}
h2 {
color: orange;
}
h3 {
color: yellow;
}
h4 {
color: green;
}
h5 {
color: blue;
}
h6 {
color: purple;
}
```
颜色的表示可以是英文，也可以是十六进制（注意前面有个井号），也可以是 RGB。
比如
```css
h1 {
color: #333333;
}
h2 {
color: rgb(163, 174, 46);
}
```
## 段落
`p` 表示段落
```html
<p>
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
</p>
```
用 `font-size` 改变字体大小，`line-height` 改变行高。注意单位是 px（像素）
```css
p {
font-size: 24px;
line-height: 48px;
text-indent: 2em;
}
```
`text-indent: 2em;` 表示首行缩进 2 个字符（单位不是 px，而是 em）
## 任务
标题和段落的简单美化。
### 要求
完成下面《白鹭》散文（节选）的排版：
- 标题：使用 `h1` 标签，设置字号 32px，颜色黑色;
- 每个段落：设置字号 28px，颜色（#333），行间距 40px，首行缩进两字符；
### 文字材料
白鹭
白鹭是一首精巧的诗。
色素的配合，身段的大小，一切都很适宜。
白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。
然而白鹭却因为它的常见，而被人忘却了它的美。
那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
### 效果
```html preview
<h1 style="font-size: 32px; color: black;">白鹭</h1>
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹭是一首精巧的诗。</p>
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">色素的配合，身段的大小，一切都很适宜。</p>
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。</p>
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">然而白鹭却因为它的常见，而被人忘却了它的美。</p>
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。</p>
```
## 总结
### HTML
标题：h1 到 h6
段落：p
### CSS
color 字体颜色
font-size 字体大小
line-height 行间距
text-indent: 2em; 表示首行缩进2字符

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

@@ -1,87 +0,0 @@
# 盒模型（1）DIV+CSS
> [!NOTE]
> 这是测试的版本
## div 标签
HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块级元素，可以嵌套使用。div 标签不像 `h1` `p` 有默认的样式， div 标签没有自带样式，这点很好。比如：
```html
<div>Web前端开发工程师</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>
```
注意标签的闭合和层级，可以看到每个 div 标签都是占一行，这就是块级元素的意思。
## class 类名
我们在 HTML 标签上可以写 `class` 类名来命名每个标签，方便写 CSS，比如：
```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>
```
最外层的 div 叫做 `main`，内层的分别是 `title` `subtitle` `item`
这样，我们就可以在 CSS 中指定 class 类名，写相应的样式，比如：
```css
.title {
font-size: 32px;
font-weight: bold; /* 字体加粗 */
line-height: 64px;
color: #000099;
}
.subtitle {
font-size: 24px;
line-height: 48px;
}
.item {
font-size: 20px;
text-indent: 2em;
line-height: 40px;
}
```
> [!IMPORTANT]
> 注意 class 类名要有意义，不要随便起名，不然数量多了之后容易混淆
## 任务
### HTML
上网搜索 🔍 或询问 AI 🤖，找到【初级网络工程师】的岗位要求，通过 Div 嵌套，写上合适的 class 类名，完成 HTML 内容的排版。
### CSS
自由调整合适的字体大小、行间距、字体颜色、字重、缩进等样式，美化排版内容。
### 例子
[初级网络工程师岗位要求](/tutorial/2/demo.html)

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

@@ -1,275 +0,0 @@
# 盒模型（2）margin+padding+border
> [!NOTE]
> 以下是 AI 生成的，不代表 xuyue 的观点
## 1. 盒模型简介
在 HTML 和 CSS 中，每个元素都可以看作是一个矩形的盒子。这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是掌握网页布局的关键。
![box](/tutorial/3/box.svg)
## 2. 盒模型的组成部分
### 2.1 内容（Content）
内容区域是盒子的核心部分，显示元素的实际内容，如文本、图片等。内容的大小可以通过 `width` 和 `height` 属性来设置。
```html
<div>DeepSeek V3</div>
```
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
}
```
### 2.2 内边距（Padding）
内边距是内容区域与边框之间的空间。它可以通过 `padding` 属性来设置。内边距会增加元素的总宽度和高度。
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
padding: 10px; /* 上下左右的内边距都为10px */
}
```
你也可以分别设置四个方向的内边距：
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
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;
border: 2px solid black; /* 2px宽的黑色实线边框 */
}
```
你也可以分别设置边框的宽度、样式和颜色：
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
border-width: 2px;
border-style: solid;
border-color: black;
}
```
### 2.4 外边距（Margin）
外边距是元素与其他元素之间的空间。它可以通过 `margin` 属性来设置。外边距不会影响元素的总宽度和高度，但会影响元素在页面中的位置。
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
margin: 10px; /* 上下左右的外边距都为10px */
}
```
你也可以分别设置四个方向的外边距：
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
}
```
## 3. 盒模型的计算
盒模型的总宽度和高度可以通过以下公式计算：
- **总宽度** = `width` + `padding-left` + `padding-right` + `border-left` + `border-right` + `margin-left` + `margin-right`
- **总高度** = `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom` + `margin-top` + `margin-bottom`
### 3.1 示例
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
```
- **总宽度** = 200px (width) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right) + 20px (margin-left) + 20px (margin-right) = 264px
- **总高度** = 100px (height) + 10px (padding-top) + 10px (padding-bottom) + 2px (border-top) + 2px (border-bottom) + 20px (margin-top) + 20px (margin-bottom) = 164px
## 4. `box-sizing` 属性
默认情况下，CSS 使用标准盒模型（`content-box`），即元素的宽度和高度只包括内容区域。如果你希望元素的宽度和高度包括内边距和边框，可以使用 `box-sizing: border-box;`。
```css
div {
background-color: lightblue;
width: 200px;
height: 100px;
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
```
在这种情况下，元素的总宽度和高度将包括内容、内边距和边框，而外边距仍然在外部。
## 5. 总结
- **内容（Content）**：元素的实际内容。
- **内边距（Padding）**：内容与边框之间的空间。
- **边框（Border）**：围绕内容和内边距的线条。
- **外边距（Margin）**：元素与其他元素之间的空间。
理解盒模型是掌握网页布局的基础。通过合理设置 `padding`、`border` 和 `margin`，你可以更好地控制元素的外观和位置。
## 任务
### 任务目标
使用 `padding`、`margin` 和 `border` 来调整盒子的布局，完成一个拼图式的页面。你需要通过合理设置这三个属性，让多个盒子按照要求排列组合，最终形成一个完整的图案。
### 任务要求
#### 1. 基础盒子
- 创建 6 个 `div` 元素，每个元素的 `width` 和 `height` 都为 `100px`。
- 每个盒子的背景色可以不同，方便区分。
#### 2. 使用 `padding`、`margin` 和 `border`
- 每个盒子必须设置 `padding`、`margin` 和 `border`，且值不能为 `0`。
- 通过调整这三个属性，让盒子按照以下规则排列：
- 盒子之间不能有重叠。
- 盒子之间的间距必须完全由 `margin` 控制。
- 盒子的内容区域必须清晰可见（通过 `padding` 控制内容与边框的距离）。
- 边框必须清晰可见，且每个盒子的边框颜色可以不同。
#### 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>
```
```css
/* 容器样式 */
.container {
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; /* 文字垂直居中 */
}
```
### 任务提示
1. **`padding`**
- 控制内容与边框之间的距离。
- 尝试为不同的盒子设置不同的 `padding` 值，观察内容区域的变化。
2. **`border`**
- 控制边框的宽度、样式和颜色。
- 尝试为不同的盒子设置不同的边框样式（如 `dashed`、`dotted`）。
3. **`margin`**
- 控制盒子之间的间距。
- 尝试为不同的盒子设置不同的 `margin` 值，观察盒子之间的间距变化。
4. **布局调整**
- 使用 `display: flex` 和 `flex-wrap: wrap` 来实现 2x3 的网格布局。
- 调整 `margin` 的值，确保盒子之间的间距均匀。
### 任务扩展（可选）
1. **动态效果**
- 使用 `:hover` 伪类，当鼠标悬停在盒子上时，改变盒子的 `padding`、`margin` 或 `border`。
- 例如：
```css
.box:hover {
padding: 20px;
margin: 10px;
border: 10px solid red;
}
```
2. **颜色变化**
- 为每个盒子设置不同的背景色、边框颜色和内边距颜色，让拼图更生动。
### 最终效果
完成后的页面应该是一个整齐的 2x3 网格，每个盒子之间有均匀的间距，且内容区域、内边距和边框都清晰可见。通过调整 `padding`、`margin` 和 `border`，你可以直观地感受到它们对布局的影响。

45
public/tutorial/3/box.svg
View File

@@ -1,45 +0,0 @@
<svg width="760" height="520" viewBox="0 0 760 520" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="760" height="520" fill="white"/>
<rect x="20.5" y="17.5" width="719" height="485" fill="#F3F4F4" stroke="#DADCE0"/>
<rect x="59" y="56" width="642" height="408" fill="#0C55FF"/>
<rect x="88" y="85" width="584" height="350" fill="#E8F0FE"/>
<rect x="127.5" y="124.5" width="504" height="271" fill="white" stroke="#272EB5"/>
<path d="M335.145 77V64.2031H339.628C341.18 64.2031 342.358 64.502 343.161 65.0996C343.964 65.6914 344.365 66.5615 344.365 67.71C344.365 68.3369 344.204 68.8906 343.881 69.3711C343.559 69.8457 343.111 70.1943 342.537 70.417C343.193 70.5811 343.709 70.9121 344.084 71.4102C344.464 71.9082 344.655 72.5176 344.655 73.2383C344.655 74.4688 344.262 75.4004 343.477 76.0332C342.692 76.666 341.573 76.9883 340.12 77H335.145ZM337.782 71.4277V74.8818H340.041C340.662 74.8818 341.145 74.7354 341.491 74.4424C341.842 74.1436 342.018 73.7334 342.018 73.2119C342.018 72.04 341.412 71.4453 340.199 71.4277H337.782ZM337.782 69.5645H339.733C341.063 69.541 341.728 69.0107 341.728 67.9736C341.728 67.3936 341.558 66.9775 341.218 66.7256C340.884 66.4678 340.354 66.3389 339.628 66.3389H337.782V69.5645Z" fill="white"/>
<path d="M346.379 72.1572C346.379 71.2139 346.56 70.373 346.924 69.6348C347.287 68.8965 347.808 68.3252 348.488 67.9209C349.174 67.5166 349.968 67.3145 350.87 67.3145C352.153 67.3145 353.199 67.707 354.008 68.4922C354.822 69.2773 355.276 70.3438 355.37 71.6914L355.388 72.3418C355.388 73.8008 354.98 74.9727 354.166 75.8574C353.351 76.7363 352.259 77.1758 350.888 77.1758C349.516 77.1758 348.421 76.7363 347.6 75.8574C346.786 74.9785 346.379 73.7832 346.379 72.2715V72.1572ZM348.919 72.3418C348.919 73.2441 349.089 73.9355 349.429 74.416C349.768 74.8906 350.255 75.1279 350.888 75.1279C351.503 75.1279 351.983 74.8936 352.329 74.4248C352.675 73.9502 352.847 73.1943 352.847 72.1572C352.847 71.2725 352.675 70.5869 352.329 70.1006C351.983 69.6143 351.497 69.3711 350.87 69.3711C350.249 69.3711 349.768 69.6143 349.429 70.1006C349.089 70.5811 348.919 71.3281 348.919 72.3418Z" fill="white"/>
<path d="M362.596 69.8721C362.25 69.8252 361.945 69.8018 361.682 69.8018C360.721 69.8018 360.091 70.127 359.792 70.7773V77H357.252V67.4902H359.651L359.722 68.624C360.231 67.751 360.938 67.3145 361.84 67.3145C362.121 67.3145 362.385 67.3525 362.631 67.4287L362.596 69.8721Z" fill="white"/>
<path d="M363.555 72.1748C363.555 70.6924 363.886 69.5117 364.548 68.6328C365.216 67.7539 366.127 67.3145 367.281 67.3145C368.207 67.3145 368.972 67.6602 369.575 68.3516V63.5H372.124V77H369.83L369.707 75.9893C369.074 76.7803 368.26 77.1758 367.264 77.1758C366.145 77.1758 365.245 76.7363 364.566 75.8574C363.892 74.9727 363.555 73.7451 363.555 72.1748ZM366.095 72.3594C366.095 73.25 366.25 73.9326 366.561 74.4072C366.871 74.8818 367.322 75.1191 367.914 75.1191C368.699 75.1191 369.253 74.7881 369.575 74.126V70.373C369.259 69.7109 368.711 69.3799 367.932 69.3799C366.707 69.3799 366.095 70.373 366.095 72.3594Z" fill="white"/>
<path d="M378.77 77.1758C377.375 77.1758 376.239 76.748 375.36 75.8926C374.487 75.0371 374.05 73.8975 374.05 72.4736V72.2275C374.05 71.2725 374.235 70.4199 374.604 69.6699C374.973 68.9141 375.495 68.334 376.168 67.9297C376.848 67.5195 377.622 67.3145 378.489 67.3145C379.789 67.3145 380.812 67.7246 381.556 68.5449C382.306 69.3652 382.681 70.5283 382.681 72.0342V73.0713H376.625C376.707 73.6924 376.954 74.1904 377.364 74.5654C377.78 74.9404 378.304 75.1279 378.937 75.1279C379.915 75.1279 380.68 74.7734 381.231 74.0645L382.479 75.4619C382.098 76.001 381.582 76.4229 380.932 76.7275C380.282 77.0264 379.561 77.1758 378.77 77.1758ZM378.48 69.3711C377.976 69.3711 377.566 69.541 377.249 69.8809C376.939 70.2207 376.74 70.707 376.652 71.3398H380.185V71.1377C380.173 70.5752 380.021 70.1416 379.728 69.8369C379.435 69.5264 379.019 69.3711 378.48 69.3711Z" fill="white"/>
<path d="M389.775 69.8721C389.429 69.8252 389.125 69.8018 388.861 69.8018C387.9 69.8018 387.27 70.127 386.971 70.7773V77H384.431V67.4902H386.831L386.901 68.624C387.411 67.751 388.117 67.3145 389.019 67.3145C389.3 67.3145 389.564 67.3525 389.81 67.4287L389.775 69.8721Z" fill="white"/>
<path d="M404.657 72.333C404.657 73.8564 404.332 75.0459 403.682 75.9014C403.031 76.751 402.123 77.1758 400.957 77.1758C399.926 77.1758 399.103 76.7803 398.487 75.9893L398.373 77H396.088V63.5H398.628V68.3428C399.214 67.6572 399.984 67.3145 400.939 67.3145C402.1 67.3145 403.008 67.7422 403.664 68.5977C404.326 69.4473 404.657 70.6455 404.657 72.1924V72.333ZM402.117 72.1484C402.117 71.1875 401.965 70.4873 401.66 70.0479C401.355 69.6025 400.901 69.3799 400.298 69.3799C399.489 69.3799 398.933 69.7109 398.628 70.373V74.126C398.938 74.7939 399.501 75.1279 400.315 75.1279C401.136 75.1279 401.675 74.7236 401.933 73.915C402.056 73.5283 402.117 72.9395 402.117 72.1484Z" fill="white"/>
<path d="M406.135 72.1572C406.135 71.2139 406.317 70.373 406.68 69.6348C407.043 68.8965 407.565 68.3252 408.244 67.9209C408.93 67.5166 409.724 67.3145 410.626 67.3145C411.909 67.3145 412.955 67.707 413.764 68.4922C414.578 69.2773 415.032 70.3438 415.126 71.6914L415.144 72.3418C415.144 73.8008 414.737 74.9727 413.922 75.8574C413.108 76.7363 412.015 77.1758 410.644 77.1758C409.273 77.1758 408.177 76.7363 407.357 75.8574C406.542 74.9785 406.135 73.7832 406.135 72.2715V72.1572ZM408.675 72.3418C408.675 73.2441 408.845 73.9355 409.185 74.416C409.525 74.8906 410.011 75.1279 410.644 75.1279C411.259 75.1279 411.739 74.8936 412.085 74.4248C412.431 73.9502 412.604 73.1943 412.604 72.1572C412.604 71.2725 412.431 70.5869 412.085 70.1006C411.739 69.6143 411.253 69.3711 410.626 69.3711C410.005 69.3711 409.525 69.6143 409.185 70.1006C408.845 70.5811 408.675 71.3281 408.675 72.3418Z" fill="white"/>
<path d="M420.436 70.3291L422.036 67.4902H424.751L422.044 72.1484L424.866 77H422.141L420.445 74.0117L418.757 77H416.024L418.845 72.1484L416.147 67.4902H418.872L420.436 70.3291Z" fill="white"/>
<path d="M341.286 261.737C341.187 263.114 340.677 264.198 339.757 264.989C338.843 265.78 337.636 266.176 336.136 266.176C334.495 266.176 333.203 265.625 332.26 264.523C331.322 263.416 330.854 261.898 330.854 259.971V259.188C330.854 257.958 331.07 256.874 331.504 255.937C331.938 254.999 332.556 254.281 333.358 253.783C334.167 253.279 335.104 253.027 336.171 253.027C337.647 253.027 338.837 253.423 339.739 254.214C340.642 255.005 341.163 256.115 341.304 257.545H338.667C338.603 256.719 338.371 256.121 337.973 255.752C337.58 255.377 336.979 255.189 336.171 255.189C335.292 255.189 334.633 255.506 334.193 256.139C333.76 256.766 333.537 257.741 333.525 259.065V260.032C333.525 261.415 333.733 262.426 334.149 263.064C334.571 263.703 335.233 264.022 336.136 264.022C336.95 264.022 337.557 263.838 337.955 263.469C338.359 263.094 338.591 262.517 338.649 261.737H341.286Z" fill="black"/>
<path d="M342.755 261.157C342.755 260.214 342.937 259.373 343.3 258.635C343.663 257.896 344.185 257.325 344.864 256.921C345.55 256.517 346.344 256.314 347.246 256.314C348.529 256.314 349.575 256.707 350.384 257.492C351.198 258.277 351.653 259.344 351.746 260.691L351.764 261.342C351.764 262.801 351.357 263.973 350.542 264.857C349.728 265.736 348.635 266.176 347.264 266.176C345.893 266.176 344.797 265.736 343.977 264.857C343.162 263.979 342.755 262.783 342.755 261.271V261.157ZM345.295 261.342C345.295 262.244 345.465 262.936 345.805 263.416C346.145 263.891 346.631 264.128 347.264 264.128C347.879 264.128 348.36 263.894 348.705 263.425C349.051 262.95 349.224 262.194 349.224 261.157C349.224 260.272 349.051 259.587 348.705 259.101C348.36 258.614 347.873 258.371 347.246 258.371C346.625 258.371 346.145 258.614 345.805 259.101C345.465 259.581 345.295 260.328 345.295 261.342Z" fill="black"/>
<path d="M355.966 256.49L356.045 257.589C356.725 256.739 357.636 256.314 358.779 256.314C359.787 256.314 360.537 256.61 361.029 257.202C361.521 257.794 361.773 258.679 361.785 259.856V266H359.245V259.918C359.245 259.379 359.127 258.989 358.893 258.749C358.659 258.503 358.269 258.38 357.724 258.38C357.009 258.38 356.473 258.685 356.116 259.294V266H353.576V256.49H355.966Z" fill="black"/>
<path d="M367.059 254.152V256.49H368.685V258.354H367.059V263.1C367.059 263.451 367.127 263.703 367.261 263.855C367.396 264.008 367.654 264.084 368.035 264.084C368.316 264.084 368.565 264.063 368.782 264.022V265.947C368.284 266.1 367.771 266.176 367.244 266.176C365.463 266.176 364.554 265.276 364.519 263.478V258.354H363.13V256.49H364.519V254.152H367.059Z" fill="black"/>
<path d="M374.777 266.176C373.383 266.176 372.246 265.748 371.367 264.893C370.494 264.037 370.057 262.897 370.057 261.474V261.228C370.057 260.272 370.242 259.42 370.611 258.67C370.98 257.914 371.502 257.334 372.176 256.93C372.855 256.52 373.629 256.314 374.496 256.314C375.797 256.314 376.819 256.725 377.563 257.545C378.313 258.365 378.688 259.528 378.688 261.034V262.071H372.633C372.715 262.692 372.961 263.19 373.371 263.565C373.787 263.94 374.311 264.128 374.944 264.128C375.923 264.128 376.687 263.773 377.238 263.064L378.486 264.462C378.105 265.001 377.59 265.423 376.939 265.728C376.289 266.026 375.568 266.176 374.777 266.176ZM374.487 258.371C373.983 258.371 373.573 258.541 373.257 258.881C372.946 259.221 372.747 259.707 372.659 260.34H376.192V260.138C376.18 259.575 376.028 259.142 375.735 258.837C375.442 258.526 375.026 258.371 374.487 258.371Z" fill="black"/>
<path d="M382.776 256.49L382.855 257.589C383.535 256.739 384.446 256.314 385.589 256.314C386.597 256.314 387.347 256.61 387.839 257.202C388.331 257.794 388.583 258.679 388.595 259.856V266H386.055V259.918C386.055 259.379 385.938 258.989 385.703 258.749C385.469 258.503 385.079 258.38 384.534 258.38C383.819 258.38 383.283 258.685 382.926 259.294V266H380.386V256.49H382.776Z" fill="black"/>
<path d="M393.869 254.152V256.49H395.495V258.354H393.869V263.1C393.869 263.451 393.937 263.703 394.071 263.855C394.206 264.008 394.464 264.084 394.845 264.084C395.126 264.084 395.375 264.063 395.592 264.022V265.947C395.094 266.1 394.581 266.176 394.054 266.176C392.273 266.176 391.364 265.276 391.329 263.478V258.354H389.941V256.49H391.329V254.152H393.869Z" fill="black"/>
<path d="M410.562 261.333C410.562 262.856 410.237 264.046 409.587 264.901C408.936 265.751 408.028 266.176 406.862 266.176C405.831 266.176 405.007 265.78 404.392 264.989L404.278 266H401.993V252.5H404.533V257.343C405.119 256.657 405.889 256.314 406.844 256.314C408.004 256.314 408.913 256.742 409.569 257.598C410.231 258.447 410.562 259.646 410.562 261.192V261.333ZM408.022 261.148C408.022 260.188 407.87 259.487 407.565 259.048C407.26 258.603 406.806 258.38 406.203 258.38C405.394 258.38 404.838 258.711 404.533 259.373V263.126C404.843 263.794 405.406 264.128 406.22 264.128C407.041 264.128 407.58 263.724 407.838 262.915C407.961 262.528 408.022 261.939 408.022 261.148Z" fill="black"/>
<path d="M412.04 261.157C412.04 260.214 412.221 259.373 412.585 258.635C412.948 257.896 413.47 257.325 414.149 256.921C414.835 256.517 415.629 256.314 416.531 256.314C417.814 256.314 418.86 256.707 419.669 257.492C420.483 258.277 420.937 259.344 421.031 260.691L421.049 261.342C421.049 262.801 420.641 263.973 419.827 264.857C419.012 265.736 417.92 266.176 416.549 266.176C415.178 266.176 414.082 265.736 413.262 264.857C412.447 263.979 412.04 262.783 412.04 261.271V261.157ZM414.58 261.342C414.58 262.244 414.75 262.936 415.09 263.416C415.429 263.891 415.916 264.128 416.549 264.128C417.164 264.128 417.644 263.894 417.99 263.425C418.336 262.95 418.509 262.194 418.509 261.157C418.509 260.272 418.336 259.587 417.99 259.101C417.644 258.614 417.158 258.371 416.531 258.371C415.91 258.371 415.429 258.614 415.09 259.101C414.75 259.581 414.58 260.328 414.58 261.342Z" fill="black"/>
<path d="M426.341 259.329L427.94 256.49H430.656L427.949 261.148L430.771 266H428.046L426.35 263.012L424.662 266H421.929L424.75 261.148L422.052 256.49H424.776L426.341 259.329Z" fill="black"/>
<path d="M331.094 106.491V111H328.457V98.2031H333.449C334.41 98.2031 335.254 98.3789 335.98 98.7305C336.713 99.082 337.275 99.583 337.668 100.233C338.061 100.878 338.257 101.613 338.257 102.439C338.257 103.693 337.826 104.684 336.965 105.41C336.109 106.131 334.923 106.491 333.405 106.491H331.094ZM331.094 104.355H333.449C334.146 104.355 334.677 104.191 335.04 103.863C335.409 103.535 335.594 103.066 335.594 102.457C335.594 101.83 335.409 101.323 335.04 100.937C334.671 100.55 334.161 100.351 333.511 100.339H331.094V104.355Z" fill="black"/>
<path d="M345.614 111C345.497 110.771 345.412 110.487 345.36 110.147C344.744 110.833 343.945 111.176 342.96 111.176C342.029 111.176 341.255 110.906 340.64 110.367C340.03 109.828 339.726 109.148 339.726 108.328C339.726 107.32 340.098 106.547 340.842 106.008C341.592 105.469 342.673 105.196 344.085 105.19H345.254V104.646C345.254 104.206 345.14 103.854 344.911 103.591C344.689 103.327 344.334 103.195 343.848 103.195C343.42 103.195 343.083 103.298 342.837 103.503C342.597 103.708 342.477 103.989 342.477 104.347H339.937C339.937 103.796 340.107 103.286 340.446 102.817C340.786 102.349 341.267 101.982 341.888 101.719C342.509 101.449 343.206 101.314 343.98 101.314C345.152 101.314 346.08 101.61 346.766 102.202C347.457 102.788 347.803 103.614 347.803 104.681V108.803C347.809 109.705 347.935 110.388 348.181 110.851V111H345.614ZM343.514 109.233C343.889 109.233 344.235 109.151 344.551 108.987C344.867 108.817 345.102 108.592 345.254 108.311V106.676H344.305C343.033 106.676 342.357 107.115 342.275 107.994L342.266 108.144C342.266 108.46 342.377 108.721 342.6 108.926C342.822 109.131 343.127 109.233 343.514 109.233Z" fill="black"/>
<path d="M349.659 106.175C349.659 104.692 349.99 103.512 350.652 102.633C351.32 101.754 352.231 101.314 353.385 101.314C354.311 101.314 355.076 101.66 355.679 102.352V97.5H358.228V111H355.934L355.811 109.989C355.178 110.78 354.364 111.176 353.368 111.176C352.248 111.176 351.349 110.736 350.669 109.857C349.996 108.973 349.659 107.745 349.659 106.175ZM352.199 106.359C352.199 107.25 352.354 107.933 352.664 108.407C352.975 108.882 353.426 109.119 354.018 109.119C354.803 109.119 355.357 108.788 355.679 108.126V104.373C355.363 103.711 354.815 103.38 354.036 103.38C352.811 103.38 352.199 104.373 352.199 106.359Z" fill="black"/>
<path d="M360.101 106.175C360.101 104.692 360.432 103.512 361.094 102.633C361.762 101.754 362.673 101.314 363.828 101.314C364.754 101.314 365.518 101.66 366.122 102.352V97.5H368.671V111H366.377L366.254 109.989C365.621 110.78 364.806 111.176 363.81 111.176C362.691 111.176 361.792 110.736 361.112 109.857C360.438 108.973 360.101 107.745 360.101 106.175ZM362.641 106.359C362.641 107.25 362.796 107.933 363.107 108.407C363.418 108.882 363.869 109.119 364.461 109.119C365.246 109.119 365.799 108.788 366.122 108.126V104.373C365.805 103.711 365.257 103.38 364.478 103.38C363.254 103.38 362.641 104.373 362.641 106.359Z" fill="black"/>
<path d="M373.62 111H371.071V101.49H373.62V111ZM370.922 99.0293C370.922 98.6484 371.048 98.335 371.3 98.0889C371.557 97.8428 371.906 97.7197 372.346 97.7197C372.779 97.7197 373.125 97.8428 373.383 98.0889C373.64 98.335 373.769 98.6484 373.769 99.0293C373.769 99.416 373.638 99.7324 373.374 99.9785C373.116 100.225 372.773 100.348 372.346 100.348C371.918 100.348 371.572 100.225 371.308 99.9785C371.051 99.7324 370.922 99.416 370.922 99.0293Z" fill="black"/>
<path d="M378.358 101.49L378.438 102.589C379.117 101.739 380.028 101.314 381.171 101.314C382.179 101.314 382.929 101.61 383.421 102.202C383.913 102.794 384.165 103.679 384.177 104.856V111H381.637V104.918C381.637 104.379 381.52 103.989 381.285 103.749C381.051 103.503 380.661 103.38 380.116 103.38C379.401 103.38 378.865 103.685 378.508 104.294V111H375.968V101.49H378.358Z" fill="black"/>
<path d="M386.041 106.175C386.041 104.716 386.387 103.541 387.078 102.65C387.776 101.76 388.713 101.314 389.891 101.314C390.934 101.314 391.745 101.672 392.325 102.387L392.431 101.49H394.734V110.684C394.734 111.516 394.543 112.239 394.162 112.854C393.787 113.47 393.257 113.938 392.571 114.261C391.886 114.583 391.083 114.744 390.163 114.744C389.466 114.744 388.786 114.604 388.124 114.322C387.462 114.047 386.961 113.689 386.621 113.25L387.746 111.703C388.379 112.412 389.147 112.767 390.049 112.767C390.723 112.767 391.247 112.585 391.622 112.222C391.997 111.864 392.185 111.354 392.185 110.692V110.183C391.599 110.845 390.828 111.176 389.873 111.176C388.731 111.176 387.805 110.73 387.096 109.84C386.393 108.943 386.041 107.757 386.041 106.28V106.175ZM388.581 106.359C388.581 107.221 388.754 107.897 389.1 108.39C389.446 108.876 389.92 109.119 390.524 109.119C391.297 109.119 391.851 108.829 392.185 108.249V104.25C391.845 103.67 391.297 103.38 390.541 103.38C389.932 103.38 389.451 103.629 389.1 104.127C388.754 104.625 388.581 105.369 388.581 106.359Z" fill="black"/>
<path d="M410.345 106.333C410.345 107.856 410.02 109.046 409.37 109.901C408.719 110.751 407.811 111.176 406.645 111.176C405.614 111.176 404.791 110.78 404.175 109.989L404.061 111H401.776V97.5H404.316V102.343C404.902 101.657 405.672 101.314 406.628 101.314C407.788 101.314 408.696 101.742 409.352 102.598C410.014 103.447 410.345 104.646 410.345 106.192V106.333ZM407.805 106.148C407.805 105.188 407.653 104.487 407.348 104.048C407.044 103.603 406.589 103.38 405.986 103.38C405.177 103.38 404.621 103.711 404.316 104.373V108.126C404.627 108.794 405.189 109.128 406.004 109.128C406.824 109.128 407.363 108.724 407.621 107.915C407.744 107.528 407.805 106.939 407.805 106.148Z" fill="black"/>
<path d="M411.823 106.157C411.823 105.214 412.005 104.373 412.368 103.635C412.731 102.896 413.253 102.325 413.932 101.921C414.618 101.517 415.412 101.314 416.314 101.314C417.597 101.314 418.643 101.707 419.452 102.492C420.266 103.277 420.721 104.344 420.814 105.691L420.832 106.342C420.832 107.801 420.425 108.973 419.61 109.857C418.796 110.736 417.703 111.176 416.332 111.176C414.961 111.176 413.865 110.736 413.045 109.857C412.23 108.979 411.823 107.783 411.823 106.271V106.157ZM414.363 106.342C414.363 107.244 414.533 107.936 414.873 108.416C415.213 108.891 415.699 109.128 416.332 109.128C416.947 109.128 417.428 108.894 417.773 108.425C418.119 107.95 418.292 107.194 418.292 106.157C418.292 105.272 418.119 104.587 417.773 104.101C417.428 103.614 416.941 103.371 416.314 103.371C415.693 103.371 415.213 103.614 414.873 104.101C414.533 104.581 414.363 105.328 414.363 106.342Z" fill="black"/>
<path d="M426.124 104.329L427.724 101.49H430.439L427.732 106.148L430.554 111H427.829L426.133 108.012L424.445 111H421.712L424.533 106.148L421.835 101.49H424.56L426.124 104.329Z" fill="black"/>
<path d="M336.869 30.2031L340.156 39.4844L343.425 30.2031H346.888V43H344.243V39.502L344.506 33.4639L341.052 43H339.242L335.796 33.4727L336.06 39.502V43H333.423V30.2031H336.869Z" fill="black"/>
<path d="M354.835 43C354.718 42.7715 354.633 42.4873 354.58 42.1475C353.965 42.833 353.165 43.1758 352.18 43.1758C351.249 43.1758 350.475 42.9062 349.86 42.3672C349.251 41.8281 348.946 41.1484 348.946 40.3281C348.946 39.3203 349.318 38.5469 350.062 38.0078C350.812 37.4688 351.893 37.1963 353.305 37.1904H354.474V36.6455C354.474 36.2061 354.36 35.8545 354.132 35.5908C353.909 35.3271 353.554 35.1953 353.068 35.1953C352.64 35.1953 352.304 35.2979 352.057 35.5029C351.817 35.708 351.697 35.9893 351.697 36.3467H349.157C349.157 35.7959 349.327 35.2861 349.667 34.8174C350.007 34.3486 350.487 33.9824 351.108 33.7188C351.729 33.4492 352.427 33.3145 353.2 33.3145C354.372 33.3145 355.301 33.6104 355.986 34.2021C356.678 34.7881 357.023 35.6143 357.023 36.6807V40.8027C357.029 41.7051 357.155 42.3877 357.401 42.8506V43H354.835ZM352.734 41.2334C353.109 41.2334 353.455 41.1514 353.771 40.9873C354.088 40.8174 354.322 40.5918 354.474 40.3105V38.6758H353.525C352.254 38.6758 351.577 39.1152 351.495 39.9941L351.486 40.1436C351.486 40.46 351.597 40.7207 351.82 40.9258C352.043 41.1309 352.347 41.2334 352.734 41.2334Z" fill="black"/>
<path d="M364.618 35.8721C364.272 35.8252 363.968 35.8018 363.704 35.8018C362.743 35.8018 362.113 36.127 361.814 36.7773V43H359.274V33.4902H361.674L361.744 34.624C362.254 33.751 362.96 33.3145 363.862 33.3145C364.144 33.3145 364.407 33.3525 364.653 33.4287L364.618 35.8721Z" fill="black"/>
<path d="M365.604 38.1748C365.604 36.7158 365.949 35.541 366.641 34.6504C367.338 33.7598 368.276 33.3145 369.453 33.3145C370.496 33.3145 371.308 33.6719 371.888 34.3867L371.993 33.4902H374.296V42.6836C374.296 43.5156 374.106 44.2393 373.725 44.8545C373.35 45.4697 372.82 45.9385 372.134 46.2607C371.448 46.583 370.646 46.7441 369.726 46.7441C369.029 46.7441 368.349 46.6035 367.687 46.3223C367.025 46.0469 366.524 45.6895 366.184 45.25L367.309 43.7031C367.942 44.4121 368.709 44.7666 369.612 44.7666C370.285 44.7666 370.81 44.585 371.185 44.2217C371.56 43.8643 371.747 43.3545 371.747 42.6924V42.1826C371.161 42.8447 370.391 43.1758 369.436 43.1758C368.293 43.1758 367.367 42.7305 366.658 41.8398C365.955 40.9434 365.604 39.7568 365.604 38.2803V38.1748ZM368.144 38.3594C368.144 39.2207 368.317 39.8975 368.662 40.3896C369.008 40.876 369.483 41.1191 370.086 41.1191C370.86 41.1191 371.413 40.8291 371.747 40.249V36.25C371.407 35.6699 370.86 35.3799 370.104 35.3799C369.494 35.3799 369.014 35.6289 368.662 36.127C368.317 36.625 368.144 37.3691 368.144 38.3594Z" fill="black"/>
<path d="M379.237 43H376.688V33.4902H379.237V43ZM376.538 31.0293C376.538 30.6484 376.664 30.335 376.916 30.0889C377.174 29.8428 377.523 29.7197 377.962 29.7197C378.396 29.7197 378.742 29.8428 378.999 30.0889C379.257 30.335 379.386 30.6484 379.386 31.0293C379.386 31.416 379.254 31.7324 378.991 31.9785C378.733 32.2246 378.39 32.3477 377.962 32.3477C377.535 32.3477 377.189 32.2246 376.925 31.9785C376.667 31.7324 376.538 31.416 376.538 31.0293Z" fill="black"/>
<path d="M383.975 33.4902L384.054 34.5889C384.734 33.7393 385.645 33.3145 386.788 33.3145C387.796 33.3145 388.546 33.6104 389.038 34.2021C389.53 34.7939 389.782 35.6787 389.794 36.8564V43H387.254V36.918C387.254 36.3789 387.136 35.9893 386.902 35.749C386.668 35.5029 386.278 35.3799 385.733 35.3799C385.018 35.3799 384.482 35.6846 384.125 36.2939V43H381.585V33.4902H383.975Z" fill="black"/>
<path d="M405.379 38.333C405.379 39.8564 405.054 41.0459 404.403 41.9014C403.753 42.751 402.845 43.1758 401.679 43.1758C400.647 43.1758 399.824 42.7803 399.209 41.9893L399.095 43H396.81V29.5H399.35V34.3428C399.936 33.6572 400.706 33.3145 401.661 33.3145C402.821 33.3145 403.729 33.7422 404.386 34.5977C405.048 35.4473 405.379 36.6455 405.379 38.1924V38.333ZM402.839 38.1484C402.839 37.1875 402.687 36.4873 402.382 36.0479C402.077 35.6025 401.623 35.3799 401.02 35.3799C400.211 35.3799 399.654 35.7109 399.35 36.373V40.126C399.66 40.7939 400.223 41.1279 401.037 41.1279C401.857 41.1279 402.396 40.7236 402.654 39.915C402.777 39.5283 402.839 38.9395 402.839 38.1484Z" fill="black"/>
<path d="M406.857 38.1572C406.857 37.2139 407.038 36.373 407.402 35.6348C407.765 34.8965 408.286 34.3252 408.966 33.9209C409.652 33.5166 410.446 33.3145 411.348 33.3145C412.631 33.3145 413.677 33.707 414.486 34.4922C415.3 35.2773 415.754 36.3438 415.848 37.6914L415.865 38.3418C415.865 39.8008 415.458 40.9727 414.644 41.8574C413.829 42.7363 412.737 43.1758 411.365 43.1758C409.994 43.1758 408.899 42.7363 408.078 41.8574C407.264 40.9785 406.857 39.7832 406.857 38.2715V38.1572ZM409.397 38.3418C409.397 39.2441 409.567 39.9355 409.906 40.416C410.246 40.8906 410.733 41.1279 411.365 41.1279C411.981 41.1279 412.461 40.8936 412.807 40.4248C413.153 39.9502 413.325 39.1943 413.325 38.1572C413.325 37.2725 413.153 36.5869 412.807 36.1006C412.461 35.6143 411.975 35.3711 411.348 35.3711C410.727 35.3711 410.246 35.6143 409.906 36.1006C409.567 36.5811 409.397 37.3281 409.397 38.3418Z" fill="black"/>
<path d="M421.158 36.3291L422.757 33.4902H425.473L422.766 38.1484L425.587 43H422.863L421.166 40.0117L419.479 43H416.746L419.567 38.1484L416.869 33.4902H419.593L421.158 36.3291Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

21
public/tutorial/4/README.md
View File

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

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

4
public/tutorial/README.md
View File

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