From f01b2028a1247b8506b054db1dfa0908196f459f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=88=90=E8=B1=AA?= <1400383615@qq.com>
Date: Sun, 20 Oct 2024 17:57:32 +0800
Subject: [PATCH] =?UTF-8?q?20241017=E6=B5=AE=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20241009-\346\270\220\345\217\230.md"     |  73 ++++
 ...76\351\200\211\346\213\251\345\231\250.md" |  86 +++++
 .../20241014-\344\274\252\347\261\273.md"     |  94 +++++
 ...47\347\233\222\346\250\241\345\236\213.md" |  43 +++
 .../20241017-\346\265\256\345\212\250.md"     | 180 ++++++++++
 .../20241009-\346\270\220\345\217\230.html"   |  42 +++
 ...\351\200\211\346\213\251\345\231\250.html" | 328 ++++++++++++++++++
 .../1.html"                                   |  46 +++
 .../2.html"                                   |  24 ++
 .../3.html"                                   |  26 ++
 .../4.html"                                   |  20 ++
 .../5.html"                                   |  32 ++
 .../6.html"                                   |  27 ++
 ...\347\233\222\346\250\241\345\236\213.html" |  35 ++
 .../20241017-\346\265\256\345\212\250.html"   | 214 ++++++++++++
 15 files changed, 1270 insertions(+)
 create mode 100644 "\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241009-\346\270\220\345\217\230.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241016-\347\233\222\346\250\241\345\236\213.html"
 create mode 100644 "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"

diff --git "a/\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md" "b/\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md"
new file mode 100644
index 00000000..50b83b78
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md"
@@ -0,0 +1,73 @@
+### 渐变
+#### 线性渐变
+
+```javascript
+// background-image:liner-gradient(方向(默认从上到下，可省略),起始颜色,终止颜色)
+background-image:liner-gradient(to right,red,green)
+```
+
+练习：
+
+效果图：
+![简单图床 - EasyImage](https://www.yuzs.love/i/2024/10/09/10l02rg.png)
+代码展示：
+```javascript
+.d1{
+    background-image: linear-gradient(30deg,yellow 0%,yellow 25%,blue 25%,
+    blue 50%,red 50%,red 75%,green 75%,green 100%);
+    }
+```
+效果图：
+![简单图床 - EasyImage](https://www.yuzs.love/i/2024/10/09/10l96gk.png)
+代码展示：
+```javascript
+.d2{
+            background-image: repeating-linear-gradient(to right,black 0px,black 150px,white 150px,white 300px);
+        }
+```
+
+效果图：
+![简单图床 - EasyImage](https://www.yuzs.love/i/2024/10/09/10mfft3.png)
+代码展示：
+```javascript
+.d3{
+            text-align: center;
+            font-weight: bolder;
+            font-size: 50px;
+            background-image: linear-gradient(30deg,orange 0px,orange 130px,blue 130px,blue 200px,red 200px,red 600px);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+```
+
+
+#### 径向渐变
+
+```javascript
+// background-image: radial-gradient(辐射半径大小,中心位置,起始颜色,终止颜色)
+background-image: radial-gradient(100px at top,red,green)
+```
+
+#### 重复线性渐变
+
+```javascript
+// background-image: repeating-linear-gradient()
+background-image: repeating-linear-gradient(to left top, blue,red)
+```
+
+效果图：
+![简单图床 - EasyImage](https://www.yuzs.love/i/2024/10/09/10mhsop.png)
+代码展示：
+```javascript
+.d4{
+            height: 400px;
+            background-image: repeating-linear-gradient(to right,rgb(255,150,138) 0px,rgb(255,150,138) 24px,white 24px,white 48px)
+            ,repeating-linear-gradient(to bottom,rgb(255,150,138) 0px,rgb(255,150,138) 24px,white 24px,white 48px);
+            background-blend-mode: multiply;
+        }
+```
+
+#### 重复径向渐变
+```javascript
+background-image: repeating-radial-gradient(extent-keyword, color-stop)
+```
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md" "b/\346\235\250\346\210\220\350\261\252/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 00000000..c23174a8
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,86 @@
+1. 元素选择器：通过元素的名称来选择元素。
+
+```css
+p {
+    color: blue;
+}
+这会选择所有的<p>元素，并将其文字颜色设置为蓝色。
+```
+2. 类选择器：通过元素的class属性来选择元素。
+
+```css
+.highlight {
+    background-color: yellow;
+}
+这会选择所有具有class="highlight"的元素，并为它们设置黄色背景。
+```
+3. ID选择器：通过元素的id属性来选择元素。ID在同一个页面中应该是唯一的。
+
+```css
+#header {
+    font-size: 24px;
+}
+这会选择ID为header的元素，并将其字体大小设置为24像素。
+```
+4. 属性选择器：通过元素的属性来选择元素。
+
+```css
+input[type="text"] {
+    border: 1px solid #ccc;
+}
+这会选择所有类型为text的<input>元素，并为它们设置边框。
+```
+5. 伪类选择器：用于选择处于特定状态的元素。
+
+```css
+a:hover {
+    color: red;
+}
+这会选择所有鼠标悬停时的<a>元素，并将其文字颜色设置为红色。
+```
+6. 后代选择器：通过空格分隔，可以选取特定元素内部的后代元素。
+
+```css
+div p {
+    margin: 10px;
+}
+这会选择所有在<div>元素内部的<p>元素，并为它们设置外边距。
+```
+7. 子选择器：通过>符号选择特定元素的直接子元素。
+
+```css
+ul > li {
+    list-style: none;
+}
+这会选择所有直接位于<ul>元素内部的<li>元素，并移除它们的列表样式。
+```
+8. 相邻兄弟选择器：通过+符号选择紧随其后的兄弟元素。
+
+```css
+h1 + p {
+    font-weight: bold;
+}
+这会选择所有紧随<h1>元素之后的<p>元素，并使它们的文字加粗。
+```
+9. 通用兄弟选择器：通过~符号选择后续的所有兄弟元素。
+
+```css
+h1 ~ p {
+    font-style: italic;
+}
+这会选择所有在<h1>元素之后的<p>元素，并使它们的文字斜体。
+```
+10. 序选择器
+
+```css
+    ul li:first-child {
+        color: red;
+    }
+设置无序列表<ul>中的第一个<li>为红色：
+```
+```css
+ul li:last-child {
+    color: blue;
+}
+设置无序列表<ul>中的最后一个<li>为红色：
+```
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md" "b/\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md"
new file mode 100644
index 00000000..c5aed343
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md"
@@ -0,0 +1,94 @@
+1. `:hover`：鼠标悬停在元素上时。
+
+```css
+a:hover {
+    color: red;
+}
+```
+2. `:active`：元素被激活（如点击）时。
+
+```css
+button:active {
+    background-color: blue;
+}
+```
+2. `:focus`：元素获得焦点时（通常用于表单元素）。
+
+```css
+input:focus {
+    border-color: green;
+}
+```
+3. `:link`：未访问的链接。
+
+```css
+a:link {
+    color: blue;
+}
+```
+4. `:visited`：已访问的链接。
+
+```css
+a:visited {
+    color: purple;
+}
+```
+5. `:first-child`：选择作为其父元素的第一个子元素的元素。
+
+```css
+ul li:first-child {
+    font-weight: bold;
+}
+```
+6. `:last-child`：选择作为其父元素的最后一个子元素的元素。
+
+```css
+ul li:last-child {
+    font-style: italic;
+}
+```
+7. `:nth-child(n)`：选择作为其父元素的第 n 个子元素的元素。
+
+```css
+ul li:nth-child(2) {
+    color: red;
+}
+```
+8. `:nth-last-child(n)`：选择作为其父元素的倒数第 n 个子元素的元素。
+
+```css
+ul li:nth-last-child(2) {
+    color: green;
+}
+```
+9. `:not(selector)`：排除选择器选择的元素。
+
+```css
+div:not(.container) {
+    background-color: yellow;
+}
+```
+10. `:checked`：用于选择被勾选的单选按钮或复选框。
+
+```css
+input[type="checkbox"]:checked {
+    background-color: lightgreen;
+}
+```
+11. `:enabled` 和 `:disabled`：用于选择可用或不可用的表单元素。
+
+```css
+input:enabled {
+    background-color: lightblue;
+}
+input:disabled {
+    background-color: lightgray;
+}
+```
+12. `:empty`：选择没有子元素的元素。
+
+```css
+p:empty {
+    display: none;
+}
+```
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md" "b/\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
new file mode 100644
index 00000000..c1f91e47
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
@@ -0,0 +1,43 @@
+### css的继承性
++ CSS（层叠样式表）的继承性是指某些CSS属性可以被HTML元素的子元素继承。这意味着，如果你为一个父元素定义了某个CSS属性，那么这个属性的值也会应用到它的子元素上，除非子元素有自己更具体的样式规则。
++ 以下是一些常见的可以继承的CSS属性：
+    + font-family - 字体族
+    + font-size - 字体大小
+    + font-weight - 字体粗细
+    + font-style - 字体风格（如斜体）
+    + text-align - 文本对齐方式
+    + text-indent - 文本缩进
+    + text-transform - 文本转换（如大写、小写）
+    + letter-spacing - 字符间距
+    + word-spacing - 单词间距
+    + line-height - 行高
+    + color - 文本颜色
+    + visibility - 元素的可见性
+    + cursor - 鼠标光标样式
++ 而有一些属性则不能被继承，它们只会应用于设置它们的元素本身，例如：
+    + width 和 height - 元素的宽和高
+    + margin 和 padding - 外边距和内边距
+    + border - 边框样式
+    + background - 背景样式
+    + float - 浮动属性
+    + display - 显示类型
+
+### css的层叠性
++ 计算权重
++ 多个选择器选择同一元素
+    1. id 选择器>类选择器、属性选择器、伪类选择器>标签选择器、伪元素选择器
+    2. 若权重相同时，采用就近原则
+    3. `!important`标记：优先级最高
+
+### 盒模型
+1. 内容`Content`：盒子的内部区域，包含元素的文本、图片、视频等实际内容。
+由width和height属性控制。
+2. 内边距`Padding`：内容区域周围的空间，可以看作是内容与边框之间的填充。
+由padding-top、padding-right、padding-bottom、padding-left属性控制，或者使用padding简写属性。
+3. 边框`Border`：围绕内边距和内容的线。
+由border-width、border-style、border-color属性控制，或者使用border简写属性。
+4. 外边距`Margin`：边框外的空间，用于在元素之间创建距离。
+由margin-top、margin-right、margin-bottom、margin-left属性控制，或者使用margin简写属性。
+5. 盒模型的总宽度和高度计算方式如下：
+    + 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
+    + 总高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
diff --git "a/\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md" "b/\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md"
new file mode 100644
index 00000000..57061413
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md"
@@ -0,0 +1,180 @@
+### 行内元素
+1. 定义:行内元素在页面上按照文本的顺序排列，它们不会以新行开始。行内元素的宽度通常由其内容决定，而高度则由行高决定。行内元素不会独占一行，它们会与其他行内元素并排显示。
+
+2. 常见的行内元素：
+```html
+<span>
+<a>
+<img>
+<strong>
+<em>
+<label>
+```
+3. 行内元素的特点：
+    + 不能设置width和height属性
+    + margin和padding属性在水平方向上有效，但在垂直方向上通常无效（除了padding-top和padding-bottom）
+    + 不能设置float属性
+### 块级元素
+1. 定义:块级元素在页面上以块的形式显示，它们通常会以新行开始。块级元素的宽度默认填满其父元素的宽度，除非指定了宽度。块级元素的高度由内容决定，但可以通过设置height属性来改变
+
+2. 常见的块级元素：
+```html
+<div>
+<p>
+<h1>~<h6>
+<ul>
+<ol>
+<li>
+<table>
+```
+
+3. 块级元素的特点：
+    + 可以设置width和height属性
+    + margin和padding属性在所有方向上都有效
+    + 可以设置float属性
+
+### 转换元素类型
+`display: block;`：将元素设置为块级元素
+`display: inline;`：将元素设置为行内元素
+`display: inline-block;`：将元素设置为行内块级元素，这意味着元素在行内显示，但可以设置宽度和高度
+
+### 基本的CSS浮动属性：
+
+`float: left;`：元素向左浮动
+`float: right;`：元素向右浮动
+`float: none;`：元素不浮动（默认值）
+
+注：
+使用clear属性：可以设置为left、right或both，来防止元素环绕在浮动元素周围
+使用额外的清除元素：在浮动元素之后添加一个空的块级元素，并设置`·`clear: both`;
+使用overflow属性：给包含浮动元素的父元素设置`overflow: auto;`或`overflow: hidden;`可以自动清除内部的浮动
+
+### 练习
+![简单图床 - EasyImage](https://www.yuzs.love/i/2024/10/20/ug5n5l.png)
+
+代码演示：
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all{
+            height:600px;
+            width: 970px;
+            margin: auto;
+        }
+        .top{
+            width: 970px;
+            height: 103px;
+            margin-bottom: 8px;
+            float: left;
+        }
+        .top1{
+            width: 277px;
+            height: 103px;
+            float: left;
+            background-color: red;
+        }
+        .top2{
+            width: 137px;
+            height: 49px;
+            float: right;
+            background-color: green;
+        }
+        .top3{
+            width: 679px;
+            height: 46px;
+            float: right;
+            background-color: green;
+            margin-top: 8px;
+        }
+        .center{
+            width: 970px;
+            height: 435px;
+            float: left;
+        }
+        .center1{
+            width: 310px;
+            height: 435px;
+            background-color: yellow;
+            float: left;
+        }
+        .center2{
+            width: 660px;
+            height: 410px;
+            float: left;
+        }
+        .ce1{
+            width: 450px;
+            height: 410px;
+            margin-left: 10px;
+            float: left;
+        }
+        .c1{
+            width: 450px;
+            height: 240px;
+            background-color: rgb(135,207,235);
+            float: left;
+            margin-bottom: 10px;
+        }
+        .c2{
+            width: 450px;
+            height: 110px;
+            float: left;
+            background-color: rgb(135,207,235);
+            margin-bottom: 10px;
+        }
+        .c3{
+            width: 450px;
+            height: 30px;
+            float: left;
+            background-color: rgb(135,207,235);
+        }
+        .c4{
+            width: 190px;
+            height: 400px;
+            background-color: purple;
+            margin-left: 10px;
+            float: left;
+        }
+        .center3{
+            width: 650px;
+            height: 25px;
+            float: right;
+            background-color: blue;
+        }
+        .bottom{
+            height: 44px;
+            width: 970px;
+            float: left;
+            background-color: rgb(218,165,32);
+            margin-top: 10px;
+        }
+        </style>
+</head>
+<body>
+    <div class="all">
+        <div class="top">
+            <div class="top1">log</div>
+            <div class="top2">语言选择</div>
+            <div class="top3">导航栏</div>
+        </div>
+        <div class="center">
+            <div class="center1"></div>
+            <div class="center2">
+                <div class="ce1">
+                    <div class="c1"></div>
+                    <div class="c2"></div>
+                    <div class="c3"></div>
+                </div>
+                <div class="c4"></div>
+            </div>
+            <div class="center3"></div>
+        </div>
+        <div class="bottom"></div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241009-\346\270\220\345\217\230.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241009-\346\270\220\345\217\230.html"
new file mode 100644
index 00000000..20a73123
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241009-\346\270\220\345\217\230.html"
@@ -0,0 +1,42 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div{
+            width: 600px;
+            height: 60px;
+            margin-top: 10px;
+            border: 1px solid;
+        }
+        .d1{
+            background-image: linear-gradient(30deg,yellow 0%,yellow 25%,blue 25%,
+            blue 50%,red 50%,red 75%,green 75%,green 100%);
+        }
+        .d2{
+            background-image: repeating-linear-gradient(to right,black 0px,black 150px,white 150px,white 300px);
+        }
+        .d3{
+            text-align: center;
+            font-weight: bolder;
+            font-size: 50px;
+            background-image: linear-gradient(30deg,orange 0px,orange 130px,blue 130px,blue 200px,red 200px,red 600px);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .d4{
+            height: 400px;
+            background-image: repeating-linear-gradient(to right,rgb(255,150,138) 0px,rgb(255,150,138) 24px,white 24px,white 48px)
+            ,repeating-linear-gradient(to bottom,rgb(255,150,138) 0px,rgb(255,150,138) 24px,white 24px,white 48px);
+            background-blend-mode: multiply;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1"></div>
+    <div class="d2"></div>
+    <div class="d3">中华人民共和国</div>
+    <div class="d4"></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html"
new file mode 100644
index 00000000..8d33c507
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html"
@@ -0,0 +1,328 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 选择所有的plate */
+        .table plate{
+            color: pink;
+        }
+        /* 选择所有的bento*/
+        .table bento{
+            color: blue;
+        }
+        /* 选择id为fancy的plate*/
+        plate#fancy{
+            color: green;
+        }
+        /* 选择plate里面的apple */
+        .table plate apple{
+            color: red;
+        }
+        /* 选择id为fancy的plate中的pickle */
+        plate#fancy pickle{
+            color: brown;
+        }
+        /* 选择small的apple */
+        .table apple.small{
+            color: aqua;
+        }
+        /* 选择small的orange */
+        .table orange.small{
+            color: azure;
+        }
+        /* 选择bento中的small orange */
+        .table bento orange.small{
+            color: black;
+        } 
+        /* 选择所有的plate和bento */
+        plate,bento{
+            color: blueviolet;
+        }
+        /* 选择所有的物品 */
+        .table{
+            color: aliceblue;
+        }
+        /* 选择plate中的所有东西 */
+        .table plate{
+            color: palegoldenrod;
+        }
+        /* 选择plate的下一个apple */
+        .table plate>apple{
+            color: pink;
+        }
+        /* 选择bento后面的所有pickle */
+        bento+pickle{
+            color: black;
+        }
+        /* 选择直接在plate中的apple */
+        plate apple{
+            color: beige;
+        }
+        /* 选择plate中的第一个orange =======*/
+        .table plate > orange{
+            color: pink;
+        }
+        /* 选择plate中的apple、pickle */
+        plate apple,plate pickle{
+            color: aliceblue;
+        }
+        /* 选择small的apple、pickle */
+        apple.small , pickle.small{
+            color: antiquewhite;
+        }
+        /* 选择第3个plate */
+        .table>plate>plate>plate{
+            color: rebeccapurple;
+        }
+        /* 选择第一个bento ==========*/
+        .table bento:first-child{
+            color: aqua;
+        }
+        /* 选择第一个apple */
+        .table apple:first-child{
+            color: black;
+        }
+        /* 选择序号为偶数的plate */
+    </style>
+</head>
+<body>
+    <div class="table">
+        <plate />
+        <plate />
+    </div>
+    <!-- ================================================ -->
+    <div class="table">
+        <bento />
+        <plate />
+        <bento />
+    </div>
+    <!-- ================================================= -->
+    <div class="table">
+        <plate id="fancy" />
+        <plate />
+        <bento />
+    </div>
+    <!-- ============================================== -->
+    <div class="table">
+        <bento />
+        <plate>
+            <apple />
+        </plate>
+        <apple />
+    </div>
+    <!-- ===================================================== -->
+    <div class="table">
+        <bento>
+            <orange />
+        </bento>
+        <plate id="fancy">
+            <pickle />
+        </plate>
+        <plate>
+            <pickle />
+        </plate>
+    </div>
+    <!-- ======================================================== -->
+    <div class="table">
+        <apple />
+        <apple class="small" />
+        <plate>
+            <apple class="small" />
+        </plate>
+        <plate />
+    </div>
+    <!-- ========================================================= -->
+    <div class="table">
+        <apple />
+        <apple class="small" />
+        <bento>
+            <orange class="small" />
+        </bento>
+        <plate>
+            <orange />
+        </plate>
+        <plate>
+            <orange class="small" />
+        </plate>
+    </div>
+    <!-- ===================================================== -->
+    <div class="table">
+        <bento>
+            <orange />
+        </bento>
+        <orange class="small" />
+        <bento>
+            <orange class="small" />
+        </bento>
+        <bento>
+            <apple class="small" />
+        </bento>
+        <bento>
+            <orange class="small" />
+        </bento>
+    </div>
+    <!-- ======================================== -->
+    <div class="table">
+        <pickle class="small" />
+        <pickle />
+        <plate>
+            <pickle />
+        </plate>
+        <bento>
+            <pickle />
+        </bento>
+        <plate>
+            <pickle />
+        </plate>
+        <pickle />
+        <pickle class="small" />
+    </div> 
+    <!-- ======================================================== -->
+        <div class="table">
+            <apple />
+            <plate>
+                <orange class="small" />
+            </plate>
+            <bento />
+            <bento>
+                <orange />
+            </bento>
+            <plate id="fancy" />
+        </div>
+        <!-- ==================================== -->
+        <div class="table">
+            <plate id="fancy">
+                <orange class="small" />
+            </plate>
+            <plate>
+                <pickle />
+            </plate>
+            <apple class="small" />
+            <plate>
+                <apple />
+            </plate>
+        </div>
+        <!-- =============================== -->
+        <div class="table">
+            <bento>
+                <apple class="small" />
+            </bento>
+            <plate />
+            <apple class="small" />
+            <plate />
+            <apple />
+            <apple class="small" />
+            <apple class="small" />
+        </div>
+        <!-- ============================== -->
+        <div class="table">
+            <pickle />
+            <bento>
+                <orange class="small" />
+            </bento>
+            <pickle class="small" />
+            <pickle />
+            <plate>
+                <pickle />
+            </plate>
+            <plate>
+                <pickle class="small" />
+            </plate>
+        </div>
+        <!-- ============================== -->
+        <div class="table">
+            <plate>
+                <bento>
+                    <apple />
+                </bento>
+            </plate>
+            <plate>
+                <apple />
+            </plate>
+            <plate />
+            <apple />
+            <apple class="small" />
+        </div>
+        <!-- ========================== -->
+        <div class="table">
+            <bento />
+            <plate />
+            <plate>
+                <orange />
+                <orange />
+                <orange />
+            </plate>
+            <pickle class="small" />
+        </div>
+        <!-- ======================================================= -->
+        <div class="table">
+            <plate>
+                <apple />
+            </plate>
+            <plate>
+                <pickle />
+            </plate>
+            <bento>
+                <pickle />
+            </bento>
+            <plate>
+                <orange class="small" />
+                <orange />
+            </plate>
+            <pickle class="small" />
+        </div>
+        <!-- ========================================== -->
+        <div class="table">
+            <plate id="fancy">
+                <apple class="small" />
+            </plate>
+            <plate />
+            <plate>
+                <orange class="small" />
+                <orange />
+            </plate>
+            <pickle class="small" />
+        </div>
+        <!-- ==================================== -->
+        <div class="table">
+            <plate />
+            <plate />
+            <plate />
+            <plate id="fancy" />
+        </div>
+        <!-- =============================================== -->
+        <div class="table">
+            <plate />
+            <bento />
+            <plate>
+                <orange />
+                <orange />
+                <orange />
+            </plate>
+            <bento />
+        </div>
+        <!-- ========================================== -->
+        <div class="table">
+            <orange class="small" />
+            <apple />
+            <apple class="small" />
+            <apple />
+            <apple class="small" />
+            <plate>
+                <orange class="small" />
+                <orange />
+            </plate>
+        </div>
+        <!-- ================================= -->
+        <div class="table">
+            <plate />
+            <plate />
+            <plate />
+            <plate />
+            <plate id="fancy" />
+            <plate />
+        </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html"
new file mode 100644
index 00000000..4ad03fb6
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html"
@@ -0,0 +1,46 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <!-- 请写出CSS规则，使得.main类中的<section>和<article>元素中的所有<h1>和<h2>标签的字体变为粗体， 
+        并且<aside>类中的<h3>标签的字体变为斜体。 -->
+  <style>
+    .main section h1,
+    .main section h2,
+    .main article h1,
+    .main article h3 {
+      font-weight: bolder;
+    }
+
+    aside h3 {
+      font-style: italic;
+    }
+
+  
+  </style>
+</head>
+
+<body>
+  <div class="main">
+    <section id="intro">
+      <h1>Welcome</h1>
+      <p>This is the introduction section.</p>
+    </section>
+    <article class="post">
+      <h2>Post Title</h2>
+      <p>Post content...</p>
+      <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+      </ul>
+    </article>
+    <aside class="sidebar">
+      <h3>Sidebar Title</h3>
+      <p>Sidebar content...</p>
+    </aside>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html"
new file mode 100644
index 00000000..f17f0f0c
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html"
@@ -0,0 +1,24 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 请写出CSS规则，使得所有带有required属性的<input>元素在获得焦点时边框变为蓝色，
+        并且所有带有placeholder属性的<input>元素的占位符文本颜色为灰色。 */
+        input[required]:focus{
+            border:3px solid blue;
+        }
+        ::placeholder{
+            color: gray;
+        }
+    </style> 
+</head>
+<body>
+    <form>
+        <input type="text" name="username" required placeholder="Username">
+        <input type="email" name="email" required placeholder="Email">
+        <input type="submit" value="Submit">
+      </form>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html"
new file mode 100644
index 00000000..d7fee3af
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html"
@@ -0,0 +1,26 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <!-- 请写出CSS规则，使得导航栏中当前激活的链接（class="active"）的子元素<a>在悬停时背景色变为深灰色，并且所有<a>标签的子元素在悬停时字体颜色变为白色。 -->
+        <style>
+            a.active:hover{
+                background-color:grey;
+            }
+            a:hover{
+                color: white;
+            }
+        </style>
+</head>
+<body>
+    <nav>
+        <ul>
+          <li><a href="#home" class="active">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html"
new file mode 100644
index 00000000..c9ab8864
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html"
@@ -0,0 +1,20 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+    /* 请写出CSS规则，使得带有class="special-title"的<h2>标签的第一个字母首字下沉，并且首字下沉的字母颜色为金色，背景色为透明。 */
+        h2.special-title:first-child::first-letter{
+                color:gold;
+                font-size: 2em;
+                float: left;
+                margin: 0 .2em 0 0;
+                background-color: transparent;
+            }
+    </style>
+</head>
+<body>
+    <h2 class="special-title">Special Title</h2>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html"
new file mode 100644
index 00000000..5a494df9
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html"
@@ -0,0 +1,32 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 请写出CSS规则，使得.list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色，并且当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色。 */
+        .list li ul:first-child{
+            background-color: darkgray;
+        }
+        li:hover{
+            color: darkblue;
+        }
+    </style>
+</head>
+<body>
+    <ul class="list">
+        <li>Item 1
+          <ul>
+            <li>Subitem 1</li>
+            <li>Subitem 2</li>
+          </ul>
+        </li>
+        <li>Item 2
+          <ul>
+            <li>Subitem 3</li>
+            <li>Subitem 4</li>
+          </ul>
+        </li>
+      </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html"
new file mode 100644
index 00000000..312a031b
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html"
@@ -0,0 +1,27 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 请写出CSS规则，使得.container类中的<form>元素内的所有输入框在获得焦点时边框颜色变为绿色，并且所有标签<label>在悬停时背景色变为浅蓝色。 */
+        .container form :focus{
+            border: 3px solid green;
+        }
+        label:hover{
+            background-color:aqua;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <form>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name">
+          <label for="password">Password:</label>
+          <input type="password" id="password" name="password">
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241016-\347\233\222\346\250\241\345\236\213.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241016-\347\233\222\346\250\241\345\236\213.html"
new file mode 100644
index 00000000..c9d5dd9b
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241016-\347\233\222\346\250\241\345\236\213.html"
@@ -0,0 +1,35 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div.c1 {
+            width: 123px;
+            height: 123px;
+            margin: 0px;
+            border: 1px solid black;
+            padding: 20px 40px 20px 40px;
+        }
+
+        div.c2 {
+            width: 123px;
+            height: 123px;
+            padding: 20px 40px 20px 20px;
+            margin: 0px;
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+
+</body>
+<!-- 二十四 -->
+<!-- 3 -->
+<div class="c1"></div>
+<!-- 4 -->
+<div class="c2"></div>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
new file mode 100644
index 00000000..0589369c
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
@@ -0,0 +1,214 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all{
+            height:600px;
+            width: 970px;
+            margin: auto;
+        }
+        .top{
+            width: 970px;
+            height: 103px;
+            margin-bottom: 8px;
+            float: left;
+        }
+        .top1{
+            width: 277px;
+            height: 103px;
+            float: left;
+            background-color: red;
+        }
+        .top2{
+            width: 137px;
+            height: 49px;
+            float: right;
+            background-color: green;
+        }
+        .top3{
+            width: 679px;
+            height: 46px;
+            float: right;
+            background-color: green;
+            margin-top: 8px;
+        }
+        .center{
+            width: 970px;
+            height: 435px;
+            float: left;
+        }
+        .center1{
+            width: 310px;
+            height: 435px;
+            background-color: yellow;
+            float: left;
+        }
+        .center2{
+            width: 660px;
+            height: 410px;
+            float: left;
+        }
+        .ce1{
+            width: 450px;
+            height: 410px;
+            margin-left: 10px;
+            float: left;
+        }
+        .c1{
+            width: 450px;
+            height: 240px;
+            background-color: rgb(135,207,235);
+            float: left;
+            margin-bottom: 10px;
+        }
+        .c2{
+            width: 450px;
+            height: 110px;
+            float: left;
+            background-color: rgb(135,207,235);
+            margin-bottom: 10px;
+        }
+        .c3{
+            width: 450px;
+            height: 30px;
+            float: left;
+            background-color: rgb(135,207,235);
+        }
+        .c4{
+            width: 190px;
+            height: 400px;
+            background-color: purple;
+            margin-left: 10px;
+            float: left;
+        }
+        .center3{
+            width: 650px;
+            height: 25px;
+            float: right;
+            background-color: blue;
+        }
+        .bottom{
+            height: 44px;
+            width: 970px;
+            float: left;
+            background-color: rgb(218,165,32);
+            margin-top: 10px;
+        }
+        .two{
+            width: 600px;
+            height: 160px;
+            margin: auto;
+            border-top: 1px dashed rgb(213,213,213);
+            margin-top: 20px;
+        }
+        .two1{
+            width:600px;
+            height: 40px;
+            margin-top: 10px;
+            background-color: rgb(249,249,249);
+            float: left;
+        }
+        .t1{
+            width: 3px;
+            height: 20px;
+            background-color: rgb(0,19,94);
+            float: left;
+            margin-top: 8px;
+        }
+        .t2{
+            margin-top: 7px;
+            float: left;
+            padding-left: 6px;
+            color: rgb(0,24,81);
+            font-weight: bolder;
+        }
+        .t3{
+            float: right;
+            font-size: 12px;
+            padding-top: 21px;
+            color: rgb(0,24,81);
+            font-weight: bolder;
+        }
+        .two2{
+            background-image: linear-gradient(to right,rgb(0,24,81),red);
+            width: 600px;
+            height: 3px;
+            float: left;
+        }
+        .two3{
+            width: 600px;
+            height: 40px;
+            border-bottom: 1px dashed rgb(213,213,213);
+            float: left;
+        }
+        .tt1{
+            width: 0px;
+            height: 0px;
+            border: 5px solid transparent;
+	        border-left-color:rgb(0,24,81);
+            margin-top: 20px;
+            float: left;
+        }
+        .tt2{
+            float: left;
+            margin-top: 14px;
+            color: rgb(0,24,81);
+            font-weight: bold;
+            font-size: 15px;
+        }
+        .tt3{
+            float: right;
+            font-size: 15px;
+            font-weight: bold;
+            margin-top: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="all">
+        <div class="top">
+            <div class="top1">log</div>
+            <div class="top2">语言选择</div>
+            <div class="top3">导航栏</div>
+        </div>
+        <div class="center">
+            <div class="center1"></div>
+            <div class="center2">
+                <div class="ce1">
+                    <div class="c1"></div>
+                    <div class="c2"></div>
+                    <div class="c3"></div>
+                </div>
+                <div class="c4"></div>
+            </div>
+            <div class="center3"></div>
+        </div>
+        <div class="bottom"></div>
+    </div>
+    <div class="two">
+        <div class="two1">
+            <div class="t1"></div>
+            <div class="t2">通知公告</div>
+            <div class="t3">更多>></div>
+        </div>
+        <div class="two2"></div>
+        <div class="two3">
+            <div class="tt1"></div>
+            <div class="tt2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
+            <div class="tt3">2014年9月28日</div>
+        </div>
+        <div class="two3">
+            <div class="tt1"></div>
+            <div class="tt2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
+            <div class="tt3">2014年9月28日</div>
+        </div>
+        <div class="two3">
+            <div class="tt1"></div>
+            <div class="tt2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
+            <div class="tt3">2014年9月28日</div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee