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]
> 这是测试的版本
@@ -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)