diff --git "a/\351\202\223\351\233\250\346\271\230/20241021-\345\256\232\344\275\215.md" "b/\351\202\223\351\233\250\346\271\230/20241021-\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9491b61c7ede9765a122ee536483bbf72f7693a4
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241021-\345\256\232\344\275\215.md"
@@ -0,0 +1,57 @@
+# 定位
+    position: absolute;  <!-- 绝对定位 -->
+    position: relative;  <!-- 相对定位 -->
+    position: fixed;     <!-- 固定定位 -->
+## 相对定位
+**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+```
+    position: relative;
+    left: 50px;
+    top: 50px;
+```
+### 相对定位不脱标
+**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。
+也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
+
+### 相对定位的用途
+- （1）微调元素
+- （2）做绝对定位的参考，子绝父相
+### 相对定位的定位值
+- left：盒子右移
+- right：盒子左移
+- top：盒子下移
+- bottom：盒子上移
+PS：负数表示相反的方向。
+## 绝对定位
+**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+
+### 绝对定位脱标
+**绝对定位的盒子脱离了标准文档流。**
+
+### 绝对定位的参考点（重点）
+- （1）如果用top描述，那么参考点就是页面的左上角
+- （2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸
+### 以盒子为参考点
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
+
+- （1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷
+- （2）不一定是相对定位，任何定位，都可以作为儿子的参考点
+### 让绝对定位中的盒子在父亲里居中
+公式：
+```
+    left:50%; margin-left:负的宽度的一半
+```
+## 固定定位
+**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+### z-index属性：
+z-index属性：表示谁压着谁。数值大的压盖住数值小的。
+#### 特性
+- （1）属性值大的位于上层，属性值小的位于下层。
+
+- （2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
+
+- （3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+
+- （4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
+
+- （5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/20241023-\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" "b/\351\202\223\351\233\250\346\271\230/20241023-\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7000fa0d9d5d23a5435809563c28a0bcc795da65
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241023-\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
@@ -0,0 +1,70 @@
+## CSS3介绍
+CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷
+### CSS3的现状
+- 浏览器支持程度不够好，有些需要添加私有前缀
+- 移动端支持优于PC端
+- 不断改进中
+- 应用相对广泛
+### 应对的策略：渐进增强
+- （1）**坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好**。
+
+- （2）考虑用户群体。
+
+- （3）遵照产品的方案。
+## CSS选择器
+### 属性选择器
+属性选择器的标志性符号是 `[]`
+
+含义：
+```
+    ^：开头  $：结尾  *：包含
+```
+格式：
+- E[title] 选中页面的E元素，并且E存在 title 属性即可。
+
+- E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
+
+- E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
+
+- E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
+
+- E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
+
+- E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
+
+- E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
+### 结构伪类选择器
+伪类选择器的标志性符号是   `:`
+
+#### 1.格式:
+- E:first-child 匹配父元素的第一个子元素E。
+
+- E:last-child 匹配父元素的最后一个子元素E。
+
+- E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
+
+- E:nth-child(odd) 匹配奇数
+
+- E:nth-child(even) 匹配偶数
+
+- E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
+#### 2、格式:
+- E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
+
+- E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
+
+- E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
+
+- E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
+### 伪类选择器
+#### 1、格式：
+- E::before 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+- E::after 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+#### 2、格式：
+- E::first-letter 设置元素 E 里面的第一个字符的样式。
+
+- E::first-line 设置元素 E 里面的第一行的样式。
+
+- E::selection 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/20241024-\345\261\236\346\200\247\350\257\246\350\247\243\357\274\210\344\270\200\357\274\211\345\222\214\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\351\202\223\351\233\250\346\271\230/20241024-\345\261\236\346\200\247\350\257\246\350\247\243\357\274\210\344\270\200\357\274\211\345\222\214\345\212\250\347\224\273\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..80bf924aea8ae35c3d3158d57b1c16f0c115e03f
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241024-\345\261\236\346\200\247\350\257\246\350\247\243\357\274\210\344\270\200\357\274\211\345\222\214\345\212\250\347\224\273\350\257\246\350\247\243.md"
@@ -0,0 +1,99 @@
+## 属性详解
+### 文本
+#### text-shadow：设置文本的阴影
+```
+	text-shadow: 20px 27px 22px pink;
+```
+参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
+### 盒模型中的box-sizing属性
+1. 属性值可以是content-box，border-box
+2. box-sizing: content-box;
+    + 此时设置的width和height是内容区域的宽高，盒子的实际高度=设置的宽+padding+border。改变border和padding的大小，不会影响到内容的宽高，盒子的总宽高变化了
+3. box-sizing:border-box;
+    + 此时设置的width和height是盒子的宽高，盒子的实际高度=设置的宽，改变border和padding的大小，会改变内容的宽高，盒子的总宽高不变
+## 边框
+### 边框圆角`border-radius`属性
+1. border-radius：20px 20px; 水平半径 垂直半径
+2. border-radius：20px 20px 60px 90px; 从左上开始，顺时针。如果当前角没有值，取对角的值
+3. border-radius：20px; 四个角半径都相同
+### 边框阴影`box-shadow`属性
+1. box-shadow：水平阴影，垂直阴影，模糊程度，阴影大小，阴影颜色
+2. 内阴影`inset`
+### 边框图片
+1. 边框图片路径:border-image-source:url('');
+2. 边框图片裁剪：border-image-slice:20;
+3. 边框图片平铺：border-image-repeat:stretch;
+    + repeat:正常平铺，但是可能会显示不完整
+    + round：平铺，但是保证图片完整
+    + stretch：拉伸显示
+4. 边框图片宽度：border-image-width:27px;
+## 过渡：transition
+1. 所有属性都发生过渡：transition-property:all;
+2. 过渡持续时间：transition-duraton:1s;
+3. 运动曲线：transition-timing-function:linear;
+    + linear:线性
+    + ease:减速
+    + ease-in:加速
+    + ease-out:减速
+    + ease-in-out:先加速再减速
+4. 过渡延迟：transition-delay:1s;
+5. 语法：transition：让哪些属性进行过渡 过渡持续时间 运动曲线 延迟时间;
+## 2D转换
+### 缩放`scale`
+1. transform:scale(x,y);水平，垂直 大于1是放大，小于1是缩小
+### 位移`translate`
+1.transform：translate(水平位移，垂直位移);
+    + 参数可以百分比
+    + 正值：向右和向下。负值：向左和向上。如果只有一个值，表示水平
+2. 盒子居中
+    ```
+    position:absolute;
+    left:50%;
+    transform:translate(-50%);
+    ```
+### 旋转`rotate`
+1. transform:rotate(角度);
+    + 正值：顺时针
+    + 负值：逆时针
+2. 旋转时默认以盒子的正中心为坐标原点，如果想要改变坐标原点使用`transform-origin`
+    ```
+    transform-origin:水平坐标 垂直坐标;
+    transform-origin:50px 50px;
+    transform-origin:center bottom;以盒子底部的中心为坐标原点
+    ```
+## 3D转换
+1. 旋转：rotateX rotateY rotateZ 
+2. 移动：translateX translateY translateZ
+3. 透视：perspective
+    + 作为一个属性，设置给父元素，作用于所有的3D转换子元素
+    + 作为transform属性的一个值，作用于元素自身
+4. 3D呈现(transform-style)`transform-style: preserve-3d;`
+## 动画
+### 步骤
+1. 通过@keyframes定义动画
+2. 将这段动画通过百分比，分隔成多个节点，然后再哥节点中分别设置属性
+3. 在指定元素中，通过animation属性调用动画
+#### **先定义再调用**
+```
+定义动画：
+@keyframes 动画名{
+    from{初始状态}
+    to{结束状态}
+}
+调用：animation:动画名 持续时间;
+```
+#### 格式
+1. animation:定义的动画名 持续时间 执行次数 是否反向 运动曲线 延迟执行
+2. infinite表示无限次
+3. 属性
+    + 动画名称：animation-name:Lars;
+    + 执行一次动画持续时间：animation-duration:4s;
+    + 动画执行次数：animation-iteration-count:1;infinite无限次
+    + 动画方向：animation-direction:alternate; alternate:反向；normal：正常
+    + 动画延迟执行：animation-delay:1s;
+    + 动画结束时，盒子状态：animation-fill-mode:forwards;forwards:保持动画结束后的状态(默认)，backwards：动画结束后回到最初的状态
+    + 运动曲线：animation-timing-function: ease-in;属性值可以是：linear   ease-in-out  steps()
+3. steps()效果
+    + animation: move2 4s steps(2);
+    + steps()：是间断地分成几步执行
+\ No newline at end of file
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
index 8b5c53ea46cd701d9e81d7d412eb246f5bb7ce97..53bc2fe373f488bcef0bf7f0db2c614b767b88ba 100644
--- "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
-        /* 请为一个名为.box的类设置背景颜色为深蓝色。 */
-        .box{
+        /* 请为一个名为div的类设置背景颜色为深蓝色。 */
+        div{
             background-color: #115be4;
             width: 200px;
             height: 100px;
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/1.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8a97107fdfae699d186b64e1094a02efbe536ef8
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/1.html"
@@ -0,0 +1,30 @@
+<!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: 0;
+            padding: 0;
+        }
+        /* 1.创建一个在其父级容器中水平、垂直居中的绝对定位元素 */
+        div.d1{
+            width: 450px;
+            height: 300px;
+            border: 1px solid black;
+            position: absolute;
+            left: 50%;
+            margin-left: -225px;
+            top: 50%;
+            margin-top: -150px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        886
+    </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/20241021-\345\256\232\344\275\215/2.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b730771c12435a02e278574c20136fab77a78c4a
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/2.html"
@@ -0,0 +1,88 @@
+<!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: 0;
+            padding: 0;
+        }
+        /* 2.在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容 */
+        div.d2{            
+            position: fixed;
+			top: 0;
+			left: 0;
+	 		width: 100%;
+			height: 50px;
+			background-color: gray;
+			z-index: 99999999;
+        }
+        div.d3{
+            text-align: center;
+            margin-top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d2">
+        888
+    </div>
+    <div class="d3">
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>
+        <p>3333333333333333</p>        
+    </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/20241021-\345\256\232\344\275\215/3..html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/3..html"
new file mode 100644
index 0000000000000000000000000000000000000000..4ee2ea38a3df39389c06c2e007ff66835215231d
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/3..html"
@@ -0,0 +1,45 @@
+<!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>
+        /* 3.创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示*/
+        .d1 {
+            position: relative;
+            display: inline-block;
+            cursor: pointer;
+            width: 120px;
+            height: 100px;
+        }
+
+        .p1 {
+            display: none;
+            width: 120px;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 5px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 25px;
+            left: 50%;
+            margin-left: -60px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .d1:hover .p1 {
+            display: block;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+     <div class="d1">好困、好困、好困
+        <p class="p1">好饿、好饿、好饿</p>        
+    </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/20241021-\345\256\232\344\275\215/4.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/4.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0b2fa94e7c4253f36cdda463379e6af7c5872361
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/4.html"
@@ -0,0 +1,69 @@
+<!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: 0;
+            padding: 0;
+        }
+        /* 4.使用提供的素材，利用精灵图技术实现如下效果 */
+        li{
+            list-style-type: none;
+        }
+        ul li {
+            font-size: 40px;
+            width: auto;
+            height: 72px;
+            position: relative;
+            padding-left: 72px;
+            line-height: 72px;
+            margin-bottom: 10px;
+        }
+
+        ul li::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 70px;
+            height: 72px;
+            background-image: url(./定位作业素材.png);
+        }
+
+        ul li:nth-child(1)::before {
+            background-position: 0 0;
+        }
+
+        ul li:nth-child(2)::before {
+            background-position: -80px 0;
+        }
+
+        ul li:nth-child(3)::before {
+            background-position: -160px 0;
+        }
+        ul li:nth-child(4)::before {
+            background-position: 0 -80px;
+        }
+        ul li:nth-child(5)::before {
+            background-position: -80px -80px;
+        }
+        ul li:nth-child(6)::before {
+            background-position: -160px -80px;
+        }        
+    </style>
+</head>
+<body>
+    <ul>
+        <li>付款图标</li>
+        <li>存款图标</li>
+        <li>删除图标</li>
+        <li>粘贴图标</li>
+        <li>笑脸图标</li>
+        <li>编辑图标</li>
+    </ul>
+</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/20241021-\345\256\232\344\275\215/\345\256\232\344\275\215\344\275\234\344\270\232\347\264\240\346\235\220.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/\345\256\232\344\275\215\344\275\234\344\270\232\347\264\240\346\235\220.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d3bf3ff15ad02e8144221b44b92fa8205baac9dc
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241021-\345\256\232\344\275\215/\345\256\232\344\275\215\344\275\234\344\270\232\347\264\240\346\235\220.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7000fa0d9d5d23a5435809563c28a0bcc795da65
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241023-\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
@@ -0,0 +1,70 @@
+## CSS3介绍
+CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷
+### CSS3的现状
+- 浏览器支持程度不够好，有些需要添加私有前缀
+- 移动端支持优于PC端
+- 不断改进中
+- 应用相对广泛
+### 应对的策略：渐进增强
+- （1）**坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好**。
+
+- （2）考虑用户群体。
+
+- （3）遵照产品的方案。
+## CSS选择器
+### 属性选择器
+属性选择器的标志性符号是 `[]`
+
+含义：
+```
+    ^：开头  $：结尾  *：包含
+```
+格式：
+- E[title] 选中页面的E元素，并且E存在 title 属性即可。
+
+- E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
+
+- E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
+
+- E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
+
+- E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
+
+- E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
+
+- E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
+### 结构伪类选择器
+伪类选择器的标志性符号是   `:`
+
+#### 1.格式:
+- E:first-child 匹配父元素的第一个子元素E。
+
+- E:last-child 匹配父元素的最后一个子元素E。
+
+- E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
+
+- E:nth-child(odd) 匹配奇数
+
+- E:nth-child(even) 匹配偶数
+
+- E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
+#### 2、格式:
+- E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
+
+- E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
+
+- E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
+
+- E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
+### 伪类选择器
+#### 1、格式：
+- E::before 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+- E::after 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+#### 2、格式：
+- E::first-letter 设置元素 E 里面的第一个字符的样式。
+
+- E::first-line 设置元素 E 里面的第一行的样式。
+
+- E::selection 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/fish.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/fish.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4f0b14e7e30e5308af59cd0d83dcfcd9109add0a
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/fish.html"
@@ -0,0 +1,94 @@
+<!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: 0;
+            padding: 0;
+        }
+        body {
+            background-color: rgb(138, 219, 237);
+        }
+        .lsdy {
+            width: 509px;
+            height: 270px; 
+            margin: 100px auto;
+            background: url(./图片/fish.2.png) left top; 
+            animation: lsdyRun 1s steps(8) infinite; 
+            display: inline-block;
+        }
+        .lsdyBox {
+            width: 509px;
+            height: 270px;
+            animation: lsdyBoxRun 20s linear infinite;
+            display: inline-block;
+        }
+        @keyframes lsdyRun {
+            0% {
+            }
+            100% {
+                background-position: left -2160px;
+            }
+        }
+        @keyframes lsdyBoxRun {
+            0% {
+                transform: translateX(-600px);
+            }
+            100% {
+                transform: translateX(3000px);
+            }
+        }
+         .dly {
+            width: 175px;
+            height: 125px; 
+            margin: 100px auto;
+            background: url(./图片/fish.1.png) left top; 
+            animation: dlyRun 1s steps(8) infinite; 
+            display: inline-block;
+        }
+        .dlyBox {
+            width: 175px;
+            height: 125px; 
+            animation: dlyBoxRun 15s linear infinite;
+            display: inline-block;
+        }
+        @keyframes dlyRun {
+            0% {
+                
+            }
+            100% {
+                background-position: left -1000px;
+            }
+        }
+        
+        @keyframes dlyBoxRun {
+            0% {
+                transform: translateX(-500px) translateY(-140px);
+            }
+            25% {
+                transform: translateX(300px) translateY(-140px) rotate(90deg);
+            }
+            50% {
+                transform: translateX(300px) translateY(500px) rotate(180deg); 
+            }
+            75% {
+                transform: translateX(-500px) translateY(500px) rotate(180deg); 
+            }
+            100% {
+                transform: translateX(-500px) translateY(-140px) rotate(360deg);
+            }
+        }         
+    </style>
+</head>
+<body>
+    <div class="lsdyBox">
+        <div class="lsdy"></div>
+    </div>
+    <div class="dlyBox">
+        <div class="dly"></div>
+    </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/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.1.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4d00d1fc472c874449af62ac8c206e2da219c817
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.1.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.2.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.2.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.3.jpg" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/1.3.jpg" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/3.1.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/3.1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b86c8249d78b653db95fff220ebccaec7cee5f
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/3.1.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/4.1.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/4.1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..aa91346b17db7b1c0a0da3be60a79c1537250e8e
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/4.1.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/4.2.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/4.2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b2364f5aa00b1865127c7d57d569496999752a23
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/4.2.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/fish.1.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/fish.1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d60ff6ecde05412936fd712b7588684c3faf79a2
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/fish.1.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/fish.2.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/fish.2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..667e7fd5bd158f95ebfbce25fc5a866b3ad31704
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/fish.2.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/\346\227\213\350\275\254plus.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/\346\227\213\350\275\254plus.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9dbf1b1ad56501a0fd12ea48bc7192c1a0480fc8
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/\346\227\213\350\275\254plus.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/\347\206\212.png" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/\347\206\212.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5100a19f692cc06c4cdc5007aa3248a155d807c2
Binary files /dev/null and "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\233\276\347\211\207/\347\206\212.png" differ
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\260\217\347\201\253\347\256\255.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\260\217\347\201\253\347\256\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5ae1222e647b15400f7e9ed0c86cc172a706bc0a
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\260\217\347\201\253\347\256\255.html"
@@ -0,0 +1,32 @@
+<!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>
+        div{
+            width: 700px;
+            height: 100vh;
+            background-color: goldenrod;
+        }
+        img{
+        position: absolute;
+        left: 100px;
+        top: 600px;
+        height: 120px;
+        transform: translate(-300px, 200px) rotate(60deg);
+        transition: all 1s ease-in;
+        }
+
+        body:hover img {
+        transform: translate(500px, -500px) rotate(45deg);
+        }        
+    </style>
+</head>
+<body>
+    <div>
+        <img src="./图片/3.1.png" alt="">
+    </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/20241024-\345\212\250\347\224\273/\345\260\217\347\231\275\347\206\212.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\260\217\347\231\275\347\206\212.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c5d6b7ab1dfab9db8ca7da6c5a58407209758d44
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\345\260\217\347\231\275\347\206\212.html"
@@ -0,0 +1,52 @@
+<!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: 0;
+            padding: 0;
+        }
+        body {
+            background-color: green;
+        }
+        .bx {
+            width: 200px;
+            height: 100px; 
+            margin: 100px auto;
+            background: url(./图片/熊.png) left; 
+            animation: bxRun 1s steps(8) infinite; 
+            display: inline-block;
+        }
+        .bxBox {
+            width: 200px;
+            height: 100px;
+            animation: bxBoxRun 5s linear infinite;
+           
+        }
+        @keyframes bxRun {
+            0% {
+                background-position: 1600px;
+            }
+            100% {
+                background-position: 0px;
+            }
+        }
+        @keyframes bxBoxRun {
+            0% {
+                transform: translateX(-100px);
+            }
+            100% {
+                transform: translateX(1500px);
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="bxBox">
+    <div class="bx"></div>
+    </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/20241024-\345\212\250\347\224\273/\346\211\213\350\241\250.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\211\213\350\241\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8627c6881a224e05d885f7a13c36c56f5c03c1f6
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\211\213\350\241\250.html"
@@ -0,0 +1,76 @@
+<!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>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #eeeeee;
+        }
+
+        .b1 {
+            width: 800px;
+            height: 320px;
+            padding-left: 20px;
+            margin: 80px auto;
+        }
+
+        .c1 {
+            width: 230px;
+            height: 300px;
+            text-align: center;
+            margin-right: 20px;
+            background-color: #FFF;
+            float: left;
+            position: relative;
+            top: 0;
+            overflow: hidden;
+            transition: all .5s;
+
+        }
+
+        .c1 img {
+            margin-top: 30px;
+        }
+
+        .c1 span {
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: #ff6700;
+            transition: all .5s;
+        }
+
+
+        .c1:hover {
+            top: -5px;
+            box-shadow: 0 0 15px #AAA;
+        }
+
+        .c1:hover span {
+            bottom: 0;
+        }        
+    </style>
+</head>
+<body>
+    <div class="b1">
+        <div class="c1">
+            <img src="./图片/1.1.png" alt="">
+        </div>
+
+        <div class="c1">
+            <img src="./图片/1.2.png" alt="">
+            <span></span>
+        </div>
+        <div class="c1">
+            <img src="./图片/1.3.jpg" alt="">
+            <span></span>
+        </div>
+    </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/20241024-\345\212\250\347\224\273/\346\227\213\350\275\254.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\227\213\350\275\254.html"
new file mode 100644
index 0000000000000000000000000000000000000000..32eeabbf390bb68506e675e33eb85a6a99f9e910
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\227\213\350\275\254.html"
@@ -0,0 +1,25 @@
+<!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>
+        p {
+            width: 100px;
+            height: 100px;
+            background-color: pink;
+            font-size: 20px;
+            color: black;
+            transition: all 2s;
+        }
+
+        p:hover {
+            transform: rotate(-450deg);
+        }        
+    </style>
+</head>
+<body>
+    <p>遥遥领先</p>
+</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/20241024-\345\212\250\347\224\273/\346\227\213\350\275\254plus.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\227\213\350\275\254plus.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7fe83f1254cff2c0bf24bcf9295ef74978c10567
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\227\213\350\275\254plus.html"
@@ -0,0 +1,50 @@
+<!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>
+    .d1 {
+      width: 305px;
+      height: 325px;
+      margin: 50px auto;
+      position: relative;
+      background-color: cornflowerblue;
+      padding-top: 10px;
+    }
+
+    .d2,.d3 {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      border-radius: 50%;
+      transition: all 2s;
+      backface-visibility: hidden;
+    }
+
+    .d2 {
+      background: url('./图片/旋转plus.png') left 0 no-repeat;
+    }
+
+    .d3 {
+      background: url('./图片/旋转plus.png') right 0 no-repeat;
+      transform: rotateY(180deg);
+    }
+
+    .d1:hover .d2 {
+      transform: rotateY(180deg);
+    }
+
+    .d1:hover .d3 {
+      transform: rotateY(0deg);
+    }        
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d2"></div>
+        <div class="d3"></div>
+    </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/20241024-\345\212\250\347\224\273/\347\272\270\347\211\214.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\347\272\270\347\211\214.html"
new file mode 100644
index 0000000000000000000000000000000000000000..18c28f03bbcd387cd43392c0e479a0a0a1bddd87
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\347\272\270\347\211\214.html"
@@ -0,0 +1,99 @@
+<!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>
+    body {
+      background-color: #eee;
+    }
+
+    div {
+      width: 300px;
+      height: 440px;
+      margin: 100px auto;
+      position: relative;
+    }
+
+    img {
+      width: 100%;
+      transition: all 1.5s;
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform-origin: center bottom;
+      box-shadow: 0 0 3px 0 #666;
+    }
+
+    div:hover img:nth-child(6) {
+      transform: rotate(-10deg);
+    }
+
+    div:hover img:nth-child(5) {
+      transform: rotate(-20deg);
+    }
+
+    div:hover img:nth-child(4) {
+      transform: rotate(-30deg);
+    }
+
+    div:hover img:nth-child(3) {
+      transform: rotate(-40deg);
+    }
+
+    div:hover img:nth-child(2) {
+      transform: rotate(-50deg);
+    }
+
+    div:hover img:nth-child(1) {
+      transform: rotate(-60deg);
+    }
+
+    div:hover img:nth-child(8) {
+      transform: rotate(10deg);
+    }
+
+    div:hover img:nth-child(9) {
+      transform: rotate(20deg);
+    }
+
+    div:hover img:nth-child(10) {
+      transform: rotate(30deg);
+    }
+
+    div:hover img:nth-child(11) {
+      transform: rotate(40deg);
+    }
+
+    div:hover img:nth-child(12) {
+      transform: rotate(50deg);
+    }
+
+    div:hover img:nth-child(13) {
+      transform: rotate(60deg);
+    }   
+    div:hover img:nth-child(14) {
+      transform: rotate(70deg);
+    }          
+    </style>
+</head>
+<body>
+    <div>
+        <img src="./图片/4.1.png" alt="">
+        <img src="./图片/4.2.png" alt="">
+        <img src="./图片/4.1.png" alt="">
+        <img src="./图片/4.2.png" alt="">
+        <img src="./图片/4.1.png" alt="">
+        <img src="./图片/4.2.png" alt="">
+        <img src="./图片/4.1.png" alt="">
+        <img src="./图片/4.2.png" alt="">
+        <img src="./图片/4.1.png" alt="">
+        <img src="./图片/4.2.png" alt="">
+        <img src="./图片/4.1.png" alt="">
+        <img src="./图片/4.2.png" alt="">
+        <img src="./图片/4.1.png" alt="">
+        <img src="./图片/4.2.png" alt="">        
+    </div>
+</body>
+</html>
\ No newline at end of file