diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/image.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/image.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e7383e82d2874f0ccdd883ce8ece69259e2e57bd
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/image.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/image2.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/image2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9a2e5a055cdcea38e2dd338b767a8cb7be79543d
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/image2.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21501.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21501.html"
new file mode 100644
index 0000000000000000000000000000000000000000..417f287d89dae3b49b9063c767484c3a5efce932
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21501.html"
@@ -0,0 +1,39 @@
+<!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;
+        }
+
+        /* .father {
+            width: 500px;
+            height: 500px;
+            position: relative;
+        } */
+
+        .son {
+            width: 200px;
+            height: 100px;
+            border: 1px solid gray;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -50px;
+            margin-left: -100px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="father">
+        <div class="son">8888</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21502.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21502.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ea83bf5be1c1b982fb6c1370dfa8c5651f136ab8
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21502.html"
@@ -0,0 +1,71 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .top {
+            width: 100%;
+            height: 50px;
+            background-color: black;
+            position: relative;
+            position: fixed;
+
+        }
+
+        .bottom {
+            width: 200px;
+            height: 900px;
+            position: absolute;
+            margin-top: 50px;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div class="top">
+    </div>
+ 
+        <div class="bottom">
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+            <p>77777777777777777777</p>
+        </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21503.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21503.html"
new file mode 100644
index 0000000000000000000000000000000000000000..51d88fa5de26dc44eb6d9a5efa4c15bb0d843083
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-21/\345\256\232\344\275\21503.html"
@@ -0,0 +1,45 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        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;
+        }
+    </style>
+</head>
+
+<body>
+    <p>快看这是什么<span class="tooltip">OMG是小飞棍来咯!</span></p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/20231010221623.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/20231010221623.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5bcddb4c7afead15912d00421a1f12a05046fe3e
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/20231010221623.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/20231010221714.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/20231010221714.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ed10d0cb97548f4b69cfdc475ce1f5e62b10ebb2
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/20231010221714.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/image.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/image.png"
new file mode 100644
index 0000000000000000000000000000000000000000..865d2d32dd52016935a73d6a08fe0296c4b8d955
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/image.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/\347\262\276\347\201\265\345\233\27601.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/\347\262\276\347\201\265\345\233\27601.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f2d81345b273bbba88fdc1a957e89b135d8e750c
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/\347\262\276\347\201\265\345\233\27601.html"
@@ -0,0 +1,60 @@
+<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;
+        }
+     
+        .d1{
+            width: 70px;
+            height: 76px;
+            background: url('./image.png') no-repeat -1px -1px;
+            
+        }
+        .d2{
+            width: 70px;
+            height: 76px;
+            background: url('./image.png') no-repeat -80px 0px;
+        }
+        .d3{
+            width: 70px;
+            height: 76px;
+            background: url('./image.png') no-repeat -163px 0px;
+        }
+        .d4{
+            width: 70px;
+            height: 76px;
+            background: url('./image.png') no-repeat -6px -90px;
+        }
+        .d5{
+            width: 70px;
+            height: 76px;
+            background: url('./image.png') no-repeat -85px -80px;
+        }
+        .d6{
+            width: 70px;
+            height: 76px;
+            background: url('./image.png') no-repeat -168px -81px;
+        }
+        span{
+            display: inline-block;
+            float: left;
+           margin-left: 70px;
+           margin-top: -60px;
+           font-size: 30px;
+        }
+    </style>
+</head>
+<body>
+    <p class="d1"></p><span>付款图标</span>
+    <p class="d2"></p><span>存款图标</span>
+    <p class="d3"></p><span>删除图标</span>
+    <p class="d4"></p><span>粘贴图标</span>
+    <p class="d5"></p><span>笑脸图标</span>
+    <p class="d6"></p><span>编辑图标</span>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/\347\262\276\347\201\265\345\233\27602.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/\347\262\276\347\201\265\345\233\27602.html"
new file mode 100644
index 0000000000000000000000000000000000000000..594a3adb2c78634e05c8271ba36cc91ccf931e1d
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-23/\347\262\276\347\201\265\345\233\27602.html"
@@ -0,0 +1,105 @@
+<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;
+        }
+
+        .big {
+            width: 440px;
+            height: 500px;
+            margin: 20 auto;
+        }
+
+        .top {
+            width: 440px;
+            height: 280px;
+            background-image: url('./20231010221714.png');
+        }
+
+        .little {
+            width: 52px;
+            height: 28px;
+            background: url('./20231010221623.png') no-repeat -108px 0px;
+            margin-left: 15px;
+            float: left;
+            margin-top: -10px;
+            position: relative;
+        }
+
+        .middle {
+            width: 430px;
+            height: 50px;
+            background-color: rgb(0, 0, 0, 0.5);
+            position: absolute;
+            top: 250px;
+            color: white;
+            line-height: 50px;
+            padding-left: 10px;
+        }
+
+        .bottom {
+            width: 436px;
+            height: 150px;
+            background-color: white;
+            border: 2px solid orange;
+            border-top: none;
+        }
+
+        .p1 {
+            font-size: 18px;
+            font-weight: 700;
+        }
+
+        .p2 {
+            font-size: 16px;
+            color: gray;
+            text-indent: 0.5em;
+        }
+
+        p {
+            padding-top: 15px;
+            padding-left: 10px;
+        }
+
+        .dollar {
+            float: left;
+            font-size: 25px;
+            color: #ff891e;
+            padding-left: 18px;
+            padding-top: 25px;
+        }
+
+        .mai {
+            color: gray;
+            float: right;
+            padding-right: 15px;
+            padding-top: 33px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="big">
+        <div class="top">
+            <div class="little"></div>
+            <div class="middle">广东深圳宝安区建安一路海雅缤纷城4楼</div>
+        </div>
+        <div class="bottom">
+            <div class="text">
+                <p class="p1">【海滩缤纷城】万达影城（深圳海雅广场...</p>
+                <p class="p2">单人电影票，可观看2D</p>
+            </div>
+            <div class="dollar">￥35 <span style="color: gray;text-decoration: line-through;font-size: 14px;">￥80</span>
+            </div>
+            <div class="mai">已售<span style="color:#ff1d6c;">225</span></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-21-\345\256\232\344\275\215.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-21-\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0e2c7d855347f2e88c8747651d2cb7fb2bc8c5e8
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-21-\345\256\232\344\275\215.md"
@@ -0,0 +1,26 @@
+## 1.相对定位(position:relative)
+自身原来的位置，并保留自身位置
+## 2.绝对定位（position:absolute）
+对于祖先元素，没有父亲就以浏览器为准， 或者父亲无定位（不保留位置）
+## 3.固定定位（position:fixed）
+以浏览器可视窗口，不随滚动条滚动（不占有位置）
+
+常用“子绝父相”
+
+(小技巧)：固定在版心右侧位置
+1. 让固定定位的盒子left:50%,走到浏览器可视区（版心）的一半
+2. 让固定定位的盒子margin-left:版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐
+
+## 4.粘性定位（不常用）
+sticky  必须添加（top，bottom，left，right其中一个才有效）
+
+## 5.定位叠放顺序：（数值越大，越靠上）
+z-index:1(只有定位的盒子才有用)
+
+### 加了绝对定位的盒子不能水平居中怎么办？
+方法：left:50%,top:50%,margin-left:-100px,margin-top:-100px
+
+#### 定位的特性：
+1. 行内元素加了绝对或相对定位，可不设宽高（由内容决定）
+2. 会完全压住盒子和内容，与浮动不同
+
diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-23-\347\262\276\347\201\265\345\233\276andCSS\351\200\211\346\213\251\345\231\250.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-23-\347\262\276\347\201\265\345\233\276andCSS\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9746600a6f241a87ae55ad19726cf2f408a4eb76
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-23-\347\262\276\347\201\265\345\233\276andCSS\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,118 @@
+## 精灵图
+精灵图（Sprite），也被称为雪碧图或CSS Sprite，是一种有效的网页图片应用处理方式。
+
+1. 一、精灵图的介绍
+定义：精灵图通过将多个小图标或图片合并到一张大图中，然后通过CSS定位来显示需要显示的图片部分。
+
+原理：利用CSS的background-position属性来定位并显示大图中的特定部分。
+
+作用：
+减少网页的HTTP请求数量，因为所有小图标或图片都整合在一张大图中，只需要一次HTTP请求就可以加载。
+提高网页的加载速度和性能。
+方便进行样式调整和图片裁剪，因为所有图片都在一张大图中。
+
+2. 二、精灵图的使用方法
+制作精灵图：
+使用专业的图像编辑软件（如Photoshop）或精灵图制作工具（如TexturePacker）来合并多个小图标或图片成一张大图。
+在合并时，要确保每个小图标或图片之间有足够的间隙，避免在显示时出现重叠或模糊。
+
+在网页中使用精灵图：
+首先，将制作好的精灵图上传到网站的服务器或静态资源文件夹中。
+
+然后，在CSS中通过background-image属性设置元素的背景图片为精灵图。
+
+使用background-position属性来定位并显示精灵图中的特定部分。例如，如果要知道小图片左上角相对于精灵图左上角的偏移量，可以使用工具（如PxCook）进行测量，并将测量得到的负数坐标值设置为background-position属性的值（向左上移动图片位置）。
+
+注意事项：
+精灵图的大小要大于所有图片中最大的那个，以确保所有图片都能完整地显示在精灵图中。
+不要将一个像素的背景图片放在精灵图上，因为这可能会导致显示问题。
+如果需要更新精灵图的内容，应该使用精灵图的源文件进行修改，而不是直接修改png图片或配置文件。
+
+3. 三、实例演示
+假设有一个包含多个服务图标的精灵图，需要在网页上显示这些图标。可以使用以下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. 存在选择器：
+
+语法：[attribute]
+
+选择所有具有指定属性的元素，不论其属性值为何。
+示例：[title]会选择所有具有title属性的元素。
+
+2. 完全匹配选择器：
+
+语法：[attribute="value"]
+
+选择属性值完全等于指定值的元素。
+
+示例：[href="https://www.example.com"]会选择href属性值完全等于https://www.example.com的元素。
+
+3. 开始匹配选择器：
+
+语法：[attribute^="value"]
+
+选择属性值以指定值开始的元素。
+
+示例：[href^="https://"]会选择href属性值以https://开始的元素。
+
+4. 结束匹配选择器：
+
+语法：[attribute$="value"]
+
+选择属性值以指定值结束的元素。
+
+示例：[href$=".pdf"]会选择href属性值以.pdf结束的元素。
+
+5. 包含匹配选择器：
+
+语法：[attribute*="value"]
+
+选择属性值包含指定字符串的元素。
+
+示例：[title*="hello"]会选择title属性值包含hello字符串的元素。
+
+6. 词匹配选择器：
+
+语法：[attribute~="value"]
+
+选择属性值中包含指定单词的元素，单词由空格分隔。
+示例：[class~="active"]会选择class属性值中包含active单词的元素。
+
+6. 前缀匹配选择器（主要用于语言代码或文档类型等属性）：
+
+语法：[attribute|="value"]
+
+选择属性值以指定值开始或者完全等于指定值的元素。
+
+示例：[lang|="en"]会选择lang属性值以en开始或等于en的元素。
\ No newline at end of file
