diff --git "a/\345\274\240\350\257\255\345\253\243/image/CSS\347\254\246\345\217\267.png" "b/\345\274\240\350\257\255\345\253\243/image/CSS\347\254\246\345\217\267.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6b1bba0f18a6ce7a9673c7db8f58c74fd89d9964
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/CSS\347\254\246\345\217\267.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/sxxzq.png" "b/\345\274\240\350\257\255\345\253\243/image/sxxzq.png"
new file mode 100644
index 0000000000000000000000000000000000000000..117fc04ea522f57d35f28a253290e1bbab86815c
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/sxxzq.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/wlxzq.png" "b/\345\274\240\350\257\255\345\253\243/image/wlxzq.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7fd6b1d5773a3f5c1cdf9e9cd86f4174b032426b
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/wlxzq.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/wysxzq.png" "b/\345\274\240\350\257\255\345\253\243/image/wysxzq.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d0fef353b32ecfdf332ead2fd1cf2d725e8c992e
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/wysxzq.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\347\224\273\345\234\206\345\275\242\347\232\204\346\226\271\346\263\225.png" "b/\345\274\240\350\257\255\345\253\243/image/\347\224\273\345\234\206\345\275\242\347\232\204\346\226\271\346\263\225.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2de70f2d4970aa87c76e5cb05d4f7499ab163a58
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\347\224\273\345\234\206\345\275\242\347\232\204\346\226\271\346\263\225.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\350\276\271\346\241\206\345\233\276.png" "b/\345\274\240\350\257\255\345\253\243/image/\350\276\271\346\241\206\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..699fdf7fba27f855fb2a1fb507b256a0660083eb
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\350\276\271\346\241\206\345\233\276.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\350\276\271\346\241\206\345\233\276\347\211\2071.png" "b/\345\274\240\350\257\255\345\253\243/image/\350\276\271\346\241\206\345\233\276\347\211\2071.png"
new file mode 100644
index 0000000000000000000000000000000000000000..87767c8d99d0667d23f405d76fb134de73d094cb
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\350\276\271\346\241\206\345\233\276\347\211\2071.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/1.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8a42ff15dc8be67180cdce7d7976bb0e320ad296
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/1.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/2.jpg" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..433f2ddeb104b630ad4d4747dc7b0a0548836e25
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/2.jpg" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/jilingtu.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/jilingtu.png"
new file mode 100644
index 0000000000000000000000000000000000000000..00138ea2a9ec09abba06e7f0a3bde57b05342cc6
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/jilingtu.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test01-\345\255\220\347\273\235\347\210\266\347\233\270.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test01-\345\255\220\347\273\235\347\210\266\347\233\270.html"
new file mode 100644
index 0000000000000000000000000000000000000000..39ad4f4f74f882d0f3766cf18c043a2f08c27efd
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test01-\345\255\220\347\273\235\347\210\266\347\233\270.html"
@@ -0,0 +1,34 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test01</title>
+    <style>
+        .father {
+            width: 600px;
+            height: 400px;
+            position: relative;
+            left: 20px;
+            top: 20px;
+            border: 1px solid;
+        }
+        .son {
+            width: 200px;
+            height: 200px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -100px;
+            margin-left: -100px;
+            background-color: lightblue;
+            text-align: center;
+            line-height: 200px;
+        }
+    </style>
+</head>
+<body>
+    <div class="father">
+        <div class="son">8888</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test02-\345\257\274\350\210\252\344\270\215\351\201\256\347\233\226.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test02-\345\257\274\350\210\252\344\270\215\351\201\256\347\233\226.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2048e375d19b0d2adc64db10ef3a0e7c7ff26ff8
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test02-\345\257\274\350\210\252\344\270\215\351\201\256\347\233\226.html"
@@ -0,0 +1,41 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test02</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            padding-top: 100px;
+            height: 2000px;
+        }
+
+        .nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100px;
+            background-color: gray;
+            z-index: 1;
+            border: 1px solid;
+            text-align: center;
+            line-height: 100px;
+        }
+    </style>
+</head>
+<body>
+    <div class="nav">8888</div>
+    3333333333333333333333333333333333333333<br>
+    3333333333333333333333333333333333333333<br>
+    3333333333333333333333333333333333333333<br>
+    3333333333333333333333333333333333333333<br>
+    3333333333333333333333333333333333333333<br>
+    3333333333333333333333333333333333333333<br>
+    3333333333333333333333333333333333333333<br>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test03\346\202\254\346\265\256\346\217\220\347\244\272\346\241\206.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test03\346\202\254\346\265\256\346\217\220\347\244\272\346\241\206.html"
new file mode 100644
index 0000000000000000000000000000000000000000..392fd09185cc7fd6d772b25114e9032ef99d6081
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test03\346\202\254\346\265\256\346\217\220\347\244\272\346\241\206.html"
@@ -0,0 +1,40 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test03</title>
+    <style>
+        .yw {
+            position: relative;
+            display: inline-block;
+        }
+
+        .ts {
+            visibility: hidden;
+            width: 120px;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px 0;
+            position: absolute;
+            z-index: 1;
+            top: 100%;
+            left: 50%;
+            margin-left: -60px;
+        }
+
+        .yw:hover .ts {
+            visibility: visible;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="yw">昂，你来晚了哈
+        <div class="ts">我是提示文字撒</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test04-\347\262\276\347\201\265\345\233\276.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test04-\347\262\276\347\201\265\345\233\276.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2e5a9777e74f0c3c502f2bbc2a87d4e356c6ae5e
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test04-\347\262\276\347\201\265\345\233\276.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>test04</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        ul {
+            list-style-type: none;
+        }
+
+        ul li {
+            font-size: 40px;
+            width: auto;
+            height: 72px;
+            position: relative;
+            padding-left: 72px;
+            line-height: 72px;
+            margin-bottom: 10px;
+        }
+
+        ul li::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 70px;
+            height: 72px;
+            background-image: url(./jilingtu.png);
+        }
+
+        ul li:nth-child(1)::before {
+            background-position: 0 0;
+        }
+
+        ul li:nth-child(2)::before {
+            background-position: -80px 0;
+        }
+
+        ul li:nth-child(3)::before {
+            background-position: -160px 0;
+        }
+        ul li:nth-child(4)::before {
+            background-position: 0 -80px;
+        }
+        ul li:nth-child(5)::before {
+            background-position: -80px -80px;
+        }
+        ul li:nth-child(6)::before {
+            background-position: -160px -80px;
+        }
+    </style>
+</head>
+<body>
+    我勒个又丑又大啊，救命，不嘻嘻 ( -_- )||
+    <ul>
+        <li>付款图标</li>
+        <li>存款图标</li>
+        <li>删除图标</li>
+        <li>粘贴图标</li>
+        <li>笑脸图标</li>
+        <li>编辑图标</li>
+    </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test05-\345\216\213\347\233\226\346\225\210\346\236\234.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test05-\345\216\213\347\233\226\346\225\210\346\236\234.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f4bc1a263694d9a08f606af4528e9bf2b4a21bcb
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test05-\345\216\213\347\233\226\346\225\210\346\236\234.html"
@@ -0,0 +1,97 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test05</title>
+    <style>
+        .box{
+			margin: 100px;
+			width: 308px;
+			height: 307px;
+			border: 2px solid #FF7E00;
+			position: relative; 
+
+		}
+		img{
+			width: 308px;
+			height: 196px;
+		}
+		.dtc{
+			display: block;  
+			width: 52px;
+			height: 28px;
+			background-image: url(./1.png);
+			background-position: -108px 0px; 
+			position: absolute;  
+			top: -9px;
+			left: 13px;
+		}
+		h4{
+			background-color: black;
+			color: rgb(197, 194, 194);
+			width:308px;
+			height: 40px;
+			line-height: 40px;
+			position: absolute;
+			top: 140px;
+			text-align: center;
+		}
+		.dz {
+			font-weight: bold;
+			margin-bottom: 0;
+		}
+		.bx {
+			font-size: 15px;
+			margin: 0;
+			margin-left: 7px;
+			padding: 0;
+		}
+		.q {
+			color: #FF7E00;
+			display: inline-block;
+		}
+		.bs {
+			color: red;
+		}
+		.yj {
+			display: inline-block;
+			color: gray;
+			text-decoration:line-through;
+			font-size: small;
+			margin-left: 9px;
+		}
+		.ys {
+			color: gray;
+			display: inline-block;
+			font-size: small;
+			margin-left: 145px;
+		}
+		.wz {
+			margin: 10px;
+			width: 308px;
+			height: auto;
+		}
+		.fd {
+			font-size: 22px;
+		}
+    </style>
+</head>
+<body>
+    <div class="box">
+		<span class="dtc"></span>
+		<div class="wdyc">
+			<img src="./2.jpg" alt="">
+		</div>
+		<h4>广东深圳宝安区建安一路海雅缤纷城4楼</h4>
+		<div class="sp">
+			<p class="dz">【海雅缤纷城】万达影城（深圳海雅广场...</p>
+			<p class="bx">单人电影票，可观看2D</p>
+			<div class="wz">
+			<div class="q">￥<span class="fd">35</span></div>
+			<div class="yj">￥80</div>
+			<div class="ys">已售<span class="bs">225</span></div>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test06-\346\230\245\346\213\233\351\235\242\350\257\225\351\242\230.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test06-\346\230\245\346\213\233\351\235\242\350\257\225\351\242\230.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a025caa2a192235a0a129bd0b816529d1ac2d872
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241021/test06-\346\230\245\346\213\233\351\235\242\350\257\225\351\242\230.html"
@@ -0,0 +1,31 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test06</title>
+    <style>
+        .d1 {
+            position: relative;
+            top: 200px;
+            left: 0px;
+            width: 800px;
+            height: 600px;
+            border: 1px solid black;
+        }
+        .d2 {
+            width: 100px;
+            height: 100px;
+            border: 1px solid black;
+            background-color: red;
+            position: absolute;
+            bottom: 200px;
+            left: 200px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d2">爱立信2014年校园春招</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/logo.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6e3902e9680fbdf6ffa9d75d669033c837e1383e
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/logo.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/test01-\345\215\232\351\233\205\344\272\222\345\212\250.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/test01-\345\215\232\351\233\205\344\272\222\345\212\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a4cb6fae5aad8e37feef4d0104a52b4bd291758a
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/test01-\345\215\232\351\233\205\344\272\222\345\212\250.html"
@@ -0,0 +1,10 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    先放个壳子吧，我得交作业了。精灵图的在之前做了，瞅瞅上一个文件夹吧
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/\345\215\232\351\233\205\344\272\222\345\212\250\346\234\200\347\273\210\346\225\210\346\236\234\345\233\276.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/\345\215\232\351\233\205\344\272\222\345\212\250\346\234\200\347\273\210\346\225\210\346\236\234\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..899516cf28c499683200f9ae9351686496fa8437
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241023/\345\215\232\351\233\205\344\272\222\345\212\250\346\234\200\347\273\210\346\225\210\346\236\234\345\233\276.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/1.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..599dbe48c3fba3fe0549e88d5d79f6f863d9acc8
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/1.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/2.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/2.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/3.jpg" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/3.jpg" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/bx.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/bx.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5100a19f692cc06c4cdc5007aa3248a155d807c2
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/bx.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/dly.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/dly.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d60ff6ecde05412936fd712b7588684c3faf79a2
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/dly.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq1.jpg" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..67248159c4b149e3c2b069b8af04b3b1145cbe17
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq1.jpg" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq2.jpg" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1a6fa6054f91a0cb8616eab0116316d5cf3f3ac6
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq2.jpg" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq3.jpg" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ba48086cab936a6c4c0d0792471e5d54e91d31cb
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq3.jpg" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq4.jpg" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..00ee222329eabde75bb36f862c3b7e21cacb132b
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/gq4.jpg" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/lsdy.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/lsdy.png"
new file mode 100644
index 0000000000000000000000000000000000000000..667e7fd5bd158f95ebfbce25fc5a866b3ad31704
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/lsdy.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/pp.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/pp.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9dbf1b1ad56501a0fd12ea48bc7192c1a0480fc8
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/pp.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test01-\345\260\217\347\261\263\345\225\206\345\223\201.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test01-\345\260\217\347\261\263\345\225\206\345\223\201.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cfc0a4b4b304b2a322fc13b3c3a280dcc35ac20f
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test01-\345\260\217\347\261\263\345\225\206\345\223\201.html"
@@ -0,0 +1,72 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test01</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #eeeeee;
+        }
+
+        .content {
+            width: 800px;
+            height: 320px;
+            padding-left: 20px;
+            margin: 80px auto;
+        }
+
+        .xg {
+            width: 230px;
+            height: 300px;
+            text-align: center;
+            margin-right: 20px;
+            background-color: #FFF;
+            float: left;
+            position: relative;
+            top: 0;
+            overflow: hidden; 
+            transition: all .5s; 
+        }
+
+        img {
+            margin-top: 30px;
+        }
+
+        .cs {
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: #ff6700;
+            transition: all .5s;
+        }
+       
+        .xg:hover {
+            top: -5px;
+            box-shadow: 0 0 15px #AAA;
+        }
+
+        .xg:hover .cs {
+            bottom: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="content">
+        <div class="xg">
+            <img src="./1.png" alt="">
+        </div>
+        <div class="xg">
+            <img src="./2.png" alt="">
+            <span class="cs"></span>
+        </div>
+        <div class="xg">
+            <img src="./3.jpg" alt="">
+            <span class="cs"></span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test02-\351\201\245\351\201\245\351\242\206\345\205\210.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test02-\351\201\245\351\201\245\351\242\206\345\205\210.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2ab2b1fb8a439e362cfffb69824b8e85b7b6c050
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test02-\351\201\245\351\201\245\351\242\206\345\205\210.html"
@@ -0,0 +1,26 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test02</title>
+    <style>
+        .box {
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            margin: 50px auto;
+            color: #fff;
+            font-size: 50px;
+            transition: all 2s; 
+        }
+        
+        .box:hover {
+            transform: rotate(-405deg); 
+        }
+
+    </style>
+</head>
+<body>
+    <div class="box">遥遥领先</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test03-\345\260\217\347\201\253\347\256\255.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test03-\345\260\217\347\201\253\347\256\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8d1092a85ef817ed4fbbd009eb6b3e1e2833a16d
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test03-\345\260\217\347\201\253\347\256\255.html"
@@ -0,0 +1,29 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test03</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="./xhj.png" alt=""/>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test04.\347\272\270\347\211\214.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test04.\347\272\270\347\211\214.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a376c29836c7ad80e2b1978793a2bcc4067311bb
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test04.\347\272\270\347\211\214.html"
@@ -0,0 +1,95 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test04</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>
+<body>
+<div class="box">
+    <img src="./zp1.png"/>
+    <img src="./zp2.png"/>
+    <img src="./zp1.png"/>
+    <img src="./zp2.png"/>
+    <img src="./zp1.png"/>
+    <img src="./zp2.png"/>
+    <img src="./zp1.png"/>
+    <img src="./zp2.png"/>
+    <img src="./zp1.png"/>
+    <img src="./zp2.png"/>
+    <img src="./zp1.png"/>
+    <img src="./zp2.png"/>
+    <img src="./zp1.png"/>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test05-\345\223\201\347\211\214.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test05-\345\223\201\347\211\214.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8410980ad855394c354980b5030913eb4188c435
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test05-\345\223\201\347\211\214.html"
@@ -0,0 +1,51 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test05</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(./pp.png) left 0 no-repeat; 
+        }
+
+        .box2 {
+            background: url(./pp.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/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test06-\346\255\214\346\233\262.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test06-\346\255\214\346\233\262.html"
new file mode 100644
index 0000000000000000000000000000000000000000..693a13280b165edd0cb658f61a44c68e276a82ac
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test06-\346\255\214\346\233\262.html"
@@ -0,0 +1,84 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test06</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="./gq1.jpg" alt="">
+            <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+        </div>
+        <div class="xg">
+            <img src="./gq2.jpg" alt="">
+            <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+        </div>
+        <div class="xg">
+            <img src="./gq3.jpg" alt="">
+            <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+        </div>
+        <div class="xg">
+            <img src="./gq4.jpg" alt="">
+            <span class="cs">《大鱼》<br>演唱：周深<br>海浪无声将夜幕深深淹没<br>漫过天空尽头的角落</span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test07-\345\244\247\351\261\274.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test07-\345\244\247\351\261\274.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b761c1088201b3074d830900e75ca66ba24cf8bc
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test07-\345\244\247\351\261\274.html"
@@ -0,0 +1,93 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test07</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: rgb(138, 219, 237);
+        }
+        .lsdy {
+            width: 509px;
+            height: 270px; 
+            margin: 100px auto;
+            background: url(./lsdy.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(./dly.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/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test08-\347\231\275\347\206\212.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test08-\347\231\275\347\206\212.html"
new file mode 100644
index 0000000000000000000000000000000000000000..284acbe5963ff43dab2bdfebf9cefa359d0706da
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test08-\347\231\275\347\206\212.html"
@@ -0,0 +1,51 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test08</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: green;
+        }
+        .bx {
+            width: 200px;
+            height: 100px; 
+            margin: 100px auto;
+            background: url(./bx.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/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/xhj.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/xhj.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03b86c8249d78b653db95fff220ebccaec7cee5f
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/xhj.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/zp1.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/zp1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..aa91346b17db7b1c0a0da3be60a79c1537250e8e
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/zp1.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/zp2.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/zp2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b2364f5aa00b1865127c7d57d569496999752a23
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/zp2.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/008ADEB8.png" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/008ADEB8.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ab4eaaff4dcc59de17346ecdfa12881d19a7a262
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/008ADEB8.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
index 076ba09e9893abc352a9b2fe60f8ef5d5c891014..3ff397db8e67143d0383d8606152c85c0d512688 100644
--- "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241017-\346\265\256\345\212\250.md"
@@ -71,6 +71,7 @@ css中一共有三种手段，使一个元素脱离标准文档流：
     - 与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度，高度可以自适应内容
     - 外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content
 4. overflow:hidden;
+5. div::after{content:"";display:block;clear:both;hetght:0;}
 
 ## 浏览器的兼容性问题
 ### 兼容性1（微型盒子）
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8c642c02f4c5aba12af03e4833d1f8a99074d3a5
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md"
@@ -0,0 +1,100 @@
+### CSS属性：定位属性
+1. 绝对定位：`position: absolute;`
+2. 相对定位：`position: relative;`
+3. 固定定位：`position: fixed;`
+
+### 相对定位
+让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）
+
+背景属性
+```
+	background-position:向右偏移量 向下偏移量;
+```
+
+定位属性
+```css
+	position: relative;/*相对定位：相对于自己原来的位置*/
+	left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
+	top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
+```
+
+### 相对定位不脱标
+相对定位不脱标，真实位置还在老家，别人不会把它的位置挤走。只不过影子出去了，可以到处飘
+
+### 相对定位的用途
+如果想做“压盖”效果（把一个div放到另一个div之上），一般**不用**相对定位来做
+
+相对定位的两个作用：
+- 微调元素
+- 做绝对定位的参考，子绝父相
+
+### 相对定位的定位值
+
+- left：盒子右移
+- right：盒子左移
+- top：盒子下移
+- bottom：盒子上移
+
+PS：负数表示相反的方向，`left: 200px`等价于`right: -200px`
+
+## 绝对定位
+定义横纵坐标，原点在父容器的左上角或左下角。`横坐标`用`left`表示，`纵坐标`用`top`或者`bottom`表示
+```css
+	position: absolute;  /*绝对定位*/
+	left: 10px;  /*横坐标*/
+	top/bottom: 20px;  /*纵坐标*/
+```
+
+### 绝对定位脱标
+绝对定位的盒子脱离了标准文档流。所有的标准文档流的性质，绝对定位之后都不遵守了
+
+绝对定位之后，标签不区分行内元素、块级元素，可以直接设置宽、高
+
+### 绝对定位的参考点（重要）
+1. 如果用`top`描述，那么参考点就是`页面的左上角`，而不是浏览器的左上角
+2. 如果用`bottom`描述，那么参考点就是`浏览器首屏窗口尺寸`对应的页面的左下角：
+
+### 以盒子为参考点
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素为参考点
+
+1. 要听`最近`的`已经定位`的祖先元素的
+2. 不一定是相对定位，任何定位都可以作为儿子的参考点————子绝父绝（页面不固定，无实战用途）、子绝父相（最常用，保证父亲没有脱标，儿子脱标在父亲的范围里面移动）、子绝父固
+3. 绝对定位的儿子，以父亲border的内侧为参考点，无视padding
+
+### 让绝对定位（position: absolute;）中的盒子在父亲里居中
+> left:50%; margin-left:负的宽度的一半
+> top:50%; margin-top:负的高度的一半
+
+## 固定定位————相对浏览器窗口进行定位。无论页面如何滚动，盒子显示的位置不变
+**用途：**
+1. 顶部导航条nav(假设顶部导航条的高度是60px，为防止其他内容被nav覆盖，要给body标签设置60px的padding-top)
+2. 网页右下角的“返回到顶部”
+```css
+	.backtop{
+		position: fixed;/*固定定位*/
+		bottom: 100px;
+		right: 30px;
+		width: 60px;
+		height: 60px;
+        text-align: center;/*文字居中*/
+		line-height:30px;
+		text-decoration: none;   /*去掉超链接的下划线*/
+	}
+```
+
+### z-index属性：表示谁压着谁。数值大的压盖住数值小的
+
+**特性：**
+
+1. 属性值大的位于上层，属性值小的位于下层
+2. z-index值没有单位，就是一个正整数。默认的z-index值是0
+3. 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人`(后来居上)`
+4. 定位了的元素，永远能够压住没有定位的元素
+5. 只有定位了的元素，才能有z-index值。不管相对定位、绝对定位、固定定位，都可以使用z-index值，而`浮动的元素不能用`
+6. 从父现象：如果父亲1的z-index值 > 父亲2，即使儿子1 < 儿子2，儿子1也能在最上层(栓Q~,参考富二代)
+
+**层级：**当好几个已定位的标签出现覆盖的现象时，可以用z-index属性决定谁处于最上方
+
+1. 必须有定位（除去static）
+2. 用`z-index`来控制层级数。
+
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241023-\345\261\236\346\200\247+\344\274\252\347\261\273+\344\274\252\345\205\203\347\264\240\351\200\211\346\213\251\345\231\250.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241023-\345\261\236\346\200\247+\344\274\252\347\261\273+\344\274\252\345\205\203\347\264\240\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b98d225122221251f11db353b8490b59dcc8160b
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241023-\345\261\236\346\200\247+\344\274\252\347\261\273+\344\274\252\345\205\203\347\264\240\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,112 @@
+![](../image/CSS符号.png)
+图片中的`{1,4}`表示可以设置一至四个参数
+
+### CSS3 选择器
+```
+div 标签选择器
+
+.box 类名选择器
+
+#box　id选择器
+
+div p 后代选择器
+
+div.box 交集选择器
+
+div,p,span 并集选择器
+
+div>p 子代选择器
+
+* : 通配符
+
+div+p: 选中div后面相邻的第一个p
+
+div~p: 选中的div后面所有的p
+```
+
+### 属性选择器`[]`
+匹配含义：
+```
+^：开头  $：结尾  *：包含
+```
+
+格式：
+
+- `E[title]` 选中页面的E元素，并且E存在 title 属性即可
+- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值**完全等于**abc
+- `E[attr~=val]`  选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素
+- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的
+- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头
+- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾
+- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc
+
+![属性选择器](../image/sxxzq.png)
+
+### 结构伪类选择器`:`
+格式：
+
+- `E:first-child` 匹配父元素（以E元素的父元素为参考）的第一个子元素E
+- `E:last-child` 匹配父元素的最后一个子元素E
+- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起
+- `E:nth-child(odd)` 匹配奇数
+- `E:nth-child(even)` 匹配偶数
+- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E
+- `E:first-of-type` 匹配同类型中的第一个同级兄弟元素E
+- `E:last-of-type` 匹配同类型中的最后一个同级兄弟元素E
+- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E
+- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E
+- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E
+- `E:target` 匹配相关URL指向的E元素。要配合锚点使用
+
+```css
+<!-- E:nth-child(n) -->
+
+`li:nth-child(2)`，第2个li
+
+`li:nth-child(n)`，所有的li。`n` 表示 0,1,2,3,4,5,6,7,8.....（当n < 1 时无效，因为 n = 0 也是不会选中的）
+
+`li:nth-child(2n)`，所有的偶数个的li
+
+`li:nth-child(2n+1)`，所有的奇数个的li
+
+`li:nth-child(-n+5)`，前5个li
+
+`li:nth-last-child(-n+5)`，最后5个li
+
+`li:nth-child(7n)`，7的倍数
+```
+
+![伪类选择器](../image/wlxzq.png)
+
+### 伪元素选择器`::`
+格式：
+
+- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用
+- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用
+- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式
+- `E::first-line` 设置元素 E 里面的**第一行**的样式
+- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）
+
+![伪元素选择器](../image/wysxzq.png)
+
+**注意：**伪元素针对区块元素生效。
+
+### 渐进增强和优雅降级（https://www.cnblogs.com/iceflorence/p/6625466.html）
+1. 渐进增强（progressive enhancement）
+```css
+.transition{
+  -webkit-transition: all .5s;
+     -moz-transition: all .5s;
+       -o-transition: all .5s;
+          transition: all .5s;  
+}
+```
+2. 优雅降级（graceful degradation）
+```css
+.transition{ 
+　　     transition: all .5s;
+　　  -o-transition: all .5s;
+  　-moz-transition: all .5s;
+ -webkit-transition: all .5s;
+}
+```
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-CSS3\345\261\236\346\200\247\350\257\246\350\247\243+\345\212\250\347\224\273.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-CSS3\345\261\236\346\200\247\350\257\246\350\247\243+\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b87ef2f8f96256b944af3ab8dee164824b950227
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-CSS3\345\261\236\346\200\247\350\257\246\350\247\243+\345\212\250\347\224\273.md"
@@ -0,0 +1,398 @@
+## 文本
+### text-shadow：设置文本的阴影
+```javascript
+	text-shadow: 20px 27px 22px pink;
+    //水平位移 垂直位移 模糊程度 阴影颜色
+```
+
+### 凹凸文字效果
+text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开
+```html
+<style>
+        body {
+            background-color: #666;
+        }
+
+        div {
+            font-size: 100px;
+            text-align: center;
+            font-weight: bold;
+            font-family: "Microsoft Yahei";
+            color: #666;
+        }
+
+        /* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
+        .tu {
+            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
+        }
+
+        .ao {
+            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
+        }
+    </style>
+```
+
+## 盒模型中的 box-sizing 属性
+```javascript
+    box-sizing: content-box;    //外加模式：（css的默认方式）此时设置的 width 和 height 是 内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，不会改变内容的宽高，而盒子的总宽高发生变化
+
+    box-sizing: border-box;    //内减模式：此时设置的 width 和 height 是 盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变
+```
+
+## 处理兼容性问题：为属性添加私有前缀
+```html
+    -webkit-: 谷歌 苹果
+    -moz-:火狐
+    -ms-：IE
+    -o-：欧朋
+
+    background: -webkit-linear-gradient(left, green, yellow);
+```
+
+## 边框：边框圆角 + 边框阴影
+### 边框圆角：`border-radius` 属性
+边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆
+
+写法：
+```css
+    /*单个属性写法*/
+    border-top-left-radius: 60px 120px;       /* 参数解释：水平半径   垂直半径 */
+	border-top-right-radius: 60px 120px;
+	border-bottom-left-radius: 60px 120px;
+	border-bottom-right-radius: 60px 120px;
+
+    /*复合属性写法*/
+    border-radius: 60px/120px;             /*参数：水平半径/垂直半径*/
+	border-radius: 20px 60px 100px 140px;  /*从左上开始，顺时针赋值。如果当前角没有值，取对角的值*/
+	border-radius: 20px 60px;
+
+    /*简洁写法：（四个角的半径都相同时）*/
+	border-radius: 60px;
+```
+
+画圆形和叶![alt text](008ADEB8.png)形的方法
+```html
+<style>
+
+        .parent {
+            width: 400px;
+        }
+        .box {
+            width: 100px;
+            height: 100px;
+            float: left;
+            border: 1px solid rgb(144, 12, 63);
+            margin: 20px;
+            text-align: center;
+            line-height: 100px;
+            color: #fff;
+            font-size: 50px;
+            background-color: rgb(255, 141, 26);
+
+        }
+
+        /*画圆形的方式一*/
+        .box:nth-child(1) {
+            border-radius: 100px;
+        }
+
+        /*画圆形的方式二*/
+        .box:nth-child(2) {
+            border-radius: 50%;
+        }
+
+        /*乔布斯喜爱的圆角矩形*/
+        .box:nth-child(3) {
+            border-radius: 10%;
+        }
+
+        /*圆柱*/
+        .box:nth-child(4) {
+            border-radius: 100px/50px;
+        }
+
+        /*扇形*/
+        .box:nth-child(5) {
+            border-radius: 200px 0 0 0;
+        }
+
+        /*叶子形状*/
+        .box:nth-child(6) {
+            border-radius: 0 100px;
+        }
+
+    </style>
+<body>
+<div class="parent">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+    <div class="box">4</div>
+    <div class="box">5</div>
+    <div class="box">6</div>
+</div>
+</body>
+```
+![画圆形和其他形状的方法](../image/画圆形的方法.png)
+
+### 边框阴影：`box-shadow` 属性
+```javascript
+	box-shadow: 15px 21px 48px -2px #666 inset;
+    // box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 外(默认)/内阴影(inset) 外阴影不用写
+    // 水平偏移：正值向右 负值向左
+    // 垂直偏移：正值向下 负值向上
+    // 模糊程度：不能为负值
+```
+**注意**：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局
+
+### 边框图片
+```javascript
+	/* 边框图片的路径*/
+	border-image-source: url("../image/画圆形的方法.png");
+
+	/* 图片边框的裁剪*/
+	border-image-slice: 27;
+
+	/*图片边框的宽度*/
+	border-image-width: 27px;
+
+	/*边框图片的平铺*/
+	/* repeat :正常平铺 但是可能会显示不完整*/
+	/*round: 平铺 但是保证 图片完整*/
+	/*stretch: 拉伸显示*/
+	border-image-repeat: stretch;
+
+    /*综合写法*/
+    border-image: url("../image/画圆形的方法.png") 27/20px round;
+```
+切割成**九宫格**形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺
+
+![边框图片1](../image/边框图片1.png)
+
+![边框图片2](../image/边框图.png)
+
+## 过渡：transition
+可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果
+
+- 补间动画：自动完成从`起始状态`到`终止状态`的的过渡。不用管中间的状态
+- 帧动画：通过一帧一帧的画面按照`固定顺序`和`速度`播放。如电影胶片
+
+transition的属性：
+- `transition-property: all;`  如果希望所有的属性都发生过渡，就使用all
+- `transition-duration: 1s;` 过渡的持续时间
+- `transition-timing-function: linear;`  运动曲线。属性值可以是：
+	- `linear` 线性
+	- `ease`  减速
+	- `ease-in` 加速
+	- `ease-out` 减速
+	- `ease-in-out`  先加速后减速
+- `transition-delay: 1s;` 过渡延迟。1s后再执行这个过渡动画
+
+**综合属性写法**：
+```javascript
+	//transition: 让哪些属性进行过度(如all、width等) 过渡的持续时间 运动曲线 延迟时间;
+	transition: all 3s linear 0s;
+```
+
+## 转换`transform`
+2D转换：可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式
+3D转换：可以实现元素的**旋转、移动、透视、3D呈现**
+
+## 2D 转换
+### 1、缩放：`scale`
+```javascript
+	transform: scale(x, y);
+    // x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放
+	transform: scale(2, 0.5);
+    // 取值：大于1表示放大，小于1表示缩小。不能为百分比
+```
+### 2、位移：translate
+```javascript
+	transform: translate(水平位移, 垂直位移);
+	transform: translate(-50%, -50%);
+    //参数为百分比，相对于自身移动
+    //正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动
+```
+
+**应用：**让绝对定位中的盒子在父亲里居中
+1. 标准流中的盒子在父亲里居中`margin: 0 auto`
+2. 绝对定位(脱标)中的盒子在父亲里居中
+```css
+div {
+		width: 600px;
+		height: 60px;
+		position: absolute;  /*绝对定位的盒子 */
+		left: 50%;           /*首先，让左边线居中 */
+		top: 0;
+		margin-left: -300px; /*然后，向左移动宽度（600px）的一半 */
+	}
+```
+3. 利用偏移 translate实现
+```css
+div {
+	    width: 600px;
+	    height: 60px;
+	    background-color: red;
+	    position: absolute;       /*绝对定位的盒子 */
+	    left: 50%;               /*首先，让左边线居中 */
+	    top: 0;
+	    transform: translate(-50%); /*然后，利用translate，往左走自己宽度的一半 */
+	}
+```
+
+### 3、旋转：rotate
+```javascript
+	transform: rotate(角度);
+    //参数：正值 顺时针；负值：逆时针
+	transform: rotate(45deg);
+```
+
+rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想**改变旋转的坐标原点**，可以用`transform-origin`属性
+```javascript
+	transform-origin: 水平坐标 垂直坐标;
+
+	transform-origin: 50px 50px;
+
+	transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点
+```
+
+## 3D转换
+### 1、旋转：rotateX、rotateY、rotateZ
+
+**3D坐标系（左手坐标系）**：浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴
+
+**旋转的方向：（左手法则）**：左手握住旋转轴，竖起拇指指向旋转轴的**正方向**，正向就是**其余手指卷曲的方向**。所有的3d旋转，对着正方向去看，都是顺时针旋转
+
+```javascript
+    transform: rotateX(360deg);    //绕 X 轴旋转360度
+	transform: rotateY(360deg);    //绕 Y 轴旋转360度
+	transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+```
+旋转时最好加个透视（如perspective: 150px;）的属性（加给图片的父元素 div），才能看到3D的效果
+
+### 2、移动：translateX、translateY、translateZ
+```javascript
+	transform: translateX(100px);    //沿着 X 轴移动
+	transform: translateY(360px);    //沿着 Y 轴移动
+	transform: translateZ(360px);    //沿着 Z 轴移动,translateZ必须配合透视来使用
+```
+
+### 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、定义动画的步骤
+
+（1）通过@keyframes定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+
+之前,我们在 js 中定义一个函数的时候，是先定义，再调用：
+
+```javascript
+    js 定义函数：
+        function fun(){ 函数体 }
+
+     调用：
+     	fun();
+```
+
+同样，我们在 CSS3 中**定义动画**的时候，也是**先定义，再调用**：
+
+```javascript
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+
+其中，animation属性的格式如下：
+
+```javascript
+            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+### 2、动画属性
+（1）动画名称：
+
+```javascript
+	animation-name: move;
+```
+
+（2）执行一次动画的持续时间：
+
+```javascript
+	animation-duration: 4s;
+```
+
+备注：上面两个属性，是必选项，且顺序固定。
+
+（3）动画的执行次数：
+
+```javascript
+	animation-iteration-count: 1;       //iteration的含义表示迭代
+```
+
+属性值`infinite`表示无数次。
+
+（3）动画的方向：
+
+```javascript
+	animation-direction: alternate;
+```
+
+属性值：normal 正常，alternate 反向。
+
+（4）动画延迟执行：
+
+
+```javascript
+	animation-delay: 1s;
+```
+
+（5）设置动画结束时，盒子的状态：
+
+```javascript
+	animation-fill-mode: forwards;
+```
+
+属性值： forwards：保持动画结束后的状态（默认），  backwards：动画结束后回到最初的状态。
+
+（6）运动曲线：
+
+```
+	animation-timing-function: ease-in;
+```
+
+属性值可以是：linear   ease-in-out  steps()等。
+
+注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`。
+
+### steps()的效果
+如果在调用动画时，我们写成：
+```javascript
+	animation: move2 4s steps(2);
+```
+有了属性值 `steps()`，我们就可以作出很多不连续地动画效果
\ No newline at end of file