diff --git a/public/tutorial/2/demo.html b/public/demo/1.html similarity index 100% rename from public/tutorial/2/demo.html rename to public/demo/1.html diff --git a/public/tutorial/1/README.md b/public/tutorial/1/README.md deleted file mode 100644 index 70477c4..0000000 --- a/public/tutorial/1/README.md +++ /dev/null @@ -1,126 +0,0 @@ -# 标题和段落 - -> [!NOTE] -> 这是测试的版本 - -## 标题 - -`h1` 到 `h6`，一共六级标题。 - -```html -

标题 1

-

标题 2

-

标题 3

-

标题 4

-
标题 5
-
标题 6
-``` - -给六个标题字体颜色换一下，注意：`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 -

- 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。 -

-``` - -用 `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 -

白鹭

-

白鹭是一首精巧的诗。

-

色素的配合，身段的大小，一切都很适宜。

-

白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。

-

然而白鹭却因为它的常见，而被人忘却了它的美。

-

那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。

-``` - -## 总结 -### HTML -标题：h1 到 h6 -段落：p - -### CSS -color 字体颜色 -font-size 字体大小 -line-height 行间距 -text-indent: 2em; 表示首行缩进2字符 diff --git a/public/tutorial/2/README.md b/public/tutorial/2/README.md deleted file mode 100644 index 31bc227..0000000 --- a/public/tutorial/2/README.md +++ /dev/null @@ -1,87 +0,0 @@ -# 盒模型（1）DIV+CSS - -> [!NOTE] -> 这是测试的版本 - -## div 标签 - -HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块级元素，可以嵌套使用。div 标签不像 `h1` `p` 有默认的样式， div 标签没有自带样式，这点很好。比如： - -```html -
Web前端开发工程师
-``` - -嵌套使用： - -```html -
-
Web前端开发工程师
-
岗位要求
-
1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；
-
- 2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等； -
-
3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；
-
-``` - -注意标签的闭合和层级，可以看到每个 div 标签都是占一行，这就是块级元素的意思。 - -## class 类名 - -我们在 HTML 标签上可以写 `class` 类名来命名每个标签，方便写 CSS，比如： - -```html -
-
Web前端开发工程师
-
岗位要求
-
- 1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准； -
-
- 2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等； -
-
3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；
-
-``` - -最外层的 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) diff --git a/public/tutorial/3/README.md b/public/tutorial/3/README.md deleted file mode 100644 index 36b27d3..0000000 --- a/public/tutorial/3/README.md +++ /dev/null @@ -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 -
DeepSeek V3
-``` - -```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 -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -```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`，你可以直观地感受到它们对布局的影响。 diff --git a/public/tutorial/3/box.svg b/public/tutorial/3/box.svg deleted file mode 100644 index 4559515..0000000 --- a/public/tutorial/3/box.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/tutorial/4/README.md b/public/tutorial/4/README.md deleted file mode 100644 index be7c576..0000000 --- a/public/tutorial/4/README.md +++ /dev/null @@ -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 - -演示... - -## 查看盒模型 - -演示... - -（未完待续...） diff --git a/public/tutorial/4/image.png b/public/tutorial/4/image.png deleted file mode 100644 index 4ddf1bd..0000000 Binary files a/public/tutorial/4/image.png and /dev/null differ diff --git a/public/tutorial/README.md b/public/tutorial/README.md deleted file mode 100644 index 8de5ba2..0000000 --- a/public/tutorial/README.md +++ /dev/null @@ -1,4 +0,0 @@ -1 标题和段落 -2 盒模型（1） -3 盒模型（2） -4 盒模型（3）