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/\344\275\234\344\270\232/2024-10-24/d1.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..084205059ad042969d703e7b34a8333de0194cc2
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d1.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d2.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1d76a46cf91eb848143c81cc6f6d3e41713ed12b
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d2.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d3.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a7d119f4e17d054ea75023095a5d5e7174a259a1
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d3.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d4.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2eb5db3eec990375b753dff1505546c6f1489e14
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/d4.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image1.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..eb3f27a69ff41b2142d0b443abe0607ec2d042b6
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image1.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image2.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..80d7dda060dd5359e16d26ca893684cda422bbb4
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image2.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image3.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ae1d2974bcae32bd85ce24fc25b8804b419ddac6
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image3.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image4.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fe7cc098e15e962990025429c98d8544cf10a707
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image4.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image5.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2f651d11b185fd47a56903b4646de0bde09b8bc9
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image5.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image6.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..62ecd3c068bb88fcbfb74d29a90bbe6221e869fd
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image6.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image7.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..953fcd4d6f7d2f4a14f5273b4e53f3cbe4a3901a
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/image7.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/x1.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/x1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..339c4f2a89f19d1a36bc92cac552297f7b743dcc
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/x1.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/y1.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/y1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..dfc80e591424d1ff3d401037482057c4342125fe
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/y1.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/y2.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/y2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f84193b70e597d0be795edb74e51885dbf9f43fc
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/y2.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2731.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2731.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e07e5ab7178125af75e7f95fca4a9c48bea154ca
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2731.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;
+    }
+
+    .content {
+      width: 1200px;
+      height: 320px;
+      padding-left: 20px;
+      margin: 80px auto;
+      overflow: hidden;
+    }
+
+    .xg {
+      width: 230px;
+      height: 370px;
+      text-align: center;
+      margin-right: 20px;
+      float: left;
+      position: relative;
+      overflow: hidden;
+      transition: all .5s;
+    }
+
+    img {
+      transition: filter 1s ease;
+    }
+
+    .xg:hover img {
+      filter: brightness(0.7);
+    }
+
+    .cs {
+      position: absolute;
+      left: 0;
+      bottom: -80px;
+      width: 100%;
+      height: 200px;
+      color: white;
+      line-height: 40px;
+      font-size: 18px;
+      transition: all .5s;
+      text-align: center;
+      opacity: 0;
+    }
+
+    .xg:hover {
+      top: -5px;
+      box-shadow: 0 0 15px #AAA;
+    }
+
+    .xg:hover .cs {
+      bottom: 10px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="content">
+    <div class="xg">
+      <img src="./d1.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </div>
+    <div class="xg">
+      <img src="./d2.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </div>
+    <div class="xg">
+      <img src="./d3.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </div>
+    <div class="xg">
+      <img src="./d4.png" alt="">
+      <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+    </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-24/\345\212\250\347\224\2732.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2732.html"
new file mode 100644
index 0000000000000000000000000000000000000000..130f28b414c37da283067c73378505590aa5b556
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2732.html"
@@ -0,0 +1,109 @@
+<!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(./y2.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(./y1.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\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2733.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2733.html"
new file mode 100644
index 0000000000000000000000000000000000000000..085c9b9ec9273ca08fd738565ac852e822a65b08
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\345\212\250\347\224\2733.html"
@@ -0,0 +1,62 @@
+<!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(./x1.png) left;
+      animation: bxRun 1s steps(8) infinite;
+      display: inline-block;
+    }
+
+    .bxBox {
+      width: 200px;
+      height: 100px;
+      animation: bxBoxRun 20s 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\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2411.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2411.html"
new file mode 100644
index 0000000000000000000000000000000000000000..327952a0ad350fdc615192f533ebe91499ba6ac4
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2411.html"
@@ -0,0 +1,79 @@
+<!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="./image1.png" alt="">
+        </div>
+
+        <div class="xi">
+            <img src="./image2.png" alt="">
+            <span class="desc"></span>
+        </div>
+        <div class="xi">
+            <img src="./image3.png" alt="">
+            <span></span>
+        </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-24/\350\277\207\346\270\2412.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2412.html"
new file mode 100644
index 0000000000000000000000000000000000000000..af423a5a3727b9c1a44c1fa0ffb109674b053802
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2412.html"
@@ -0,0 +1,28 @@
+<!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: 100px;
+            height: 100px;
+            background-color: pink;
+            font-size: 20px;
+            color: white;
+            transition: all 2s;
+        }
+
+        div:hover {
+            transform: rotate(-410deg);
+        }
+    </style>
+</head>
+
+<body>
+    <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-24/\350\277\207\346\270\2413.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2413.html"
new file mode 100644
index 0000000000000000000000000000000000000000..091c5164cd4b60961f8a2b01f9b56880bcaa5e61
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2413.html"
@@ -0,0 +1,33 @@
+<!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 {
+      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);
+    }
+  </style>
+</head>
+
+<body>
+  <img class="xhj" src="./image4.png" alt="" />
+</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-24/\350\277\207\346\270\2414.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2414.html"
new file mode 100644
index 0000000000000000000000000000000000000000..21bef54425ecf25816d7062cd04b7a322f738575
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2414.html"
@@ -0,0 +1,100 @@
+<!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;
+    }
+
+    .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);
+    }
+  </style>
+</head>
+
+</head>
+
+<body>
+  <div class="box">
+    <img src="./image5.png" />
+    <img src="./image6.png" />
+    <img src="./image5.png" />
+    <img src="./image6.png" />
+    <img src="./image5.png" />
+    <img src="./image6.png" />
+    <img src="./image5.png" />
+    <img src="./image6.png" />
+    <img src="./image5.png" />
+    <img src="./image6.png" />
+    <img src="./image5.png" />
+    <img src="./image6.png" />
+    <img src="./image5.png" />
+  </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-24/\350\277\207\346\270\2416.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2416.html"
new file mode 100644
index 0000000000000000000000000000000000000000..60ed16965b40db29f353afd58f49a056332b3711
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2416.html"
@@ -0,0 +1,56 @@
+<!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>
+    .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('./image7.png') left 0 no-repeat;
+    }
+
+    .box2 {
+      background: url('./image7.png') right 0 no-repeat;
+      transform: rotateY(180deg);
+    }
+
+    .box:hover .box1 {
+      transform: rotateY(180deg);
+    }
+
+    .box:hover .box2 {
+      transform: rotateY(0deg);
+    }
+  </style>
+</head>
+
+<body>
+  <div class="bgc">
+    <div class="box">
+      <div class="box1"></div>
+      <div class="box2"></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
diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-24-\345\212\250\347\224\273.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-24-\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..52a7b7ef7deb6dd4073323a41e6d741559b116da
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-24-\345\212\250\347\224\273.md"
@@ -0,0 +1,107 @@
+# 动画
+## 过渡：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，意思是只让盒子的宽度在变化时进行过渡。
+
+## 2D 转换transform
+可以实现元素的位移、旋转、变形、缩放
+
+属性:
+1. 缩放：scale
+```html
+// x：表示水平方向的缩放倍数。y：表示垂直方向
+transform: scale(x, y); 的缩放倍数。
+
+//取值：大于1表示放大，小于1表示缩小。不能为百分比。
+transform: scale(2, 0.5);
+```
+2. 位移：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，往左走自己宽度的一半【推荐写法】
+	}
+```
+3. 旋转：rotate
+```
+//transform: rotate(角度);
+transform: rotate(角度);
+
+transform: rotate(45deg);
+```
+
+## 3D转换
+1. 旋转：rotateX、rotateY、rotateZ
+```
+    transform: rotateX(360deg);    //绕 X 轴旋转360度
+    
+    transform: rotateY(360deg);    //绕 Y 轴旋转360度
+    
+    transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+```
+2. 移动：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;
\ No newline at end of file
