diff --git "a/\351\202\223\351\233\250\346\271\230/20241014-\344\274\252\347\261\273.md" "b/\351\202\223\351\233\250\346\271\230/20241014-\344\274\252\347\261\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..04a6af566cf189b7e149dae9ebdeb50d58ed1d80
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241014-\344\274\252\347\261\273.md"
@@ -0,0 +1,110 @@
+## 伪类
+**伪类**：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示
+### 动静态选择器
+#### 1.静态伪类
+- `:link` 超链接点击之前
+- `:visited` 链接被访问过之后
+
+PS：以上两种样式，只能用于超链接。
+
+#### 2.动态伪类
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+## 超链接a标签
+### 超链接的四种状态
+**重点**：
+- `:link`  	“链接”：超链接点击之前
+- `:visited` “访问过的”：链接被访问过之后
+- `:hover`	“悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+
+### 超链接的美化
+**`a{}`和`a:link{}`的区别：**
+
+ - `a{}`定义的样式针对所有的超链接(包括锚点)
+ - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
+
+## 作业
+### 二十二2.0
+```
+        /* 21. 选择序号为偶数的plate */
+        plate:nth-child(even){
+
+        }
+        /* 22. 选择从第3个plate(包括第3个)开始的每2个plate */
+        plate:nth-child(2n+3){
+
+        }
+        /* 23. 选择中间plate中的apple */
+        /* 24. 选择最后一个apple、最后一个orange */
+        apple:last-child,orange:last-child{
+
+        }
+        /* 25. 选择空的bento */        
+        /* 请写出CSS规则，使得.main类中的<section>和<article>元素中的所有<h1>和<h2>
+            标签的字体变为粗体，并且<aside>类中的<h3>标签的字体变为斜体 */
+        .main section h1,.main section h2,.main article h1,.main article h2{
+            font-weight:bold;
+        }
+        aside h3{
+            font-style: italic;
+        }
+```
+### 二十三
+```
+        /* 请写出CSS规则，使得.main类中的<section>和<article>元素中的所有<h1>和<h2>
+            标签的字体变为粗体，并且<aside>类中的<h3>标签的字体变为斜体 */
+        .main section h1,.main section h2,.main article h1,.main article h2{
+            font-weight:bold;
+        }
+        aside h3{
+            font-style: italic;
+        }
+
+        /* 请写出CSS规则，使得所有带有required属性的<input>元素在获得焦点时边框变为蓝色，
+        并且所有带有placeholder属性的<input>元素的占位符文本颜色为灰色。 */
+        input required:focus{
+            border: 2px blue solid;
+        }
+        input placeholder::-webkit-input-placeholder {  
+            color: gray; /* 占位符文本颜色变为灰色（适用于 WebKit/Chrome/Safari 浏览器） */  
+        }
+
+        /* 请写出CSS规则，使得导航栏中当前激活的链接（class="active"）
+        的子元素<a>在悬停时背景色变为深灰色，并且所有<a>标签的子元素在悬停时字体颜色变为白色。 */
+        a.active:hover{
+            background-color: #a9a9a9;
+        }
+        a:hover{
+            color: white;
+        }
+
+        /* 请写出CSS规则，使得带有class="special-title"的<h2>标签的第一个字母首字下沉
+            ，并且首字下沉的字母颜色为金色，背景色为透明。 */
+
+        h2.special-title::first-letter{
+            font-size: 2em; 
+            float: left;       
+            color: gold;
+            background-color: transparent;
+        }
+        /* 请写出CSS规则，使得.list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色，
+            并且当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色。 */
+        .list > li > ul:first-child{
+            background-color: #a9a9a9;
+        }
+        .list > li :hover > * {
+            color: darkblue;
+        }
+
+        /* 请写出CSS规则，使得.container类中的<form>元素内的所有输入框在获得焦点时边框颜色变为绿色，
+            并且所有标签<label>在悬停时背景色变为浅蓝色。 */
+        .container form select:focus {  
+            border-color: green; /* 获得焦点时边框颜色变为绿色 */  
+        }  
+        .container label:hover {  
+        background-color:lightblue; /* 悬停时背景色变为浅蓝色 */  
+        }
+```
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/20241016-\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\344\270\216\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\351\202\223\351\233\250\346\271\230/20241016-\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\344\270\216\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..da989c6ec76adcbb10b89d831dbd14470f7538f0
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241016-\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\344\270\216\347\233\222\345\255\220\346\250\241\345\236\213.md"
@@ -0,0 +1,100 @@
+## CSS的继承性
+定义：有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
+```
+<style>
+    div{
+        color：pink
+    }
+</style>
+</head>
+<body>
+    <div>{
+        <p>好困</p>
+        <p>好饿</p>
+    }
+</body>
+```
+上方代码中，我们给div标签增加粉色属性，div里的每一个子标签`<p>`都会增加粉色属性
+## CSS的层叠性
+### 层叠性 : 计算权重
+**层叠性：就是css处理冲突的能力**
+
+### 权重统计顺序
+- 1、id 选择器
+- 2、类选择器、属性选择器、伪类选择器
+- 3、标签选择器、伪元素选择器
+
+### 权重计算的问题(重点)
+- 选择上了，**数权重**，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在**后面**听谁的。
+- 没有选择上，通过继承影响的，**就近原则**，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
+
+### CSS样式表的冲突
+- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
+- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
+- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
+
+## 盒子模型
+**真实占有宽度 = 左border + 左padding + width + 右padding + 右border**
+### 盒子中的区域
+盒子的属性：
+- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
+- padding：内边距。
+- border：边框。
+- margin：外边距
+
+**`<body>`标签也有margin**
+
+### CSS盒模型和IE盒模型的区别
+- 在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+
+- IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
+
+### padding
+**padding区域也有颜色**
+#### 属性的写法
+小属性:
+```
+	padding-top: 30px;
+	padding-right: 20px;
+	padding-bottom: 40px;
+	padding-left: 100px;
+```
+综合属性:
+```
+padding:(上、右、下、左);
+```
+- 如果写了四个值，则顺序为：上、右、下、左。
+- 如果只写了三个值，则顺序为：上、右和左、下。
+- 如果只写了两个值，则顺序为：上和下、左和右。
+### border
+小属性:
+```
+border-width:10px、20px……;
+border-style:solid、dashed、dotted……;
+border-color:blue、yellow……;
+```
+综合属性:
+```
+border:1px solid red;
+```
+
+## 作业
+```
+    .div{
+        width: 123px;
+        height: 123px;
+        padding: 20px 40px;
+        border: 1px solid pink;
+    }
+```
+效果：![](https://gitee.com/dengyxiang/picture/raw/master/屏幕截图 2024-10-16 191805.png)
+```
+    .div{
+        width: 123px;
+        height: 123px;
+        padding: 20px;
+        padding-right: 40px;
+        border: 1px solid pink;
+    }
+```
+效果：![](https://gitee.com/dengyxiang/picture/raw/master/屏幕截图 2024-10-16 191829.png)
diff --git "a/\351\202\223\351\233\250\346\271\230/20241017-\346\265\256\345\212\250.md" "b/\351\202\223\351\233\250\346\271\230/20241017-\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1eaf94798cb2d5231d155cdfa5aa0aa85dffaf35
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241017-\346\265\256\345\212\250.md"
@@ -0,0 +1,32 @@
+## 浮动
+### 标准文档流
+### 标准文档流的特性
+- 1.空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。
+- 2.高矮不齐，底边对齐
+- 3.自动换行，一行写不满，换行写。
+### 行内元素和块级元素
+#### 行内元素和块级元素的区别：（重要）
+行内元素：
+- 与其他行内元素并排；
+- 不能设置宽、高。默认的宽度，就是文字的宽度。
+
+块级元素：
+- 霸占一行，不能与其他任何元素并列；
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+### 浮动的性质
+#### 1.浮动的元素脱标
+#### 2.浮动的元素互相贴靠
+#### 3.浮动的元素有“字围”效果
+#### 4.收缩
+一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
+### 浮动的作用
+1. 实现多列布局：可以将多个元素浮动起来，使其并排显示，从而实现多列布局的效果。
+2. 文字环绕图片：通过将图片设置为浮动，可以让文字环绕在图片周围。
+
+### 浮动的属性值
+1. `left`：元素向左浮动。
+2. `right`：元素向右浮动。
+3. `none`：默认值，元素不浮动。
+## 作业
+![](https://gitee.com/dengyxiang/picture/raw/master/屏幕截图 2024-10-20 205053.png)
+![](https://gitee.com/dengyxiang/picture/raw/master/屏幕截图 2024-10-20 205101.png)
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\2502.0.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\2502.0.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c3c130f9bcb5c3c48083143ba1f7d2887dd33c95
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241014-\351\200\211\346\213\251\345\231\2502.0.html"
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 21. 选择序号为偶数的plate */
+        plate:nth-child(even){
+
+        }
+        /* 22. 选择从第3个plate(包括第3个)开始的每2个plate */
+        plate:nth-child(2n+3){
+
+        }
+        /* 23. 选择中间plate中的apple */
+        /* 24. 选择最后一个apple、最后一个orange */
+        apple:last-child,orange:last-child{
+
+        }
+        /* 25. 选择空的bento */        
+        /* 请写出CSS规则，使得.main类中的<section>和<article>元素中的所有<h1>和<h2>
+            标签的字体变为粗体，并且<aside>类中的<h3>标签的字体变为斜体 */
+        .main section h1,.main section h2,.main article h1,.main article h2{
+            font-weight:bold;
+        }
+        aside h3{
+            font-style: italic;
+        }
+
+        /* 请写出CSS规则，使得所有带有required属性的<input>元素在获得焦点时边框变为蓝色，
+        并且所有带有placeholder属性的<input>元素的占位符文本颜色为灰色。 */
+        input required:focus{
+            border: 2px blue solid;
+        }
+        input placeholder::-webkit-input-placeholder {  
+            color: gray; /* 占位符文本颜色变为灰色（适用于 WebKit/Chrome/Safari 浏览器） */  
+        }
+
+        /* 请写出CSS规则，使得导航栏中当前激活的链接（class="active"）
+        的子元素<a>在悬停时背景色变为深灰色，并且所有<a>标签的子元素在悬停时字体颜色变为白色。 */
+        a.active:hover{
+            background-color: #a9a9a9;
+        }
+        a:hover{
+            color: white;
+        }
+
+        /* 请写出CSS规则，使得带有class="special-title"的<h2>标签的第一个字母首字下沉
+            ，并且首字下沉的字母颜色为金色，背景色为透明。 */
+
+        h2.special-title::first-letter{
+            font-size: 2em; 
+            float: left;       
+            color: gold;
+            background-color: transparent;
+        }
+        /* 请写出CSS规则，使得.list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色，
+            并且当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色。 */
+        .list > li > ul:first-child{
+            background-color: #a9a9a9;
+        }
+        .list > li :hover > * {
+            color: darkblue;
+        }
+
+        /* 请写出CSS规则，使得.container类中的<form>元素内的所有输入框在获得焦点时边框颜色变为绿色，
+            并且所有标签<label>在悬停时背景色变为浅蓝色。 */
+        .container form select:focus {  
+            border-color: green; /* 获得焦点时边框颜色变为绿色 */  
+        }  
+        .container label:hover {  
+        background-color:lightblue; /* 悬停时背景色变为浅蓝色 */  
+        }
+    </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> -->
+
+    <!-- <form>
+        <input type="text" name="username" required placeholder="Username">
+        <input type="email" name="email" required placeholder="Email">
+        <input type="submit" value="Submit">
+    </form> -->
+      
+    <!-- <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> -->
+    
+    <!-- <h2 class="special-title">Special Title</h2> -->
+
+    <!-- <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> -->
+      
+    <!-- <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/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241016-\347\233\222\345\255\220.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241016-\347\233\222\345\255\220.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6177ef007dfaa170b99acad5164f0b1417ddae0a
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241016-\347\233\222\345\255\220.html"
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .a{
+            width: 123px;
+            height: 123px;
+            padding: 20px 40px;
+            border: 1px solid pink;
+        }
+        .b{
+            width: 123px;
+            height: 123px;
+            padding: 20px;
+            padding-right: 40px;
+            border: 1px solid pink;
+        }
+    </style>
+</head>
+<body>
+    <div class="a"></div>
+    <div class="b"></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4c160aca0670a75751cde5115b47219b67448b3d
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+
+            margin: 0px;
+            padding: 0px;
+        }
+        .top{
+            width: 970px;
+            height: 103px;
+            margin-bottom: 8px;
+        }
+        .logo{
+            float: left;
+            height: 103px;
+            width: 277px;
+            background-color: brown;            
+        }
+        .language{
+            float: right;
+            height: 49px;
+            width: 137px;
+            background-color: wheat;
+            margin-bottom: 8px;
+        }
+        .bars{
+            float: right;
+            height: 46px;
+            width: 679px;
+            background-color: palegreen;
+        }
+        .centre{
+            width: 970px;
+            height: 436px;
+        }
+        .center_left{
+            float: left;
+            width: 310px;
+            height: 436px;
+            background-color: chocolate;
+        }
+        .centre_centre{
+            float: left;
+            width: 450px;
+            height: 305px;
+            margin-left: 10px;   
+            margin-right: 10px;     
+        }
+        .centre_top{
+            height: 240px;
+            background-color: pink;        
+        }
+        .centre_body{
+            height: 110px;
+            background-color: palevioletred;
+            margin-top: 10px;
+        }
+        .centre_bottom{
+            height: 30px;
+            background-color: plum;
+            margin-top: 10px;
+        }
+        .center_right{
+            float: right;
+            width: 190px;
+            height: 400px;
+            background-color: coral;
+        }
+        .center_foot{
+            float: right;
+            width: 650px;
+            height: 25px;
+            background-color: purple;
+            margin-top: 10px;
+        }
+        .bottom{
+            float: left;
+            width: 970px;
+            height: 40px;
+            background-color: powderblue;
+            margin-top: 10px;            
+        } 
+
+        .hh{
+            margin-top: 100px;
+            width: 500px;
+            margin-left: 20px;
+        }
+        ul{
+            list-style: none;
+            border-bottom: 1px gray dotted;
+            padding-bottom: 5px;
+            height: 25px;
+            margin-top: 5px;
+        }
+        .s1{
+            color: cornflowerblue;
+        }
+        .s2{
+            float: right;
+        }
+        .to{
+            height: 30px;
+            border-top: 1px gray dotted;
+            padding-top: 10px;
+            color: cornflowerblue;
+            border-bottom: none;
+        }
+        .l{
+            float: left;
+        }
+        .r{
+            font-size:14px;
+            float: right;
+            padding-top: 15px;
+        }
+        .bian{
+            height: 2px;
+            background-image: linear-gradient(to right,cornflowerblue,brown);
+        }
+    </style>
+</head>
+<body>
+    <div class="top">
+        <div class="logo">
+            logo
+        </div>
+        <div class="language">
+            语言选择
+        </div>
+        <div class="bars">
+            导航条
+        </div>
+    </div>
+    <div class="centre">
+        <div class="center_left">
+            大广告
+        </div>
+        <div class="centre_centre">
+            <div class="centre_top"></div>
+            <div class="centre_body"></div>
+            <div class="centre_bottom"></div>
+        </div>
+
+        <div class="center_right"></div>
+        <div class="center_foot"></div>
+    </div>
+    <div class="bottom"></div>
+    <div class="hh">
+        <ul class="to">
+            <li>
+                <h3>
+                    <span class="l">| 通知公告</span>
+                </h3>
+                <span class="r">更多 >></span>
+            </li>
+        </ul>
+        <div class="bian"></div>
+        <ul>
+            <li>
+                <span class="s1">哈哈哈哈哈哈哈哈哈</span>
+                <span class="s2">2014年9月26号</span>
+            </li> 
+        </ul>
+        <ul>
+            <li>
+                <span class="s1">哈哈哈哈哈哈哈哈哈</span>
+                <span class="s2">2014年9月26号</span>
+            </li> 
+        </ul>
+        <ul>
+            <li>
+                <span class="s1">哈哈哈哈哈哈哈哈哈</span>
+                <span class="s2">2014年9月26号</span>
+            </li> 
+        </ul>    
+    </div>
+    
+</body>
+</html>
\ No newline at end of file