diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 717766f..b6b1523 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -22,7 +22,8 @@ export default defineConfig({
     externalLinkIcon: true,
     nav: [
       { text: "首页", link: "/" },
-      { text: "基础知识", link: "/basic/manual/book/index.md" },
+      { text: "编程基础", link: "/basic/manual/book/index.md" },
+      { text: "Web前端", link: "/web/2-div/index.md" },
       { text: "计算机速成课", link: "/crash-course/00/index.md" },
     ],
     sidebar: {
@@ -40,11 +41,11 @@ export default defineConfig({
           text: "编程技巧",
           items: [
             { text: "Python 小抄", link: "/basic/tips/cheatsheet/index.md" },
-            {
-              text: "看懂报错信息",
-              link: "/basic/tips/error-message/index.md",
-            },
-            { text: "使用 AI", link: "/basic/tips/chatgpt/index.md" },
+            // {
+            //   text: "看懂报错信息",
+            //   link: "/basic/tips/error-message/index.md",
+            // },
+            // { text: "使用 AI", link: "/basic/tips/chatgpt/index.md" },
           ],
         },
         {
@@ -83,6 +84,7 @@ export default defineConfig({
         { text: "算法入门", link: "/crash-course/13/index.md" },
         { text: "......", link: "/crash-course/14/index.md" },
       ],
+      "/web": [{ text: "盒模型(1)", link: "/web/2-div/index.md" }],
     },
     outlineTitle: "大纲",
     sidebarMenuLabel: "目录",
diff --git a/web/2-div/index.md b/web/2-div/index.md
new file mode 100644
index 0000000..5531caf
--- /dev/null
+++ b/web/2-div/index.md
@@ -0,0 +1,77 @@
+# 盒模型（1）
+
+> [!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/1.html)
\ No newline at end of file