diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241021.png" "b/\346\235\250\346\210\220\350\261\252/img/20241021.png"
new file mode 100644
index 0000000000000000000000000000000000000000..00138ea2a9ec09abba06e7f0a3bde57b05342cc6
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241021.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241023(2).png" "b/\346\235\250\346\210\220\350\261\252/img/20241023(2).png"
new file mode 100644
index 0000000000000000000000000000000000000000..5bcddb4c7afead15912d00421a1f12a05046fe3e
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241023(2).png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241023(3).png" "b/\346\235\250\346\210\220\350\261\252/img/20241023(3).png"
new file mode 100644
index 0000000000000000000000000000000000000000..ed10d0cb97548f4b69cfdc475ce1f5e62b10ebb2
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241023(3).png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241023.png" "b/\346\235\250\346\210\220\350\261\252/img/20241023.png"
new file mode 100644
index 0000000000000000000000000000000000000000..00138ea2a9ec09abba06e7f0a3bde57b05342cc6
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241023.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/1.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..599dbe48c3fba3fe0549e88d5d79f6f863d9acc8
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/1.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/10.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241024/10.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ba48086cab936a6c4c0d0792471e5d54e91d31cb
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/10.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/11.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241024/11.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..00ee222329eabde75bb36f862c3b7e21cacb132b
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/11.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/12.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/12.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d60ff6ecde05412936fd712b7588684c3faf79a2
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/12.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/13.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/13.png"
new file mode 100644
index 0000000000000000000000000000000000000000..667e7fd5bd158f95ebfbce25fc5a866b3ad31704
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/13.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/2.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/2.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/3.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241024/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/3.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/4.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b86c8249d78b653db95fff220ebccaec7cee5f
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/4.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/5.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..aa91346b17db7b1c0a0da3be60a79c1537250e8e
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/5.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/6.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b2364f5aa00b1865127c7d57d569496999752a23
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/6.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/7.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9dbf1b1ad56501a0fd12ea48bc7192c1a0480fc8
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/7.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/8.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241024/8.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..67248159c4b149e3c2b069b8af04b3b1145cbe17
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/8.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/9.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241024/9.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1a6fa6054f91a0cb8616eab0116316d5cf3f3ac6
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/9.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24001.html"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html"
rename to "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24001.html"
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24002.html"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html"
rename to "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24002.html"
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24003.html"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html"
rename to "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24003.html"
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24004.html"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html"
rename to "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24004.html"
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24005.html"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html"
rename to "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24005.html"
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24006.html"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html"
rename to "\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\24006.html"
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21501.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21501.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2db6cddee75f2f7a824da4088805e7b72d20b73d
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21501.html"
@@ -0,0 +1,30 @@
+<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: 400px;
+            height: 400px;
+            border: 1px solid black;
+            position: relative;
+        }
+        .d11{
+            width: 200px;
+            height: 200px;
+            position: absolute;
+            top: 50%;
+            right: 50%;
+            margin-right: -99px;
+            margin-top: -99px;
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d11">8888</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21502.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21502.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2ffeb295cdf502ba9a2eeb6db0e6c8e3eba7ccf6
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21502.html"
@@ -0,0 +1,102 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .d1{
+            background-color: rgb(204,204,204);
+            border: 1px solid black;
+            height: 40px;
+            width: 100%;
+            position: fixed;
+            z-index: 9999;
+            top:0px;
+            left: 0px;
+        }
+        .d2{
+            position: absolute;
+            left: 40px;
+            width: 450px;
+            height: 800px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">8888</div>
+    <div class="d2">
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+        33333333333333333333333333333333333333333333333
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21503.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21503.html"
new file mode 100644
index 0000000000000000000000000000000000000000..48e89b2eb255346a8e850d9a5ef7c2097435038f
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\345\256\232\344\275\21503.html"
@@ -0,0 +1,24 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div{
+            position: relative;
+        }
+        div:hover::after{
+            position: absolute;
+            top: 21px;
+            left: -1px;
+            background-color: black;
+            content: attr(title);
+            color: white;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div title="我是提示文字撒">昂，你来晚了哈</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\347\262\276\347\201\265\345\233\276.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\347\262\276\347\201\265\345\233\276.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a6d5f5c274cf1c6a53544ab708e271bdcaf64e83
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241021-\347\262\276\347\201\265\345\233\276.html"
@@ -0,0 +1,77 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div {
+            float: left;
+        }
+        .all{
+            width: 200px;
+            height: 200px;
+        }
+        .all>div {
+            width: 200px;
+            height: 21px;
+        }
+
+        .d1{
+            height: 21px;
+            width: 20px;
+            background-image: url(../img/20241023.png);
+            background-size: 60px;
+            background-repeat: no-repeat;
+        }
+        .two>div{
+            background-position: 0px 2px;
+        }
+        .two1>div{
+            background-position: -21px 2px;
+        }
+        .two2>div{
+            background-position: -41px 2px;
+        }
+        .two3>div{
+            background-position: -1px -20px;
+        }
+        .two4>div{
+            background-position: -21px -20px;
+        }
+        .two5>div{
+            background-position: -42px -20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="two">
+            <div class="d1"></div>
+            <div>付款图标</div>
+        </div>
+        <div class="two1">
+            <div class="d1"></div>
+            <div>付款图标</div>
+        </div>
+        <div class="two2">
+            <div class="d1"></div>
+            <div>付款图标</div>
+        </div>
+        <div class="two3">
+            <div class="d1"></div>
+            <div>付款图标</div>
+        </div>
+        <div class="two4">
+            <div class="d1"></div>
+            <div>付款图标</div>
+        </div>
+        <div class="two5">
+            <div class="d1"></div>
+            <div>付款图标</div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241023-\345\256\232\344\275\21504.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241023-\345\256\232\344\275\21504.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5646737a3e4606112375c6cd317768984b41d97d
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241023-\345\256\232\344\275\21504.html"
@@ -0,0 +1,126 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all {
+            width: 440px;
+            height: 420px;
+            margin: 40px;
+            position: absolute;
+            border: 2px solid rgb(255,137,92);
+        }
+        .one {
+            width: 440px;
+            height: 280px;
+            background-image: url(../img/20241023\(3\).png);
+            background-repeat: no-repeat;
+            position: absolute;
+        }
+
+        .o1 {
+            width: 83px;
+            height: 40px;
+            position: relative;
+            left: 10px;
+            top: -8px;
+            background-image: url(../img/20241023\(2\).png);
+            background-repeat: no-repeat;
+            background-size: 250px;
+            background-position: -155px -4px;
+        }
+
+        .o2 {
+            width: 440px;
+            color: white;
+            background-color: black;
+            height: 60px;
+            position: relative;
+            top: 180px;
+            opacity: 0.6;
+            text-align: center;
+
+        }
+        .text{
+            width: 400px;
+            height: 21px;
+            padding-top: 21px;
+        }
+        .two {
+            width: 440px;
+            height: 150px;
+            position: absolute;
+            top: 280px;
+        }
+        .t1{
+            width: 325px;
+            height: 21px;
+            margin: 20px  0px 7px 13px;
+            font-weight: bolder;
+        }
+        .t2{
+            width: 350px;
+            height: 21px;
+            margin: 0px 0px 20px 20px;
+            color: rgb(185,189,189);
+        }
+        .t3{
+            width: 80px;
+            height: 40px;
+            color: rgb(255,137,92);
+            margin: -5px 0px 0px 13px;
+            font-size: 30px;
+        }
+        .t3::first-letter{
+            font-size: 20px;
+        }
+        .t4{
+            width: 40px;
+            height: 21px;
+            position: relative;
+            left: 85px;
+            top: -25px;
+            color: rgb(185,189,189);
+            text-decoration: line-through;
+        }
+        .t5{
+            width: 40px;
+            height: 21px;
+            color: rgb(185,189,189);
+            position: relative;
+            left: 360px;
+            top: -49px;
+        }
+        .t6{
+            width: 40px;
+            height: 21px;
+            color: rgb(251,54,173);
+            position: relative;
+            left: 400px;
+            top: -70px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="one">
+            <div class="o1"></div>
+            <div class="o2">
+                <div class="text">广东深圳宝安区建安一路海雅缤纷城4楼</div>
+            </div>
+        </div>
+        <div class="two">
+            <div class="t1">【海雅缤纷城】万达影城（深圳海雅广场...</div>
+            <div class="t2">单人电影票，可观看2D</div>
+            <div class="t3">￥35</div>
+            <div class="t4">￥80</div>
+            <div class="t5">已售</div>
+            <div class="t6">225</div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27301.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27301.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a64dc0a8d00b742b751687db35e77cdfda4deaa3
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27301.html"
@@ -0,0 +1,67 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all {
+            width: 750px;
+            height: 300px;
+            margin: 100px;
+            position: relative;
+            overflow: hidden;
+            transition: all 1s;
+        }
+
+        .one,
+        .two,
+        .three {
+            width: 230px;
+            height: 300px;
+            float: left;
+        }
+
+        .two:hover,
+        .three:hover,
+        .one:hover {
+            transform: translate(0px, -6px);
+            box-shadow: 0px 0px 10px rgb(170, 166, 166);
+        }
+
+        img {
+            margin-top: 45px;
+        }
+
+        .t1,.t2 {
+            width: 230px;
+            height: 80px;
+            position: absolute;
+            top: 306px;
+            background-color: rgb(255,104,0);
+        }
+        .two:hover .t1,.three:hover .t2{
+            transform: translate(0px, -86px);
+            transition: all 1s;
+        }
+      
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="one">
+            <img src="../img/20241024/1.png" alt="">
+        </div>
+        <div class="two">
+            <img src="../img/20241024/2.png" alt="">
+            <div class="t1"></div>
+        </div>
+        <div class="three">
+            <img src="../img/20241024/3.jpg" alt="">
+            <div class="t2"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27302.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27302.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dd8cb57e5a31aacae154ac02a545666ca5496524
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27302.html"
@@ -0,0 +1,27 @@
+<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: 200px;
+            height: 200px;
+            color: white;
+            background-color: red;
+            font-size: 50px;
+            margin: 200px;
+        }
+        div:hover{
+            transform: rotate(-405deg);
+            transition: all 2s ;
+
+        }
+    </style>
+</head>
+<body>
+    <div>
+        遥遥领先
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27303.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27303.html"
new file mode 100644
index 0000000000000000000000000000000000000000..79f3227d8e0dac98f2318faffae4cc59170fd5b0
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27303.html"
@@ -0,0 +1,30 @@
+<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: rgb(224,137,15);
+        }
+        div{
+            width: 60px;
+            height: 110px;
+            background-image: url(../img/20241024/4.png);
+            background-size: 60px;
+            animation: move1 3s infinite  normal backwards ease-in;
+        }
+        @keyframes move1{
+            from{
+                transform: translateY(1000px) rotate(45deg);
+            }
+            to{
+                transform: translateX(1000px) rotate(45deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27304.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27304.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3d8e2f60f9ec9d0e5f99cc8d34a39d857a6fe442
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27304.html"
@@ -0,0 +1,78 @@
+<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: 300px;
+            height: 412px;
+            margin: auto;
+            position: relative;
+            margin-top: 40px;
+        }
+        img{
+            width: 300px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            transition: all 1s;
+            transform-origin: 150px 420px;
+
+        }
+        div:hover img:nth-child(1){
+            transform: rotate(-60deg);
+        }
+        div:hover img:nth-child(2){
+            transform: rotate(-50deg);
+        }
+        div:hover img:nth-child(3){
+            transform: rotate(-40deg);
+        }
+        div:hover img:nth-child(4){
+            transform: rotate(-30deg);
+        }
+        div:hover img:nth-child(5){
+            transform: rotate(-20deg);
+        }
+        div:hover img:nth-child(6){
+            transform: rotate(-10deg);
+        }
+        div:hover img:nth-child(13){
+            transform: rotate(60deg);
+        }
+        div:hover img:nth-child(12){
+            transform: rotate(50deg);
+        }
+        div:hover img:nth-child(11){
+            transform: rotate(40deg);
+        }
+        div:hover img:nth-child(10){
+            transform: rotate(30deg);
+        }
+        div:hover img:nth-child(9){
+            transform: rotate(20deg);
+        }
+        div:hover img:nth-child(8){
+            transform: rotate(10deg);
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <img src="../img/20241024/5.png" alt="">
+        <img src="../img/20241024/6.png" alt="">        
+        <img src="../img/20241024/5.png" alt="">
+        <img src="../img/20241024/6.png" alt="">
+        <img src="../img/20241024/5.png" alt="">
+        <img src="../img/20241024/6.png" alt="">
+        <img src="../img/20241024/5.png" alt="">
+        <img src="../img/20241024/6.png" alt="">
+        <img src="../img/20241024/5.png" alt="">
+        <img src="../img/20241024/6.png" alt="">
+        <img src="../img/20241024/5.png" alt="">
+        <img src="../img/20241024/6.png" alt="">
+        <img src="../img/20241024/5.png" alt="">
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27305.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27305.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5432c46621ce0fb4d44c3777e5f4a8a6152fd099
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27305.html"
@@ -0,0 +1,47 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all {
+            position: relative;
+            width: 300px;
+            height: 300px;
+            position: relative;
+            overflow: hidden;
+        }
+        .one,
+        .two {
+            width: 303px;
+            height: 301px;
+            position: absolute;
+            backface-visibility: hidden;
+            transition: all 2s;
+        }
+        .one {
+            background: url(../img/20241024/7.png) left 0 no-repeat;
+        }
+        .two {
+            background: url(../img/20241024/7.png) right 0 no-repeat;
+            transform: rotateY(180deg);
+        }
+        .all:hover .one {
+            transform: rotateY(180deg);
+        }
+
+        .all:hover .two {
+            transform: rotateY(0deg);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="one"></div>
+        <div class="two"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27306.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27306.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c30b0e4289e74c5c05333f5576c7b18d9604080a
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27306.html"
@@ -0,0 +1,112 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body {
+            min-width: 1220px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: whitesmoke;
+        }
+
+        .BOX {
+            position: relative;
+            width: 1220px;
+            height: 410px;
+            background-color: white;
+            border-radius: 10px;
+        }
+
+        .BOX img {
+            margin: 20px 0px 20px 20px;
+        }
+
+        .Item {
+            position: relative;
+            width: 280px;
+            height: 370px;
+            width: auto;
+            height: auto;
+            float: left;
+            overflow: hidden;
+        }
+
+        .Top {
+            position: absolute;
+            left: 40px;
+            top: -30px;
+            font-size: 20px;
+            color: white;
+            transition: all 1s;
+        }
+
+        .Left {
+            position: absolute;
+            left: -100px;
+            bottom: 125px;
+            font-size: 14px;
+            color: white;
+            transition: all 1s;
+        }
+
+        .Bottom {
+            width: 250px;
+            position: absolute;
+            left: -240px;
+            bottom: 75px;
+            font-size: 14px;
+            color: white;
+            transition: all 1s;
+        }
+
+        .Item:hover .Top {
+            top: 230px;
+        }
+
+        .Item:hover .Left {
+            left: 45px;
+        }
+
+        .Item:hover .Bottom {
+            left: 40px;
+        }
+
+        .Item:hover img {
+            filter: brightness(0.5);
+            transition: all 1s;
+        }
+    </style>
+</head>
+<body>
+    <div class="BOX">
+        <div class="Item">
+            <img src="../img/20241024/8.jpg" alt="">
+            <span class="Top">《大鱼》</span>
+            <span class="Left">演唱：周深</span>
+            <span class="Bottom">海浪无声将夜幕深深淹没，漫过天空尽头的角落</span>
+        </div>
+        <div class="Item">
+            <img src="../img/20241024/9.jpg" alt="">
+            <span class="Top">《大鱼》</span>
+            <span class="Left">演唱：周深</span>
+            <span class="Bottom">海浪无声将夜幕深深淹没，漫过天空尽头的角落</span>
+        </div>
+        <div class="Item">
+            <img src="../img/20241024/10.jpg" alt="">
+            <span class="Top">《大鱼》</span>
+            <span class="Left">演唱：周深</span>
+            <span class="Bottom">海浪无声将夜幕深深淹没，漫过天空尽头的角落</span>
+        </div>
+        <div class="Item">
+            <img src="../img/20241024/11.jpg" alt="">
+            <span class="Top">《大鱼》</span>
+            <span class="Left">演唱：周深</span>
+            <span class="Bottom">海浪无声将夜幕深深淹没，漫过天空尽头的角落</span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27307.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27307.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4829a149c8a79648d7910c74cebeaeadb69e1486
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27307.html"
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+
+<html lang="zh">
+<meta charset="UTF-8">
+<title></title>
+<style>
+    body{
+        background-color: cornflowerblue;
+    }
+    .shark {
+        width: 509px;
+        height: 270px;
+        margin: 100px auto;
+        background: url(../img/20241024/13.png) left top;
+        animation: sharkRun 1s steps(8) infinite;
+    }
+
+    .sharkBox {
+        width: 509px;
+        height: 270px;
+        animation: sharkBoxRun 10s linear infinite;
+    }
+
+    @keyframes sharkRun {
+        0% {}
+
+        100% {
+            background-position: left -2160px;
+        }
+    }
+
+    @keyframes sharkBoxRun {
+        0% {
+            transform: translateX(-600px);
+        }
+
+        100% {
+            transform: translateX(1800px);
+        }
+    }
+
+    .Fish {
+        width: 174px;
+        height: 126px;
+        margin: 100px auto;
+        background: url(../img/20241024/12.png) left top;
+        animation: FishRun 1s steps(7) infinite;
+    }
+
+    .FishBox {
+        position: absolute;
+        bottom: 200px;
+        width: 174px;
+        height: 126px;
+        animation: FishBoxRun 20s infinite;
+    }
+
+    @keyframes FishRun {
+        0% {}
+
+        100% {
+            background-position: left -882px;
+        }
+    }
+
+    @keyframes FishBoxRun {
+        0% {
+            transform: translateX(0px) translateY(0px) rotate(-25deg);
+        }
+
+        25% {
+            transform: translateX(400px) translateY(-280px) rotate(-15deg);
+        }
+
+        50% {
+            transform: translateX(800px) translateY(-380px) rotate(0deg);
+        }
+
+        75% {
+            transform: translateX(1300px) translateY(-180px) rotate(20deg);
+        }
+
+        100% {
+            transform: translateX(1600px) translateY(-10px) rotate(40deg);
+        }
+    }
+</style>
+</head>
+
+<body>
+    <div class="sharkBox">
+        <div class="shark"></div>
+    </div>
+
+    <div class="FishBox">
+        <div class="Fish"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27308.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27308.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b16e7c83bcfaba413e71d6065d58d377a4cf0b65
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27308.html"
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .Box {
+            margin-top: 350px;
+            width: 1756px;
+            height: 118px;
+            background-color: green;
+        }
+
+        .Bear {
+            position: relative;
+            top: 9px;
+            width: 200px;
+            height: 100px;
+            background: url(https://img.haruka.net.cn/image/2024/10/24/i8xj1b-0.png) 0 0 no-repeat;
+            animation: BearRun 1s steps(8) infinite;
+        }
+
+        .BearBox {
+            width: 200px;
+            height: 118px;
+            animation: BearBoxRun 5s infinite;
+        }
+
+        @keyframes BearRun {
+            0% {}
+
+            100% {
+                background-position: -1600px 0;
+            }
+        }
+
+        @keyframes BearBoxRun {
+            0% {}
+
+            25% {
+                transform: translateX(0px);
+            }
+
+            80% {
+                transform: translateX(1500px);
+            }
+
+            100% {
+                transform: translateX(1756px);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="Box">
+        <div class="BearBox">
+            <div class="Bear"></div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/20240904-git\346\223\215\344\275\234\347\254\224\350\256\260.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240904-git\346\223\215\344\275\234\347\254\224\350\256\260.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240904-git\346\223\215\344\275\234\347\254\224\350\256\260.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240904-git\346\223\215\344\275\234\347\254\224\350\256\260.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240905-\345\233\276\345\261\202.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240905-\345\233\276\345\261\202.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240905-\345\233\276\345\261\202.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240905-\345\233\276\345\261\202.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240909-html\345\237\272\346\234\254\346\240\207\347\255\276\345\222\214\344\275\277\347\224\250.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240909-html\345\237\272\346\234\254\346\240\207\347\255\276\345\222\214\344\275\277\347\224\250.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240909-html\345\237\272\346\234\254\346\240\207\347\255\276\345\222\214\344\275\277\347\224\250.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240909-html\345\237\272\346\234\254\346\240\207\347\255\276\345\222\214\344\275\277\347\224\250.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240911-html\345\237\272\346\234\254\346\240\207\347\255\276\345\217\212\345\261\236\346\200\247.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240911-html\345\237\272\346\234\254\346\240\207\347\255\276\345\217\212\345\261\236\346\200\247.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240911-html\345\237\272\346\234\254\346\240\207\347\255\276\345\217\212\345\261\236\346\200\247.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240911-html\345\237\272\346\234\254\346\240\207\347\255\276\345\217\212\345\261\236\346\200\247.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240914-\346\227\240\345\272\217\345\210\227\350\241\250.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240914-\346\227\240\345\272\217\345\210\227\350\241\250.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240914-\346\227\240\345\272\217\345\210\227\350\241\250.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240914-\346\227\240\345\272\217\345\210\227\350\241\250.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240918-\350\241\250\346\240\274\350\241\250\345\215\225.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240918-\350\241\250\346\240\274\350\241\250\345\215\225.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240918-\350\241\250\346\240\274\350\241\250\345\215\225.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240918-\350\241\250\346\240\274\350\241\250\345\215\225.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240919-\350\241\250\345\215\225.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240919-\350\241\250\345\215\225.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240919-\350\241\250\345\215\225.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240919-\350\241\250\345\215\225.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240923-\346\213\226\346\213\275\345\222\214\345\234\260\347\220\206\344\275\215\347\275\256\350\216\267\345\217\226.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240923-\346\213\226\346\213\275\345\222\214\345\234\260\347\220\206\344\275\215\347\275\256\350\216\267\345\217\226.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240923-\346\213\226\346\213\275\345\222\214\345\234\260\347\220\206\344\275\215\347\275\256\350\216\267\345\217\226.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240923-\346\213\226\346\213\275\345\222\214\345\234\260\347\220\206\344\275\215\347\275\256\350\216\267\345\217\226.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240926-css\345\237\272\347\241\200.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240926-css\345\237\272\347\241\200.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240926-css\345\237\272\347\241\200.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240926-css\345\237\272\347\241\200.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20240930-\350\203\214\346\231\257\345\261\236\346\200\247.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241009-\346\270\220\345\217\230.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20241009-\346\270\220\345\217\230.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241009-\346\270\220\345\217\230.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241012-\346\240\207\347\255\276\351\200\211\346\213\251\345\231\250.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241014-\344\274\252\347\261\273.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241014-\344\274\252\347\261\273.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
similarity index 100%
rename from "\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md"
rename to "\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
diff --git "a/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241021-\345\256\232\344\275\215.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241021-\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bd4893c4e661220e77ffa554eaa65bb403989449
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241021-\345\256\232\344\275\215.md"
@@ -0,0 +1,98 @@
+### 相对定位
+1. 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+
+2. 格式:
+```css
+    position: relative;
+	left: 50px;
+	top: 50px;
+```
+3. 用途：
+    + 微调元素
+    + 做绝对定位的参考，子绝父相
+    + **相对定位不脱标，别人不会把它的位置挤走**
+
+4. 定位值：(值为负则表示相反的方向)
+    - left：盒子右移
+    - right：盒子左移
+    - top：盒子下移
+    - bottom：盒子上移
+
+5. 练习：
+
+代码演示：
+```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: 400px;
+            height: 400px;
+            border: 1px solid black;
+            position: relative;
+        }
+        .d11{
+            width: 200px;
+            height: 200px;
+            position: absolute;
+            top: 50%;
+            right: 50%;
+            margin-right: -99px;
+            margin-top: -99px;
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d11">8888</div>
+    </div>
+</body>
+</html>
+```
+
+### 绝对定位
+
+1. 绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+
+2. 格式：
+    ```css
+        position: absolute;  /*绝对定位*/
+	    left: 10px;  /*横坐标*/
+	    top/bottom: 20px;  /*纵坐标*/
+    ```
+
+3. 参考点：绝对定位的盒子脱离了标准文档流，绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了
+    + 如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角
+    + 如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角
+
+4. 以盒子为参考点：一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素
+    + **子绝父相**：保证父亲没有脱标，儿子脱标在父亲的范围里面移动
+
+### 固定定位
+1. 固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+2. 代码演示：
+    ```css
+        position: fixed;
+		bottom: 100px;
+		right: 30px;
+		width: 60px;
+		height: 60px;
+    ```
+3. 用途：顶部导航栏
+
+### z-index属性
+1. z-index属性：表示谁压着谁。数值大的压盖住数值小的。
+2. 特性：
+    + 属性值大的位于上层，属性值小的位于下层。
+    + z-index值没有单位，就是一个正整数。默认的z-index值是0。
+    + 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+    + 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。
+    + 从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
+3. 层级:
+    + 必须有定位（除去static）
+    + 用`z-index`来控制层级数
+
diff --git "a/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241024-\345\212\250\347\224\273..md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241024-\345\212\250\347\224\273..md"
new file mode 100644
index 0000000000000000000000000000000000000000..d90f4fae5bed1e565fcd2188203cf652e5152668
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241024-\345\212\250\347\224\273..md"
@@ -0,0 +1,191 @@
+### 过渡：transition
+
+1. `transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
+
+2. 属性:
+
+    - `transition-property: all;`  如果希望所有的属性都发生过渡，就使用all。
+
+    - `transition-duration: 1s;` 过渡的持续时间。
+
+    - `transition-timing-function: linear;`  运动曲线。属性值可以是：
+
+        - `linear` 线性
+        - `ease`  减速
+        - `ease-in` 加速
+        - `ease-out` 减速
+        - `ease-in-out`  先加速后减速
+
+    - `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+3. 代码： 
+
+```javascript
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+	transition: all 3s linear 0s;
+```
+
+### 2D 转换
+
+1. 缩放：`scale`：
+
+    + 格式：
+
+    ```javascript
+        transform: scale(x, y);
+
+        transform: scale(2, 0.5);
+    ```
+
+    + 参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+    + 取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+2. 位移：`translate`
+
+    + 格式：
+    ```javascript
+        transform: translate(水平位移, 垂直位移);
+
+        transform: translate(-50%, -50%);
+    ```
+
+    + 参数解释：
+
+        - 参数为百分比，相对于自身移动。
+
+        - 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+3. 旋转：`rotate`
+
+    + 格式：
+
+    ```javascript
+        transform: rotate(角度);
+
+        transform: rotate(45deg);
+    ```
+
+    + 参数解释：正值 顺时针；负值：逆时针。
+
+
+
+### 3D 转换
+1. 旋转：rotateX、rotateY、rotateZ
+
+```javascript
+	transform: rotateX(360deg);    //绕 X 轴旋转360度
+
+	transform: rotateY(360deg);    //绕 Y 轴旋转360度
+
+	transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+
+```
+
+2. 移动：translateX、translateY、translateZ
+ 
+```javascript
+	transform: translateX(100px);    //沿着 X 轴移动
+
+	transform: translateY(360px);    //沿着 Y 轴移动
+
+	transform: translateZ(360px);    //沿着 Z 轴移动
+
+```
+
+3. 透视：perspective
+
+    + 格式有两种写法：
+
+        - 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+
+        - 作为 transform 属性的一个值，做用于元素自身。
+
+    格式举例：
+
+    ```css
+    perspective: 500px;
+    ```
+
+4. 3D呈现（transform-style）
+
+    + 3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。
+
+    ```css
+        transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */
+
+        transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
+    ```
+
+
+### 动画
+1. @keyframes定义动画>>在指定元素里通过 `animation` 属性调用动画
+2. 
+```javascript
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+3. `animation`
+    + 动画名称：
+
+    ```javascript
+        animation-name: move;
+    ```
+
+    + 执行一次动画的持续时间：
+
+    ```javascript
+        animation-duration: 4s;
+    ```
+
+    备注：上面两个属性，是必选项，且顺序固定。
+
+    + 动画的执行次数：
+
+    ```javascript
+        animation-iteration-count: 1;       //iteration的含义表示迭代
+    ```
+
+    属性值`infinite`表示无数次。
+
+    + 动画的方向：
+
+    ```javascript
+        animation-direction: alternate;
+    ```
+
+    属性值：normal 正常，alternate 反向。
+
+    + 动画延迟执行：
+
+
+    ```javascript
+        animation-delay: 1s;
+    ```
+
+    + 设置动画结束时，盒子的状态：
+
+    ```javascript
+        animation-fill-mode: forwards;
+    ```
+
+    属性值： forwards：保持动画结束后的状态（默认），  backwards：动画结束后回到最初的状态。
+
+    + 运动曲线：
+
+    ```
+        animation-timing-function: ease-in;
+    ```
+
+    属性值可以是：linear   ease-in-out  steps()等。
+
+    注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`。
+
+
+