diff --git "a/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md" "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
index abdfd71dde9ea64e9300a9c2d97cce339ab4e586..99adfedb5f54d0edda8f025c1c803515f96aa77c 100644
--- "a/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
+++ "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
@@ -211,7 +211,8 @@
 
 ## 练习
 
-### 效果：![image-20241020215023223](https://gitee.com/BMChu070/ovo/raw/master/imgs/image-20241020215023223.png)
+### 效果：
+![image-20241020215023223](https://gitee.com/BMChu070/ovo/raw/master/imgs/image-20241020215023223.png)
 
 
 
diff --git "a/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241021-css\345\256\232\344\275\215.md" "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241021-css\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1c0682644a03e6e5cf93b5417c51312599148abb
--- /dev/null
+++ "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241021-css\345\256\232\344\275\215.md"
@@ -0,0 +1,124 @@
+## CSS定位 
+
+CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
+
+```
+	position: absolute;  <!-- 绝对定位 -->
+
+	position: relative;  <!-- 相对定位 -->
+
+	position: fixed;     <!-- 固定定位 -->
+
+```
+
+### 相对定位
+
+**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+
+相对定位不脱标，**别人不会把它的位置挤走**。
+
+***相对定位的用途***
+- 微调元素
+- 做绝对定位的参考，子绝父相
+
+### 绝对定位
+
+**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+
+**绝对定位的盒子脱离了标准文档流。**
+
+所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
+
+
+
+### 子绝父相
+子元素绝对定位，父元素相对定位
+“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
+
+> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
+
+对于父元素的定位，具有优先级。在一个父级元素中嵌套的话，选取绝对定位子元素的上一个拥有定位的元素为父级。（就近原则）
+
+### 固定定位
+
+**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+
+### z-index
+z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。
+**使用这个属性的元素必须具有定位**
+
+## 练习
+
+### 效果：
+
+![Snipaste_2024-10-21_16-30-23](https://gitee.com/BMChu070/ovo/raw/master/imgs/Snipaste_2024-10-21_16-30-23.png)
+
+### 代码：
+
+```css
+         div {
+            height: 200px;
+            width: 300px;
+            position: absolute;
+            border: 1px solid black;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+        } 
+```
+
+### 效果：
+
+![screenshots](https://gitee.com/BMChu070/ovo/raw/master/imgs/screenshots.gif)
+
+### 代码：
+```css
+        #top {
+            width: 100%;
+            height: 50px;
+            position: fixed;
+            background-color: black;
+            top: 0;
+
+        }
+```
+
+
+### 效果：
+
+![screenshots](https://gitee.com/BMChu070/ovo/raw/master/imgs/screenshots-17300312151271.gif)
+
+### 代码：
+```css
+        p {
+            position: relative;
+            display: inline-block;
+            cursor: pointer;
+            width: 120px;
+            height: 100px;
+        }
+
+        .tooltip {
+            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;
+        }
+
+        p:hover .tooltip {
+            display: block;
+            opacity: 1;
+        }
+```
\ No newline at end of file
diff --git "a/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241023-\347\262\276\347\201\265\345\233\276.md" "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241023-\347\262\276\347\201\265\345\233\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8e1adeaf8dc24eec2631538712494f674c7ab9c1
--- /dev/null
+++ "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241023-\347\262\276\347\201\265\345\233\276.md"
@@ -0,0 +1,245 @@
+## 精灵图
+精灵图（Sprite），也被称为雪碧图或CSS Sprite，是一种有效的网页图片应用处理方式。
+
+将多个小图标或图片合并到一张大图中，然后通过CSS定位来显示需要显示的图片部分。
+
+作用：**减少网页的HTTP请求数量**，因为所有小图标或图片都整合在一张大图中，只需要一次HTTP请求就可以加载。
+
+使用：首先，将制作好的精灵图上传到网站的服务器或静态资源文件夹中。然后，在CSS中通过**background-image**属性设置元素的背景图片为精灵图。
+
+
+假设有一个包含多个服务图标的精灵图，需要在网页上显示这些图标。可以使用以下CSS代码来实现：
+
+```
+css
+.service {  
+	/* 其他样式设置 */  
+}  
+  
+.service ul {  
+	display: flex;  
+}  
+  
+.service li {  
+	display: flex;  
+	/* 其他样式设置 */  
+}  
+  
+.service li h5 {  
+	width: 36px;  
+	height: 42px;  
+	background: url(./images/sprite.png) 0 -192px no-repeat; /* 精灵图路径和定位 */  
+}  
+  
+.service li:nth-child(2) h5 {  
+	background-position: -41px -192px; /* 第二个图标的定位 */  
+}  
+  
+.service li:nth-child(3) h5 {  
+	background-position: -82px -192px; /* 第三个图标的定位 */  
+}  
+  
+
+```
+## 属性选择器
+1. 存在选择器：
+
+**[指定属性]**
+
+选择所有具有指定属性的元素，不论其属性值为何。
+
+2. 完全匹配选择器：
+
+ **[指定属性 =   "值" ]**
+
+选择属性值完全等于指定值的元素。
+
+3. 开始匹配选择器：
+
+**[指定属性 ^ = " 值" ]**
+
+选择属性值以指定值开始的元素。
+
+4. 结束匹配选择器：
+
+**[指定属性 $ = " 值" ]**
+
+选择属性值以指定值结束的元素。
+
+5. 包含匹配选择器：
+
+**[指定属性 * = " 值" ]**
+
+选择属性值包含指定字符串的元素。
+
+6. 词匹配选择器：
+
+**[指定属性 ~ = " 值" ]**
+
+选择属性值中包含指定单词的元素，单词由空格分隔。
+
+​	7.前缀匹配选择器（主要用于语言代码或文档类型等属性）：
+
+**[指定属性 | = " 值" ]**
+
+选择属性值以指定值开始或者完全等于指定值的元素。
+
+## 练习
+
+### 效果：
+
+![Snipaste_2024-10-23_11-34-53](https://gitee.com/BMChu070/ovo/raw/master/imgs/Snipaste_2024-10-23_11-34-53.png)
+
+### 代码：
+
+```css
+    div{
+            height: 32px;
+            width: 35px;
+            background-size: 100px;
+            background-image: url(./img/20231010113053.png);
+            background-repeat: no-repeat;
+        }
+        p{
+            margin-top: -30px;
+            margin-left: 40px;
+            padding-top: 5px;
+        }
+
+        .l1{            
+            background-position: 0 0;
+        }
+        .l2{            
+            background-position: -32px 0;
+        }        
+        .l3{            
+            background-position: 0 -32px;
+        }        
+        .l4{            
+            background-position: -32px -32px;
+        }        
+        .l5{            
+            background-position: -64px 0;
+        }        
+        .l6{            
+            background-position: -64px -32px;
+        }
+```
+
+### 效果：
+
+![image-20241027202737562](https://gitee.com/BMChu070/ovo/raw/master/imgs/image-20241027202737562.png)
+
+### 代码：
+
+```html
+<!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>
+        #ground {
+            border: 1px solid orange;
+            width: 440px;
+            height: 400px;
+            background-image: url(./img/20231010221714.png);
+            background-repeat: no-repeat;
+            margin-top: 20px;
+
+        }
+
+        .d1 {
+            width: 50px;
+            height: 25px;
+            background-image: url(./img/20231010221623.png);
+            background-repeat: no-repeat;
+            background-position: -110px 0;
+            margin-top: -8px;
+            margin-left: 10px;
+        }
+
+        .d2 {
+            height: 53px;
+            width: 440px;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.8);
+            margin-top: 209px;
+        }
+
+        .p2 {
+            line-height: 53px;
+            padding-left: 20px;
+        }
+
+        #font{
+            margin-top: 20px;
+            margin-left: 20px;
+        }
+        .s1 {
+            font-weight: 900;
+            font-size: 16px;
+            
+        }
+        .p3{
+            margin-top: 0px;
+            margin-left: 5px;
+            margin-bottom: 10px;
+        }
+
+        .p1 {
+            color: orange;
+            font-size: 30px;
+            margin-top: 5px;
+        }
+
+        .s2 {
+            color: gray;
+            text-decoration: line-through;
+            font-size: 12px;
+            margin-left: 10px;
+        }
+        .s4 {
+            float: right;
+            color: red;
+            font-size: 16px;
+            margin-right: 10px;
+            margin-top: 15px;
+
+        }
+        .s3 {
+            float: right;
+            color: gray;
+            font-size: 16px;
+            margin-top: 15px;
+            margin-right: 10px;
+
+        }
+
+
+    </style>
+</head>
+
+<body>
+    <div id="ground">
+        <div class="d1"></div>
+        <div class="d2">
+            <p class="p2">广东深圳宝安区建安一路海雅缤纷城4楼</p>
+        </div>
+        <div id="font">
+            <span class="s1">【海雅缤纷城】万达影城（深圳海雅广场…</span>
+            <p class="p3">单人电影票，可观看2D</p>
+            <p class="p1">￥35<span class="s2">￥80</span>
+                <span class="s4">225</span><span class="s3">已售</span>
+            </p>
+        </div>
+
+    </div>
+</body>
+
+</html>
+```
+
+
diff --git "a/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241024-css\345\212\250\347\224\273.md" "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241024-css\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3c71022fa5520f2f74e9563318a11734a850d644
--- /dev/null
+++ "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241024-css\345\212\250\347\224\273.md"
@@ -0,0 +1,396 @@
+## 动画
+
+### transition（过渡
+
+ 可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
+
+ + transition 包括以下属性：
+
+1. transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
+1. transition-duration: 1s; 过渡的持续时间。
+1. transition-timing-function: linear; 运动曲线。属性值可以是：
+1. linear 线性
+1. ease 减速
+1. ease-in 加速
+1. ease-out 减速
+1. ease-in-out 先加速后减速
+1. transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
+
++ 综合属性：
+
+```
+transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+transition: all 3s linear 0s;
+```
+
+如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。
+
+### transform（2D 转换
+
+可以实现元素的位移、旋转、变形、缩放
+
+属性:
+
+- 缩放：scale
+
+```html
+// x和y是坐标轴
+transform: scale(x, y);
+
+//取值：大于1表示放大，小于1表示缩小。不能为百分比。
+transform: scale(2, 0.5);
+```
+
+- 位移：translate
+
+```
+transform: translate(水平位移, 垂直位移);
+
+//参数为百分比，相对于自身移动。
+//正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+transform: translate(-50%, -50%);
+```
+
+这个属性还能用于水平垂直居中
+
+```html
+div {
+	    width: 600px;
+	    height: 60px;
+	    background-color: red;
+	    position: absolute;      // 绝对定位的盒子
+	    left: 50%;              // 首先，让左边线居中
+	    top: 0;
+	    transform: translate(-50%);    然后，利用translate，往左走自己宽度的一半【推荐写法】
+	}
+```
+
+- 旋转：rotate
+
+```
+//transform: rotate(角度);
+transform: rotate(角度);
+
+transform: rotate(45deg);
+```
+
+## 3D转换
+
+- 旋转：rotateX、rotateY、rotateZ
+
+```
+    transform: rotateX(360deg);    //绕 X 轴旋转360度
+    
+    transform: rotateY(360deg);    //绕 Y 轴旋转360度
+    
+    transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+```
+
+- 移动：translateX、translateY、translateZ
+
+```
+	transform: translateX(100px);    //沿着 X 轴移动
+
+	transform: translateY(360px);    //沿着 Y 轴移动
+
+	transform: translateZ(360px);    //沿着 Z 轴移动
+```
+
+## @keyframes（动画
+
+将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性，类似于设置关键帧
+
+```html
+@keyframes animationName {  
+  from {  
+    /* 初始样式 */  
+  }  
+  to {  
+    /* 结束样式 */  
+  }  
+  /* 或者使用百分比来定义中间的关键帧 */  
+  50% {  
+    /* 动画一半的样式 */  
+  }  
+}
+```
+
+**animation属性：**
+
+       1.   animation: 定义的动画名称  持续时间  执行次数  是否反向 动曲线 延迟执行。(infinite 表示无限次)
+        2.  animation: move1 1s  alternate linear 3;
+        3.  animation: move2 4s;
+
+
+
+## 练习：
+
+### 效果：
+
+![screenshots3](https://gitee.com/BMChu070/ovo/raw/master/imgs/screenshots3.gif)
+
+### 代码：
+
+```
+<!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;
+        }
+
+        .big {
+            width: 800px;
+            height: 320px;
+            padding-left: 20px;
+            margin: 80px auto;
+        }
+
+        .xi {
+            width: 230px;
+            height: 300px;
+            text-align: center;
+            margin-right: 20px;
+            background-color: #FFF;
+            float: left;
+            position: relative;
+            top: 0;
+            overflow: hidden;
+            transition: all .5s;
+
+        }
+
+        .xi img {
+            margin-top: 30px;
+        }
+
+        .xi span {
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: #ff6700;
+            transition: all .5s;
+        }
+
+
+        .xi:hover {
+            top: -5px;
+            box-shadow: 0 0 15px #AAA;
+        }
+
+        .xi:hover span {
+            bottom: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="big">
+        <div class="xi">
+            <img src="./img/1.png" alt="">
+        </div>
+
+        <div class="xi">
+            <img src="./img/2.png" alt="">
+            <span class="desc"></span>
+        </div>
+        <div class="xi">
+            <img src="./img/3.jpg" alt="">
+            <span></span>
+        </div>
+    </div>
+</body>
+
+</html>
+
+```
+
+
+
+### 效果：
+
+![screenshots4](https://gitee.com/BMChu070/ovo/raw/master/imgs/screenshots4.gif)
+
+### 代码：
+
+```
+
+        div {
+            width: 100px;
+            height: 100px;
+            background-color: pink;
+            font-size: 20px;
+            color: white;
+            transition: all 2s;
+        }
+
+        div:hover {
+            transform: rotate(-410deg);
+        }
+
+```
+
+
+
+### 效果：
+
+![screenshots5](https://gitee.com/BMChu070/ovo/raw/master/imgs/screenshots5.gif)
+
+### 代码：
+
+```
+
+    body {
+      height: 100vh;
+      background-color: #DE8910;
+    }
+
+    .xhj {
+      position: absolute;
+      left: 100px;
+      top: 600px;
+      height: 120px;
+      transform: translate(-200px, 200px) rotate(45deg);
+      transition: all 1s ease-in;
+    }
+
+    body:hover .xhj {
+      transform: translate(500px, -500px) rotate(45deg);
+    }
+
+```
+
+
+
+### 效果：
+
+![screenshots6](https://gitee.com/BMChu070/ovo/raw/master/imgs/screenshots6.gif)
+
+### 代码：
+
+```
+
+        body {
+            background-color: #eee;
+        }
+
+        .box {
+            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;
+        }
+
+        .box:hover img:nth-child(6) {
+            transform: rotate(-10deg);
+        }
+
+        .box:hover img:nth-child(5) {
+            transform: rotate(-20deg);
+        }
+
+        .box:hover img:nth-child(4) {
+            transform: rotate(-30deg);
+        }
+
+        .box:hover img:nth-child(3) {
+            transform: rotate(-40deg);
+        }
+
+        .box:hover img:nth-child(2) {
+            transform: rotate(-50deg);
+        }
+
+        .box:hover img:nth-child(1) {
+            transform: rotate(-60deg);
+        }
+
+        .box:hover img:nth-child(8) {
+            transform: rotate(10deg);
+        }
+
+        .box:hover img:nth-child(9) {
+            transform: rotate(20deg);
+        }
+
+        .box:hover img:nth-child(10) {
+            transform: rotate(30deg);
+        }
+
+        .box:hover img:nth-child(11) {
+            transform: rotate(40deg);
+        }
+
+        .box:hover img:nth-child(12) {
+            transform: rotate(50deg);
+        }
+
+        .box:hover img:nth-child(13) {
+            transform: rotate(60deg);
+        }
+```
+
+
+
+### 效果：
+
+![screenshots7](https://gitee.com/BMChu070/ovo/raw/master/imgs/screenshots7.gif)
+
+### 代码：
+
+```
+   .box {
+      width: 305px;
+      height: 325px;
+      margin: 50px auto;
+      position: relative;
+      background-color: cornflowerblue;
+      padding-top: 10px;
+    }
+
+    .box1,
+    .box2 {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      border-radius: 50%;
+      transition: all 2s;
+      backface-visibility: hidden;
+    }
+
+    .box1 {
+      background: url('./img/20231017211318.png') left 0 no-repeat;
+    }
+
+    .box2 {
+      background: url('./img/20231017211318.png') right 0 no-repeat;
+      transform: rotateY(180deg);
+    }
+
+    .box:hover .box1 {
+      transform: rotateY(180deg);
+    }
+
+    .box:hover .box2 {
+      transform: rotateY(0deg);
+    }
+```
\ No newline at end of file