diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240909\344\275\234\344\270\232.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240909\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8a9517f6d7007120e2e79efe9937c64f3ac61d37
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240909\344\275\234\344\270\232.md"
@@ -0,0 +1,7 @@
+|浏览器|渲染引擎|备注|
+|:- | :-: | :-|
+|IE浏览器|IE–Trident|IE是微软公司旗下浏览器|
+|火狐浏览器|FF(Mozilla)–Gecko|Firefox浏览器使Mozilla公司旗下浏览器|
+|谷歌浏览器|Chrome–Blink（WebKit的分支）|Chrome浏览器是google旗下的浏览器|
+|苹果浏览器|Safari–Webkit|苹果公司发布的Safari浏览器|
+|欧朋浏览器|Opera–原为Presto，现为Blink|Opera是挪威Opera Software ASA公司旗下的浏览器|
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240911\346\260\264\345\271\263\347\272\277,.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240911\346\260\264\345\271\263\347\272\277,.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d074f844d3cd1d7c11639d2010da4ea192882f3d
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240911\346\260\264\345\271\263\347\272\277,.md"
@@ -0,0 +1,28 @@
+# 效果
+<img src="https://pic.imgdb.cn/item/66ec2314f21886ccc0012cf6.gif" alt="水平线.gif">
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Red Horizontal Line</title>
+<style>
+  .spx {
+    height: 18px; /* 设置高度 */
+    background-color: red; /* 设置背景颜色为红色 */
+    border: none; /* 移除边框 */
+  }
+    .q{
+        text-align: center;
+    }
+</style>
+</head>1
+<body>
+<p class="q">山不在高</p>
+<hr class="spx">
+<p class="q">有仙则名</p>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240913\344\275\234\344\270\232.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240913\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..24a7178f5f3394a9a332ab3c67011a014aee8456
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240913\344\275\234\344\270\232.md"
@@ -0,0 +1,39 @@
+# 效果
+<img src="https://pic.imgdb.cn/item/66ec1feef21886ccc0fd8fa2.gif" alt="虫虫.gif">
+
+# 代码
+```html
+
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #hhhh{
+            width: 400px;
+        }
+        .flex-container {  
+    display: flex;  
+    justify-content: center; /* 水平居中 */  
+    align-items: center; /* 垂直居中 */  
+    height: 100vh; /* 或其他你希望的高度 */  
+}  
+    </style>
+</head>
+<body>
+    <div>直接使用margin来水平和垂直居中图片的主要问题是，margin的auto值在水平方向上（对于块级元素）可以工作，但在垂直方向上则不会。margin: auto; 在水平方向上（左右）可以使元素居中，前提是父容器有明确的宽度，并且该元素也是块级元素且其宽度小于父容器的宽度。但在垂直方向上（上下），由于HTML文档流的方向默认是水平（从左到右），垂直方向上的自动边距（margin-top和margin-bottom）不会自动调整以居中元素。
+    <div class="flex-container">  
+    <img src="./imageonline-co-gifimage.gif" alt="叽里呱啦" title="神图" id="hhhh">
+    </div>
+    
+
+</body>
+</html>
+
+
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240914\344\275\234\344\270\232.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240914\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..096a8bcf81dbdcd8e7b785511555b1d541383161
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240914\344\275\234\344\270\232.md"
@@ -0,0 +1,81 @@
+# 效果
+<img src="https://pic.imgdb.cn/item/66ec21f8f21886ccc0ffebc8.gif" alt="pg.gif">
+
+# 代码
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+
+         .bcg{
+            background-color: black;
+            height: 68px;
+         }
+         ul{
+            list-style-type: none;
+            width: 900px;
+            margin: auto;
+         }
+         li{
+            float: left;
+            height: 50px;
+            width: 50px;
+            margin: 5px;
+            text-align: center;
+            font-size: 12px;
+            font-weight: 400;
+            align-items: center;
+            vertical-align:middle ;
+            display: flex;
+            color: aliceblue;
+            
+            }
+            .img{
+                fill: aliceblue;
+            }
+
+
+    </style>
+</head>
+<body>
+    <div class="bcg">
+        <ul>
+            <li>
+                <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg" class="img">
+                    <path
+                        d="m15.5752 19.0792a4.2055 4.2055 0 0 0 -2.01 3.5376 4.0931 4.0931 0 0 0 2.4908 3.7542 9.7779 9.7779 0 0 1 -1.2755 2.6351c-.7941 1.1431-1.6244 2.2862-2.8878 2.2862s-1.5883-.734-3.0443-.734c-1.42 0-1.9252.7581-3.08.7581s-1.9611-1.0589-2.8876-2.3584a11.3987 11.3987 0 0 1 -1.9373-6.1487c0-3.61 2.3464-5.523 4.6566-5.523 1.2274 0 2.25.8062 3.02.8062.734 0 1.8771-.8543 3.2729-.8543a4.3778 4.3778 0 0 1 3.6822 1.841zm-6.8586-2.0456a1.3865 1.3865 0 0 1 -.2527-.024 1.6557 1.6557 0 0 1 -.0361-.337 4.0341 4.0341 0 0 1 1.0228-2.5148 4.1571 4.1571 0 0 1 2.7314-1.4078 1.7815 1.7815 0 0 1 .0361.373 4.1487 4.1487 0 0 1 -.9867 2.587 3.6039 3.6039 0 0 1 -2.5148 1.3236z">
+                    </path>
+                </svg>
+            </li>
+            <li >
+                商店
+            </li>
+            <li>Mac</li>
+            <li>iPad</li>
+            <li>iPhone</li>
+            <li>Watch</li>
+            <li>Vision</li>
+            <li>AirPods</li>
+            <li>家居</li>
+            <li>娱乐</li>
+            <li>配件</li>
+            <li>技术支持</li>
+            <li><svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg"class="img">
+                <path
+                    d="m16.2294 29.9556-4.1755-4.0821a6.4711 6.4711 0 1 0 -1.2839 1.2625l4.2005 4.1066a.9.9 0 1 0 1.2588-1.287zm-14.5294-8.0017a5.2455 5.2455 0 1 1 5.2455 5.2527 5.2549 5.2549 0 0 1 -5.2455-5.2527z">
+                </path>
+            </svg></li>
+            <li><svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg" class="img">
+                <path
+                    d="m13.4575 16.9268h-1.1353a3.8394 3.8394 0 0 0 -7.6444 0h-1.1353a2.6032 2.6032 0 0 0 -2.6 2.6v8.9232a2.6032 2.6032 0 0 0 2.6 2.6h9.915a2.6032 2.6032 0 0 0 2.6-2.6v-8.9231a2.6032 2.6032 0 0 0 -2.6-2.6001zm-4.9575-2.2768a2.658 2.658 0 0 1 2.6221 2.2764h-5.2442a2.658 2.658 0 0 1 2.6221-2.2764zm6.3574 13.8a1.4014 1.4014 0 0 1 -1.4 1.4h-9.9149a1.4014 1.4014 0 0 1 -1.4-1.4v-8.9231a1.4014 1.4014 0 0 1 1.4-1.4h9.915a1.4014 1.4014 0 0 1 1.4 1.4z">
+                </path>
+            </svg></li>
+            
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240920\347\231\273\345\275\225\357\274\214\350\267\221\351\251\254\347\201\257.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240920\347\231\273\345\275\225\357\274\214\350\267\221\351\251\254\347\201\257.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7a708b04a2309960bd1d2012a2d309591d888427
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240920\347\231\273\345\275\225\357\274\214\350\267\221\351\251\254\347\201\257.md"
@@ -0,0 +1,146 @@
+# 效果图
+
+
+
+<img src="https://pic.imgdb.cn/item/66efb042f21886ccc0423923.gif" alt="GIF 2024-9-22 13-46-59.gif">
+<img src="https://pic.imgdb.cn/item/66efb068f21886ccc04262a2.png" alt="屏幕截图 2024-09-22 131115.png">
+
+
+
+
+# 代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+            .dl{
+            height: 200px;
+            width: 400px;
+            border: 1px black solid;
+            border-radius: 360px;
+            margin: auto;
+            
+            
+            }
+            .a{
+                background-image: url(./img/浅蓝色圆圈.jpg);
+            background-size: cover;
+            width: 500px;
+            height: 500px;
+            display: grid;  
+            place-items: center;
+            }
+            .zhanghao{
+                /* float: right; */
+                /* text-align: center; */
+                width: 251px;
+                padding-left: 70px;
+
+            }
+            table{text-align: center;}
+            .xlr{
+                width: 30px;
+                height: 30px;
+                
+                margin-right: 15px;
+            }
+           
+            
+    </style>
+</head>
+<body style="height: 100vh; display: grid;  
+  place-items: center; ">
+    
+        
+        <div class="a">
+    <div class="dl">
+        
+        <h1 style="text-align: center; width: 360px; margin: 0px; color: #5ab9f8;;"><img src="./笑脸人.png" alt="" class="xlr">元玖网</h1>
+        
+            <div class="zhanghao">
+                <table>
+                    <tr>
+                        <td>
+                            用户名：
+                        </td>
+                        <td>
+                            <input type="text" name="yhm">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            密码：
+                        </td>
+                        <td>
+                            <input type="password">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+
+                        </td>
+                        <td>
+                            <input type="button" value="登录">
+                        </td>
+                    </tr>
+                </table>
+                
+                
+            </div>
+        
+    </div>
+</div>
+</body>
+</html>
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>跑马灯特效</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        .marquee {  
+    width: 100%; /* 容器宽度 */  
+    overflow: hidden; /* 隐藏超出部分 */  
+    white-space: nowrap; /* 文本不换行 */  
+      
+}  
+  
+.marquee span {  
+    display: inline-block;  
+    padding-left: 100%; /* 初始时，文本完全在容器右侧外 */  
+    animation: marquee 10s linear infinite; /* 应用动画 */  
+}  
+  
+@keyframes marquee {  
+    from {  
+        transform: translateX(0);  
+    }  
+    to {  
+        transform: translateX(-100%); /* 向左移动至完全在容器左侧外 */  
+    }  
+}
+    </style>
+</head>
+
+<body>
+
+    <div class="marquee">
+        <span>这是一个跑马灯效果的文本，它会在容器内从左到右滚动。</span>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240926\346\214\211\351\224\256\346\202\254\345\201\234.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240926\346\214\211\351\224\256\346\202\254\345\201\234.md"
new file mode 100644
index 0000000000000000000000000000000000000000..92a4ec4c6dc95362c193e18973f211de6adc55e0
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240926\346\214\211\351\224\256\346\202\254\345\201\234.md"
@@ -0,0 +1,53 @@
+# 效果
+<img src="https://pic.imgdb.cn/item/66ec0af5f21886ccc0e91d9c.gif" alt="GIF 2024-9-19 19-24-15.gif">
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        table,tr,td{
+            border-collapse: collapse; border: 2px solid black;
+        }
+        tr:hover{
+            background-color: aquamarine;
+        }
+        td:hover{
+            background-color: rgb(202, 113, 30);
+        }
+        #a{
+            background-color: brown;
+        }
+        
+    </style>
+</head>
+<body>
+    <table>
+        <tr>
+            <td>1</td>
+            <td>2</td>
+            <td>3</td>
+            <td>4</td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>2</td>
+            <td>3</td>
+            <td>4</td>
+        </tr>
+        </table>
+            <input type="button" class="a" value="按钮1" style="background-color: brown;border-radius: 20px;">
+            <input type="button" class="b" value="按钮2" style="border-radius: 20px; border: 2px dashed #000;border: 2px dashed #000;">
+            <input type="button" class="c" value="按钮3"style="border-radius: 20px;">
+            <input type="button" class="d" value="按钮4"style="border-radius: 20px;background-color: transparent;cursor: pointer;border: none;">
+        
+    
+</body>
+</html>
+
+
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240929\350\203\214\346\231\257\345\233\276\347\211\207.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240929\350\203\214\346\231\257\345\233\276\347\211\207.md"
new file mode 100644
index 0000000000000000000000000000000000000000..33a1608d6f58c850fece507141c131b4011a4bc9
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240929\350\203\214\346\231\257\345\233\276\347\211\207.md"
@@ -0,0 +1,67 @@
+# 效果图
+
+<img src="https://pic.imgdb.cn/item/66fa101ff21886ccc05d4075.png" alt="背景图片.png">
+
+
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box{
+            background-color: #2600ff;
+            height: 50px;
+            width: 50px;
+        }
+        .image-background{
+            background-image: url(./笑脸人.png);
+            height: 50px;
+            width: 50px;
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .cover-image{
+            background-image: url(./笑脸人.png);
+            height: 500px;
+            width: 500px;
+            background-size: 100%;
+            background-repeat: no-repeat;
+
+        }
+        .header{
+            background-color: #74d5ee;
+            height: 500px;
+            width: 500px;
+            background-image: url(./笑脸人.png);
+            background-repeat: no-repeat;
+            background-position-x: right;
+            background-position-y: bottom;
+
+        }
+        .pattern{
+            background-color: #74d5ee;
+            height: 500px;
+            width: 500px;
+            background-image: url(./笑脸人.png);
+            background-repeat: no-repeat;
+            background-position-x: center;
+            background-repeat: repeat-y;
+            margin-top: 10px;
+        }
+        
+    </style> 
+</head>
+<body>
+    <div class="box"></div>
+    <div class="image-background"></div>
+    <div class="cover-image"></div>
+    <div class="header"></div>
+    <div class="pattern"></div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\345\233\276\347\211\207\347\274\251\346\224\276.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\345\233\276\347\211\207\347\274\251\346\224\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b47fdd60aac53a7640e82927cfde95ef29950a53
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\345\233\276\347\211\207\347\274\251\346\224\276.md"
@@ -0,0 +1,39 @@
+# 效果
+
+<img src="https://pic.imgdb.cn/item/6703a709d29ded1a8c4c3363.gif" alt="图片缩放.gif">
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .cropped-background{
+            width: 400px;
+            background-image: url(./毛宝.gif);
+            height: 400px;
+            background-size: contain; /* 使背景图片保持其宽高比并适应伪元素 */ 
+            
+        }
+        .a{
+             display: flex;
+             justify-content: center; 
+            align-items: center;    
+            height: 100vh;          
+            
+        }
+        
+    </style>
+</head>
+<body><div class="a">
+    <div class="cropped-background">
+
+    </div>
+</div>
+    
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\346\230\276\347\244\272\345\234\250\344\270\255\345\277\203\345\214\272\345\237\237.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\346\230\276\347\244\272\345\234\250\344\270\255\345\277\203\345\214\272\345\237\237.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0fb4f63f81022f54cf12dc16078d42e6d4510572
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\346\230\276\347\244\272\345\234\250\344\270\255\345\277\203\345\214\272\345\237\237.md"
@@ -0,0 +1,39 @@
+# 效果
+
+<img src="https://pic.imgdb.cn/item/66fa1d4ef21886ccc06ade8a.png" alt="显示中心.png">
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .cropped-background{
+            background-image:  url(./毛宝.gif);
+            height: 400px;
+            background-size: 30%;
+            background-repeat: no-repeat;
+            background-size: contain;
+           background-position: center center;
+            
+        }
+        .a{
+             
+             
+            height: 100vh;
+        }
+    </style>
+</head>
+<body><div class="a">
+    <div class="cropped-background">
+
+    </div>
+</div>
+    
+</body>
+</html>
+
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\203\214\346\231\257\346\270\220\345\217\230.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\203\214\346\231\257\346\270\220\345\217\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6ec84a8a2e5650f0cb4f2911a25e5b1a91b49f11
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\203\214\346\231\257\346\270\220\345\217\230.md"
@@ -0,0 +1,31 @@
+
+
+
+
+# 效果
+
+<img src="https://pic.imgdb.cn/item/66fa16f0f21886ccc064fd19.png" alt="背景渐变.png">
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .gradient-box{
+            height: 100px;
+            width: 600px;
+            background-image: linear-gradient(to right , red 0%,blue 100%);
+        }
+    </style>
+</head>
+<body>
+    <div class="gradient-box">
+
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\203\214\346\231\257\351\231\204\345\212\240\345\261\236\346\200\247.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\203\214\346\231\257\351\231\204\345\212\240\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bfeee8de7690e6810a986670baebc00ab3d04b17
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\203\214\346\231\257\351\231\204\345\212\240\345\261\236\346\200\247.md"
@@ -0,0 +1,39 @@
+# 效果
+<img src="https://pic.imgdb.cn/item/6703ba16d29ded1a8c639c35.gif" alt="123.gif">
+
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .sticky-footer {  
+    position: fixed;  
+    bottom: 0;  
+    left: 0;  
+    width: 100%;  
+    height: 100px;  
+    background-image: url(./笑脸人.png);  
+    background-position: center;  
+    background-repeat: no-repeat;   
+    background-size: contain; /* 或者其他你想要的背景尺寸 */  
+ 
+}
+body{
+height: 10000px;
+
+
+}
+    </style>
+</head>
+<body>
+    <div class="sticky-footer">
+
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\246\206\347\233\226\345\233\276\347\211\207.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\246\206\347\233\226\345\233\276\347\211\207.md"
new file mode 100644
index 0000000000000000000000000000000000000000..87efd0802958ddbf95bc6902029bffe3ff56da68
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\350\246\206\347\233\226\345\233\276\347\211\207.md"
@@ -0,0 +1,30 @@
+# 效果
+
+没什么效果
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .multi-background{
+            background-image: url(./毛宝.gif);
+            height: 100vh;
+            background-repeat:no-repeat;
+        }
+        .multi-background{
+            background-image: url(./笑脸人.png);
+        }
+    </style>
+</head>
+<body>
+    <div class="multi-background">
+
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\351\242\234\350\211\262\344\272\244\346\233\277.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\351\242\234\350\211\262\344\272\244\346\233\277.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c21cf41d1a4bb6d5684c66917ee1e991c05d26ed
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240930\344\275\234\344\270\232\345\240\206/20240930\351\242\234\350\211\262\344\272\244\346\233\277.md"
@@ -0,0 +1,34 @@
+# 效果图
+<img src="https://pic.imgdb.cn/item/66fa1079f21886ccc05d9407.png" alt="背景颜色交替.png">
+
+# 代码
+```html 
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div{
+            height: 100px;
+            width: 1000px;
+        }
+        .dua{
+            background-image: linear-gradient(to right top , yellow 0%,yellow 33%,red 33% , red 66%,blue 66%,blue 99%);
+        }
+        .dua1{
+            background-image: linear-gradient(to right,black 0% , black 25%, white 25%,white 50% ,black 50% , black 75%,white 75%,white 100% );
+        }
+    </style>
+</head>
+<body>
+    <div class="dua">
+        
+    </div>
+    <div class="dua1">
+
+    </div>
+</body>
+</html>
+```
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20241009\347\275\221\346\240\274.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20241009\347\275\221\346\240\274.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e90d78e37b4796d7ad97adc0e4a403b8f01c9982
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20241009\347\275\221\346\240\274.md"
@@ -0,0 +1,29 @@
+# 效果
+<img src="https://pic.imgdb.cn/item/6707c95bd29ded1a8cd10a1b.gif" alt="GIF 2024-10-10 20-29-29.gif">
+
+# 代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div{
+            
+            background-image: repeating-linear-gradient(to right ,rgb(223, 66, 66,0.5) 0px ,rgb(223, 66, 66,0.5)  10px,transparent 10px,transparent 20px),
+            repeating-linear-gradient(to bottom ,rgb(223, 66, 66,0.5) 0px ,rgb(223, 66, 66,0.5)  10px,transparent 10px,transparent 20px);
+            height: 400px;
+            width: 400px;
+            border: 1px solid;
+        }
+    </style>
+</head>
+<body>
+    <div>
+
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/GIF 2024-9-22 13-46-59.gif" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/GIF 2024-9-22 13-46-59.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..4d01d128f1a780b85101f9577bde485a2db68472
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/GIF 2024-9-22 13-46-59.gif" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\230\276\347\244\272\344\270\255\345\277\203.png" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\230\276\347\244\272\344\270\255\345\277\203.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4897c1dd8aa4f751d93a0f7db6b91aeb3c303650
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\230\276\347\244\272\344\270\255\345\277\203.png" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\265\205\350\223\235\350\211\262\345\234\206\345\234\210.jpg" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\265\205\350\223\235\350\211\262\345\234\206\345\234\210.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d7a4eba0449977707f0a250e1b99c95e54d4aaf6
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\265\205\350\223\235\350\211\262\345\234\206\345\234\210.jpg" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\345\233\276\347\211\207.png" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\345\233\276\347\211\207.png"
new file mode 100644
index 0000000000000000000000000000000000000000..39d830b6f7e0ebc4e51b507aa274ff1bd9cbd122
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\345\233\276\347\211\207.png" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\346\270\220\345\217\230.png" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\346\270\220\345\217\230.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2b92c6d25545e7398489d74ee79b908dc9276528
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\346\270\220\345\217\230.png" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\351\242\234\350\211\262\344\272\244\346\233\277.png" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\351\242\234\350\211\262\344\272\244\346\233\277.png"
new file mode 100644
index 0000000000000000000000000000000000000000..de439092d143cf275b6e8b836352443f254b2f03
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\350\203\214\346\231\257\351\242\234\350\211\262\344\272\244\346\233\277.png" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\345\233\276\345\272\212.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\345\233\276\345\272\212.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6cf88281346ad5774ef93d94c426d30e73dbcd5b
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\345\233\276\345\272\212.md"
@@ -0,0 +1,2 @@
+## 图床
+<img src="https://pic.imgdb.cn/item/66ebfff3f21886ccc0df9f2a.png" alt="屏幕截图 2024-09-19 184138.png">
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\346\257\233\345\256\235.gif" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\346\257\233\345\256\235.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..bfb05058b09ca6087b67b9524a7d8626a6fa716d
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\346\257\233\345\256\235.gif" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\347\254\221\350\204\270\344\272\272.png" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\347\254\221\350\204\270\344\272\272.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d710a175bd632fff79a93a14aa68c8a10065bb43
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\347\254\221\350\204\270\344\272\272.png" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\345\217\275\351\207\214\345\221\261\345\225\246,\350\216\253\350\245\277\350\216\253\350\245\277.txt" "b/\350\224\241\345\234\243\346\201\251/\345\217\275\351\207\214\345\221\261\345\225\246,\350\216\253\350\245\277\350\216\253\350\245\277.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240904\347\254\224\350\256\260.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240904\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..98a73bf294e04373cb800df4c578d50794f2fd2a
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240904\347\254\224\350\256\260.md"
@@ -0,0 +1,62 @@
+ctrl+shift+v 显示效果
+
+# 一级标题笔记
+
+## 二级标题笔记
+
+[显示内容](网址)相当于a标签
+
+*斜体*
+
+**加粗**
+
+***粗斜体***
+
+>我是引用
+
+使用一个`dom`标签`dom`指的是`font`
+
+写多行dom
+
+```js
+console.log('xxx')
+```
+
+# 有序列表
+
+1. 1
+    1) 1
+    1) 2
+    1) 3
+1. 2
+1. 3
+
+1) 1
+1) 2
+1) 3
+
+# 无序列表
+
+- 1
+- 2
+- 3
+ 
++ 1
++ 2
++ 3
+ 
+* 1
+* 2
+* 3
+
+|左对齐| 居中 | 右对齐 |
+|:- |:-:    | -:|
+| 左边 | 中间 | 右边 |
+
+ctrl +shift+ " 呼出终端
+
+git+ status 查看状态
+
+git reset -- hard 回档
+
+
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240909\347\254\224\350\256\260.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240909\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..06d1f67d819c2a8c6dfd0175e8a63b290d15fcbb
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240909\347\254\224\350\256\260.md"
@@ -0,0 +1,42 @@
+# 认识web和web标准
+## web
+web即全球广域网也称万维网。我们常说的web端就是网页端
+## 网页
+网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页
+## 浏览器
+浏览器是网页运行的平台
+## web标准
+1. 结构标准（HTML）：用于对网页元素进行整理和分类。
+2. 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
+3. 行为标准（JS）：用于定义网页的交互和行为。
+```
+Web前端分三层：
+HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
+CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
+JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力
+```
+# 浏览器的介绍
+```
+浏览器分成两部分：
+  1. 渲染引擎（即浏览器内核）
+  2. JS引擎
+```
+```浏览器内核就是把我们编写的代码转换为页面的中控件，多代指渲染引擎，但其实浏览器内核包括了两部分：渲染引擎和js引擎，只是后来就是、引擎用得越来越多 所以就单独的把就是、引擎拿了出来。```
+```渲染引擎：渲染引擎负责对网页语法的解释（如HTML、XML等）并渲染网页（CSS）。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息```
+|浏览器|内核|
+|:-|-:|
+|chrome|Blink|
+|欧鹏|Blink|
+|360安全浏览器|Blink|
+|360极速浏览器|Blink|
+|Safari|Webkit|
+|Firefox 火狐|Gecko|
+|IE|Trident|
+```JS引擎：JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。即负责对JavaScript脚本的解释与执行```
+|浏览器|JS引擎|
+|:-|-:|
+|chrome / 欧鹏|V8|
+|Safari|Nitro|
+|Firefox 火狐|SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）|
+|Opera|Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）|
+|IE|Trident|
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240913\347\254\224\350\256\260.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240913\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e5a4cd3cea6820498ff372f28a2ab00500db7329
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240913\347\254\224\350\256\260.md"
@@ -0,0 +1,170 @@
+# 排版标签
+
+## 标题标签
+标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题
+
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>H1</h1>
+    <h2>H2</h2>
+    <h3>H3</h3>
+    <h4>H4</h4>
+    <h5>H5</h5>
+    <h6>H6</h6>
+</body>
+</html>
+```
+
+## HTML注释
+```html
+<!--我是注释-->>
+```
+
+## 段落标签`<p>`
+```html
+   <p>软工三班</p>
+   <p align="left">软工三班</p>
+   <p align="center">软工三班</p>
+   <p align="right">软工三班</p>
+```
+
+HTML标签是分等级的，HTML将所有的标签分为两种：
+
+- **文本级标签**：p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。（a标签里不能放a和input）
+
+- **容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
+
+## 水平线标签`<hr/>`
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<body>
+	<p>自古情深留不住</p>
+	<hr />
+	<p>总是套路得人心</p>
+</body>
+</html>
+```
+
+## 换行标签`<br/>`
+```html
+这是<br/>换行<br/>标签
+```
+
+## `<div>`和`<span>`标签
+- **div标签**：可以把标签中的内容分割为独立的区块。必须单独占据一行。
+
+- **span标签**：和div的作用一致，但不换行。
+
+span举例：
+```html
+<p>
+	简介简介简介简介简介简介简介简介
+	<span>
+		<a href="">详细信息</a>
+		<a href="">购买</a>
+	</span>
+</p>
+```
+
+div举例：
+
+```html
+<div class="header">
+	<div class="logo"></div>
+	<div class="nav"></div>
+</div>
+<div class="content">
+	<div class="guanggao"></div>
+	<div class="dongxi"></div>
+</div>
+<div class="footer"></div>
+```
+
+
+
+# 字体标签和超链接
+
+字体标签：`<font>`、 `<b>`、 `<u>` 、`<sup>` 、`<sub>`
+
+超链接 `<a>`
+
+## 特殊符号
+
+| 特殊字符 | 描述 |字符的代码 |
+|:-------------|:-------------|:-----|
+||空格符|`&nbsp;`|
+|<|小于号|`&lt;`|
+|> |大于号|`&gt;`|
+|&|和号|`&amp;`|
+|￥|人民币|`&yen;`|
+|©|版权|`&copy;`|
+|®|注册商标|`&reg;`|
+|°|摄氏度|`&deg;`|
+|±|正负号|`&plusmn;`|
+|×|乘号|`&times;`|
+|÷|除号|`&divide;`|
+|²|平方2（上标2）|`&sup2;`|
+|³|立方3（上标3）|`&sup3;`|
+
+## 下划线、中划线、斜体
+
+- `<u>`：下划线标记
+
+- `<s>`或`<del>`：中划线标记（删除线）
+
+- `<i>`或`<em>`：斜体标记
+
+- `<b>` ：粗体标签
+
+
+### 上标`<sup>`   下标`<sub>`
+
+上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部`
+举例：
+```html
+O<sup>2</sup>    5<sub>3</sub>
+```
+
+## 外部链接、锚链接、邮件链接
+
+### 外部链接
+```html
+<a href="02页面.html">点击进入另外一个文件</a>
+```
+
+### 锚链接
+
+**锚链接**：给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。
+```html
+<a href="a.html#name1">回到顶部</a>
+```
+
+### 邮件链接
+
+```html
+<a href="mailto:xxx@163.com">点击进入我的邮箱</a>
+```
+
+### 超链接的属性
+
+- `href`：目标URL
+- `title`：悬停文本。
+- `name`：主要用于设置一个锚点的名称。
+- `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
+	- `_self`：在同一个网页中显示（默认值）
+	- `_blank`：**在新的窗口中打开**。
+	- `_parent`：在父窗口中显示
+	- `_top`：在顶级窗口中显示
+
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240914.\347\254\224\350\256\260.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240914.\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2d0912711d9a3d7618c24fbce9a506f24ade99d6
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240914.\347\254\224\350\256\260.md"
@@ -0,0 +1,57 @@
+# 标签
+ - 列表标签：`<ul>`、`<ol>`、`<dl>`
+ - 表格标签：`<table>`
+ - 框架标签及内嵌框架`<iframe>`
+## 列表标签
+列表标签分为三种。
+### 1、无序列表`<ul>`，无序列表中的每一项是`<li>`
+例如：
+
+```html
+<ul>
+	<li>默认1</li>
+	<li>默认2</li>
+	<li>默认3</li>
+</ul>
+```
+注意：
+
+- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
+- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
+- ul的儿子，只能是li。但是li是一个容器级标签，**li里面什么都能放，甚至可以再放一个ul**。
+**属性：**
+
+ - `type="属性值"`。属性值可以选： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
+### 2、有序列表`<ol>`，里面的每一项是`<li>`
+例如：
+
+```html
+<ol >
+	<li>呵呵哒1</li>
+	<li>呵呵哒2</li>
+	<li>呵呵哒3</li>
+</ol>
+```
+- 和无序列表一样，有序列表也是可以嵌套的
+- ol和ul就是语义不一样，怎么使用都是一样的。
+- ol里面只能有li，li必须被ol包裹。li是容器级。
+### 3、定义列表`<dl>`
+
+> 定义列表的作用非常大。
+
+`<dl>`英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
+
+ - `<dt>`：definition title 列表的标题，这个标签是必须的
+ - `<dd>`：definition description 列表的列表项，如果不需要它，可以不加
+
+备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
+- （1）是一个列表，列出了几个dd项目
+- （2）每一个词儿都有自己的描述项。
+- dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）
+备注：dd是描述dt的。
+# 表格标签
+
+表格标签用`<table>`表示。
+一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。
+所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
+在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\346\240\207\347\255\276.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c597bb141fdcd9af6f4d556968e04dfafdb93789
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\346\240\207\347\255\276.md"
@@ -0,0 +1,142 @@
+## 笔记
+### 表单标签
+>表单标签用`form`表示，用于与服务器交互
+
+**属性值：**
+`name` ,`id`
+`action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
+`method`：表单数据的提交方式，一般取值：get(默认)和post
+
+ **get提交和post提交的区别：**
+GET方式：
+将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
+特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
+
+POST方式：
+将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
+特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
+
+
+
+## `<input>`：输入标签（文本框）
+>用于接收用户输入
+eg:
+```html
+<input type="text" />
+```
+
+**属性（`type="属性值"`）**
+`text`（默认）:文本类型
+`password`：密码类型
+`radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，若互斥，则具有相同属性name）。
+`checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
+`checked`：`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可用这个属性
+`hidden`：隐藏框
+`button`：普通按钮
+`submit`：提交按钮
+`reset`：重置按钮
+`image`：图片按钮
+`file`：文件选择框
+
+**`value="内容"`**：文本框里的默认内容（已填好的）
+**`size="50"`：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。**
+
+`readonly`和`disabled`：文本框只读，不能编辑,属性值可不写。
+
+
+
+## `<select>`：下拉列表标签
+>`<select>`标签里面的每一项用`<option>`表示。select就是“选择”，option“选项”。
+
+**`<select>`标签的属性：**
+`multiple`：可以对下拉列表中的选项进行多选。既可以写成 `multiple=""`，也可以写成`multiple="multiple"`。
+`size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
+
+**`<option>`标签的属性：**
+`selected`：预选中。没有属性值。
+
+
+
+## `<textarea>`标签：多行文本输入框
+>text 就是“文本”，area 就是“区域”。
+
+**属性：**
+`rows="4"`：指定文本区域的行数。
+`cols="20"`：指定文本区域的列数。
+`readonly`：只读
+
+
+## 表单的语义化
+>在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
+
+
+
+## `<label>`标签
+>label标签是为了解决单击男和女时可以选中单选框(小圆圈)。
+>eg:
+```html
+<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
+<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
+```
+
+**让label标签的**for 属性值**，和 input 标签的 **id 属性值相同**，那么这个label和input就有绑定关系了。**
+
+
+### 注意：
+1.表单和表格嵌套时，是在`<form>`标记中套`<table>`标记。
+2.action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
+3.name属性可以相同，但*id的属性值必须是唯一的*。
+4.size属性值的单位不是像素哦
+5.任何表单元素都有label
+
+
+
+
+
+# 多媒体标签
+>多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
+.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
+上述格式视频一般文件较大，不利于网络下载播放。
+一般情况下，是将其它的视频格式，转成Flash来在网页上播放。转换软件：格式工厂等。
+Flash格式的视频兼容性非常好，Flash格式的文件很小
+
+
+## `<bgsound>`标签：播放背景音乐
+>eg：
+```html
+ <body>
+	<bgsound src="王菲 - 清风徐来.mp3"></bgsound>
+ </body>
+```
+**属性：**
+`src="音乐文件的路径"`
+`loop="-1"`：属性值代表播放次数，-1代表循环播放。
+
+
+
+## `<embed>`标签：播放多媒体文件（音频、视频等）
+主要应用Netscape浏览器，它不是W3C规范。
+>eg：`<embed>`标签播放音频
+```html
+ <body>
+	<embed src="王菲 - 清风徐来.mp3"></embed>
+ </body>
+```
+
+*备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。*
+
+
+## `<object>`标签：播放多媒体文件（音频、视频等）
+>eg:
+```html
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
+  <param name="movie" value="images/banner.swf">
+  <param name="quality" value="high">
+  <param name="wmode" value="transparent">
+  <embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
+</object>
+```
+**属性：**
+`classid`：指定Flash插件的ID号，一般存在于注册表中。
+`codebase`：如果Flash插件不存在，则从codebase指定的地址下载。
+`<param>`标签的主要作用：设置具体的详细参数。
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240920\350\241\250\345\215\225\345\244\232\345\252\222\344\275\223.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240920\350\241\250\345\215\225\345\244\232\345\252\222\344\275\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..572498cdc8769dabbd70aaa759189ebc79bcc645
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240920\350\241\250\345\215\225\345\244\232\345\252\222\344\275\223.md"
@@ -0,0 +1,47 @@
+### 表单事件
+
+- `oninput()`：用户输入内容时触发，可用于输入字数统计。
+
+- `oninvalid()`：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
+
+## 多媒体
+
+在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。
+
+H5里面提供了视频和音频的标签。
+
+### 音频
+
+HTML5通过`<audio>`标签来解决音频播放的问题。
+
+我们可以通过附加属性，来更友好地控制音频的播放，如：
+
+- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
+
+- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
+
+- `loop` 循环播放。
+
+- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
+
+### 视频
+
+
+HTML5通过`<video>`标签来解决视频播放的问题。
+
+
+
+我们可以通过附加属性，来更友好地控制视频的播放，如：
+
+- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
+
+- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
+
+- `loop` 循环播放。
+
+- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
+
+- `width`：设置播放窗口宽度。
+
+- `height`：设置播放窗口的高度。
+
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240923\346\240\207\347\255\276.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240923\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fc7cbb33c410fca1c9fff36fcd61becb639e6870
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240923\346\240\207\347\255\276.md"
@@ -0,0 +1,77 @@
+# html5
+
+## 拖拽
+
+1.设置draggable=“true”属性之后，元素是可以拖拽的，但是拖拽之后要做的事情就涉及到事件监听（js技术）
+
+2.拖拽元素的事件监听：（应用于拖拽元素）
+
+- ondragstart --当拖拽开始时调用
+- ondragleave --当鼠标离开拖拽元素时调用
+- ondragend --当拖拽结束时调用
+- ondrag --整个过程中都会调用
+
+
+
+<!--eg：1.拿到节点---let box=document.getElementById('标签ID名')2.给拿到的节点的指点事件绑定一个函数--box.ondragstart=function(){console.log('')}-->
+
+## 全屏
+
+开启/关闭全屏显示
+
+requestFullscreen()---让元素开启全屏显示
+
+cancelFullscreen()---让元素关闭全屏显示
+
+## web存储
+
+### h5中有两种存储方式
+
+1.window.sessionStorage会话存储
+
+- 保存在内存中
+- 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁
+- 在同一个窗口下数据可以共享
+
+2.window.localStorage本地存储
+
+- 有可能保存在浏览器内存中，也可能保存在硬盘里
+- 永久生效，除非手动删除
+- 可以多窗口共享
+
+### web存储的特性
+
+1. 设置、读取方便
+
+2. 容量较大，sessionStorage约5M，localStorage约20M
+
+3. 只能存储字符串，可以将对象JSON.stringify()编码后存储
+
+   # css
+
+   ## 绝对单位
+
+   1 in=2.54cm=25.4mm=72pt=6pc
+
+   各种单位的含义：
+
+   - in：英寸
+   - cm：厘米
+   - mm：毫米
+   - pt：点points（1点=1/72英寸）
+   - pc：皮卡picas(1皮卡=12点)
+
+   ## 相对单位
+
+   px像素 em：印刷单位相当于12个点 %：百分比，相对于周围文字的大小
+
+   ## 如何让单行文本垂直居中
+
+   小技巧：如果一段文本只有一行，设置行高=盒子高，就可以保证文本垂直居中
+
+   记住：行高指的是一行的高度，并不是文字的高
+
+   
+
+
+
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240925css\345\237\272\347\241\200.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240925css\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e56c62f9a26c8ce60053e5a8b87ed59e08be31e1
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240925css\345\237\272\347\241\200.md"
@@ -0,0 +1,87 @@
+# 文本样式综合设计练习
+[文本样式综合设计](http://sjt9tkyoc.hd-bkt.clouddn.com/%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%BB%BC%E5%90%88%E8%AE%BE%E8%AE%A1.mp4)
+```html
+主要代码
+        .highlight{
+            background-color: black;
+            color: gold;
+            text-transform: uppercase;
+            text-indent: 20px;
+        }
+        .highlight:hover{
+            color: white;
+            background-color: gray;
+        }
+```
+# 文本排版设计练习
+[文本排版设计练习](http://sjt9tkyoc.hd-bkt.clouddn.com/%E6%96%87%E6%9C%AC%E6%8E%92%E7%89%88%E8%AE%BE%E8%AE%A1.png)
+```html
+主要代码
+         .article p{
+            color: gray;
+            font-size: 16px;
+            line-height: 1.5;
+            text-indent: 1em;
+         }
+         .article p::first-letter{
+            font-size: 24px;
+            font-weight: bold;
+         }
+```
+# 文本对齐和装饰
+[文本对齐和装饰](http://sjt9tkyoc.hd-bkt.clouddn.com/%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90%E5%92%8C%E8%A3%85%E9%A5%B0.png)
+```html
+主要代码
+          .poem{
+            color: blue;
+            text-align: justify;
+            text-transform: uppercase;
+          }
+          .poem::first-line{
+            color: red;
+          }
+```
+# font字体属性
+CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等
+```
+css样式常见的字体属性：
+	font-size: 50px; 		/*字体大小*/
+	line-height: 30px;      /*行高*/
+	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
+	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
+	font-weight: bold;	/*粗体*/
+	font-variant: small-caps;  /*小写变大写*/
+```
+## 行高
+CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的
+```
+为了严格保证字在行里面居中，我们约定：行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除
+```
+### 如何让当行文本垂直居中
+设置 行高=盒子高
+
+计算方法：上padding（盒子高度-总行高）/2
+### vertical-align:middle:属性
+vertical-align属性可用于指定行内元素、行内块元素、表格的单元格的垂直对齐方式。主要是用于图片、表格、文本的对齐。
+### 字号、行高、字体三大属性
+- 字号:font-size:14px;
+- 行高：line-height：24px;
+- 字体：font-family："宋体";
+- 字号、行高、字体连写：加粗 字号/行高/字体（连写属性至少要有字号和字体。否则不生效）
+## 子体加粗属性
+	font-weight: normal; /*正常*/
+	font-weight: bold;  /*加粗*/
+	font-weight: 100;
+	font-weight: 200;
+	font-weight: 900;
+
+#  文本属性
+```
+css常见文本属性
+- letter-spacing: 0.5cm ;  单个字母之间的间距
+- word-spacing: 1cm;   单词之间的间距
+- text-decoration: none; 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
+- color:red;字体颜色
+- text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
+- text-transform: lowercase;单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240929\345\210\227\350\241\250\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240929\345\210\227\350\241\250\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8ba8d72805e0f17c4156b6d5e72293a9812a8f41
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240929\345\210\227\350\241\250\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -0,0 +1,118 @@
+## 列表属性
+- list-style：简要属性，用于将所有用于列表的属性设置于一个声明之中
+- list-style-image：将图像设置为列表项标记
+- list-style-position：设置列表中列表项标记被放置的位置
+- list-style-type：设置列表项标记的类型
+- marker-offset：两个容器靠近的一边的间距
+
+## overflow属性
+对于超出范围的内容要怎么处理，属性值为:
+- visible：默认值。多余的内容不剪切也不添加滚动条，全部显示
+- hidden：不显示超出尺寸的内容
+- auto：如果内容不超出，则不显示滚动条。如果内容超出，则显示滚动条
+- scroll：Windows平台下，无论内容是否超出总是显示滚动条；Mac平台下和auto属性相同
+
+## 鼠标的属性cursor
+常用：
+- auto：默认。浏览器根据当前情况确定鼠标光标的类型
+- `pointer`：竖起一根手指的手形光标
+- hand：和pointer作用一样，竖起一只手指形光标
+
+## 滤镜
+对图片添加滤镜效果：`filter`。
+```html
+<!-- 让图片变成灰白图 -->
+ <img src="3.jpg" style="filter:gray()">
+```
+
+## 背景属性background
+1. css常见背景属性：
+    - background-color：设置元素的背景颜色
+    - `background-image:url()` ：将图片设置成背景
+    - background-repeat：设置背景图片是否重复以及如何重复，`默认平铺满`
+        - no-repeat：不平铺
+        - repeat-x：纵向平铺
+        - repeat-y：横向平铺
+    - `background-position:center top;`：设置背景图片在当前容器中的位置
+    - background-attachment：设置背景图片是否跟着滚动条一起移动
+        - scroll：默认属性，跟fixed属性相反
+        - fixed：背景被固定，不会随滚动条被滚走
+    - background：将以上的多个属性写在同一个声明中
+2. css3新增一些属性
+    - background-origin：
+    - background-clip：背景裁切
+    - background-size：调整尺寸
+
+### 背景颜色background-color
+1. `单词表示`
+    background-color：颜色英语单词
+2. `RGB表示法`
+    RGB表示三原色：红red、绿green、蓝blue，每个像素都是由三原色的发光原件组成的。r、g、b的每个值的取值范围`0~255`，一共256个值。颜色可以叠加
+    ```css
+    /* 红色 */
+    background-color:rgb(255,0,0)
+    /* 黑色 */
+    background-color:rgb(0,0,0)
+    ```
+3. `RGBA表示法`
+    - RGBA即：红red、绿green、蓝blue、alpha透明度
+    - r、g、b的每个值的取值范围`0~255`，A的取值范围`0~1`
+4. `十六进制表示法`
+    - 所有用#开头的色值都是16进制的，比如红色
+        ```
+            background-color : #ff0000;
+        ``` 
+    - 16进制可以简化为3位，所有`#aabbcc`的形式，可以简化为`#abc`
+        ```css
+        background-color : #ff0000;
+        <!-- 等价于 -->
+        background-color : #f00;
+        ```
+    - 常见的颜色简写：
+        ```
+        #000：黑
+        #fff：白
+        #f00：红
+        #222：深灰
+        #333：灰
+        #ccc：浅灰
+        ```
+5. `HSLA表示法`
+    ```css
+    background-color:hsla(240,50%,50%,0.4)
+    ```
+    解释：
+    - H：色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
+        ![](http://img.smyhvae.com/20180207_1545.png)
+    - S：饱和度，取值范围 0%~100%。值越大，越鲜艳。
+    - L：亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
+    - A：透明度，取值范围 0~1。其他方式：
+        1）opacity:0.3；会将整个盒子以及子盒子设置透明度
+        2）background:transparent; 可以单独设置透明度，但设置的是完全透明的（不可调节透明度）
+
+### background-repeat属性
+设置图片背景是否重复以及如何重复，默认平铺满。属性值：
+- no-repeat：不要平铺
+- repeat-x：横向平铺
+- repeat-y：纵向平铺
+
+### background-position属性
+背景定位属性，有两种方式描述
+1. 用像素描述
+    ```
+    background-position：向右偏移量 向下偏移量;
+    ```
+    属性值可以是正数，也可以是负数
+2. 用单词描述
+    ```
+    background-position：描述左右的词 描述上下的词;
+    ```
+    - 描述左右：left、center、right
+    - 描述上下：top、center、bottom
+
+### background-attachment属性
+设置背景照片是否固定，属性值：
+- fixed：背景被固定住，不会随滚动条滚动而移动
+- scroll：随滚动条而滚动，默认属性
+
+
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..13d734ef555b9a61bc750da8aa6206b4b86eacb9
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -0,0 +1,72 @@
+## background综合属性
+将多个属性写在一起，例如
+```css
+background:red url(1.jpg) no-repeat 100px 100px fixed;
+```
+> 小属性可以层叠掉大属性,当该属性被单领出来时会覆盖大属性中的值
+
+## background-size背景尺寸
+设置背景**图片**的尺寸
+1. 宽高给具体数值
+    ```css
+        background-size: 500px 500px;
+    ```
+2. 宽高的相对容器大小的百分比（会根据宽的大小调整）
+    ```css
+        background-size: 50% 50%;     <!-- 可简写成一个50% -->
+    ```
+3. 浏览器自定
+    ```css
+        background-size: 100% auto;
+    ```
+4. cover，始终填满容器（长宽比不变）
+    ```css
+        background-size: cover;
+    ```
+5. contain，将图片完整显示（长宽比不变），可能会导致容器部分区域留白
+    ```css
+        background-size: contain;
+    ```
+
+## background-origin背景原点
+控制背景时从什么地方开始显示
+1. padding-box：从`内边距`开始显示背景图
+2. border-box：从`边框`开始显示背景图
+3. content-box：从`内容区域`开始显示背景图
+
+## background-image渐变
+1. 线性渐变：沿着某条直线朝一个方向产生渐变效果
+    ```css
+    background-image: linear-gradient(方向,起始颜色,终止颜色)
+    ```
+    - 方向：to left向左、to right向右、to top向上、to bottom线下、30deg 角度(顺时针方向30°)
+
+    部分情况：
+    - 不写角度，默认从上到下
+        ```css
+        background-image: linear-gradient(red,green)
+        ```
+    - 指定角度
+        ```css
+        background-image: linear-gradient(135deg,red,green)
+        ```
+    - 指定那个部分什么颜色（颜色渐变）
+        ```css
+        background-image: linear-gradient(to right, yellow 0%,red 40%,green 70%,blue 100%)
+        ```
+    - 颜色突变（没有渐变）
+        ```css
+        <!-- 黑-白-黑-白 -->
+        background-image: linear-gradient(to right,
+        black 0%,black 25%,white 25%,white 50%,black 50%,black 75%,white 75%,white 100%)
+        ```
+2. 径向渐变：从一个中心点开始沿着四周产生渐变效果
+3. 重复渐变
+
+## background-clip属性
+设置元素的背景（背景图片或颜色）是否延伸到边框下面
+1. padding-box：超出`内边距`部分裁剪掉
+2. border-box：超出`边框`部分裁剪掉
+3. content-box：超出`内容区域`部分裁剪掉
+
+
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20241009 \346\270\220\345\217\230\344\270\216css\346\240\267\345\274\217.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20241009 \346\270\220\345\217\230\344\270\216css\346\240\267\345\274\217.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bebd3d300a490685f44b21913cd19364a91e4452
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20241009 \346\270\220\345\217\230\344\270\216css\346\240\267\345\274\217.md"	
@@ -0,0 +1,165 @@
+# 渐变 background-image
+## 线性渐变
+- 线性渐变: 沿着某条直线朝一个方向产生渐变效果
+
+```html
+background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+background-image: linear-gradient(to right, yellow, green);
+```
+
+- 方向可以是：to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）
+
+## 径向渐变
+- 径向渐变：从一个中心点开始沿着四周产生渐变效果
+
+```html
+background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
+background-image: radial-gradient(100px at center,yellow ,green);
+```
+
+- 中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角
+
+# 裁剪
+- `clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域,区域内的部分显示，区域外的隐藏
+- 虽然clip-path不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用
+- clip-path属性的好处是，即使做了任何裁剪，`容器的占位大小是不变的`
+
+```html
+.div1 {
+        width: 320px;
+        height: 320px;
+        border: 1px solid red;
+        background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
+        background-size: cover;
+
+        /* 裁剪出圆形区域 */
+        clip-path: circle(50px at 100px 100px);
+        transition: clip-path .4s;
+    }
+    .div1:hover{
+        /* 鼠标悬停时，裁剪出更大的圆形 */
+        clip-path: circle(80px at 100px 100px);
+    }
+```
+
+# css语法
+语法格式
+- 选择器{ 属性名: 属性值; 属性名: 属性值; }
+
+```
+p{
+    color:red;
+}
+```
+
+- 选择器代表页面上的某类元素，选择器后一定是大括号
+- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）
+- 冒号和属性值之间可以留一个空格（编程习惯的经验）
+- 如果一个属性有多个值的话，那么多个值用空格隔开
+
+## css代码的注释
+- CSS 只有/* */这种注释，没有//这种注释。而且注释要写在`<style>`标签里面才算生效
+
+# css的书写方式
+- 行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。
+- 内嵌样式（内联样式）：在页面的 head 标签里里采用`<style>`标签。范围针对此页面。
+- 外链样式：引入外部样式表 CSS 文件
+
+## 行内样式
+- 采用 style 属性,范围只针对此标签适用
+- 该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改
+
+```
+<p style="color:white;background-color:red">你好</p>
+```
+
+## 内嵌样式表
+- 在 head 标签中加入`<style>`标签，对多个标签进行统一修改，范围针对此页面
+- 该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活
+
+```
+<style type="text/css">
+    p {
+        font-weight: bold;
+        font-style: italic;  /* 内嵌样式 */
+        color: red;
+    }
+</style>
+<body>
+    <p>你好</p>
+    <p style="color:blue">你懂得</p> //行内样式
+</body>
+```
+
+## 引入外部样式表
+外链样式这种引入方式又分为两种
+- 采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
+- 采用 import 导入，必须写在`<style>`标签中。然后用类似于`@import url(a.css) ;`这种方式导入
+两种引入样式方式的区别：外部样式表中不能写标签，但是可以写 import 语句
+
+# css的四种基本选择器
+- 标签选择器：针对一类标签
+- ID 选择器：针对某一个特定的标签使用
+- 类选择器：针对你想要的所有标签使用
+- 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
+
+## 标签选择器
+- 标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”
+
+```
+p{ font-size:14px; }
+```
+- 所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
+- 无论这个标签藏的多深，一定能够被选择上。
+- 选择的所有，而不是一个
+
+## ID选择器
+- 针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义
+
+```
+#mytitle{ border:3px dashed green; }
+```
+
+- id 选择器的选择符是“#”。
+- 任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。
+这个标签的名字，不可以任取
+- （1）只能有字母、数字、下划线
+- （2）必须以字母开头
+- （3）不能和标签同名。比如 id 不能叫做 body、img、a
+-  (4) HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！
+
+
+## 类选择器
+- 针对你想要的所有标签使用 优点：灵活 css 中用.来表示类
+
+```
+.one{ width:800px; }
+```
+
+和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点:
+- 类选择器可以被多种标签使用
+- 同一个标签可以使用多个类选择器 用空格隔开
+例如
+
+```
+<h3 class="teshu  zhongyao">我是一个h3啊</h3>
+```
+
+- css 和 js 都在用同一个 id，会出现不好沟通的情况
+- 我们记住这句话：类上样式，id 上行为。意思是说，class属性交给 css 使用，id属性交给 js使用
+
+### 上述三种选择器的区别
+- 标签选择器针对的是页面上的一类标签
+- ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识
+- 类选择器可以被多种标签使用
+
+## 通配符*
+- 通用选择器，将匹配任何标签
+
+```
+* {
+    margin-left: 0px;  /* 通用选择器，针对所有标签都适用 */ 
+    margin-top: 0px;
+}
+```
+
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20241011 \351\200\211\346\213\251\345\231\250.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20241011 \351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..14964a0755531e8909b1d0e8c01aec4fba05fb33
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20241011 \351\200\211\346\213\251\345\231\250.md"	
@@ -0,0 +1,81 @@
+## 一些CSS3选择器
+1. 子代选择器
+
+    用符号>表示，只能选择该级别下的下一个级别中的元素
+
+    ```css
+    div > p {
+        color: red;
+    }
+    ```
+    只能选择:
+    ```html
+    <div>
+        <p>我是div的儿子</p>
+    </div>
+    ```
+
+2. 序选择器
+3. 下一个兄弟选择器
+
+    +号表示选择下一个兄弟
+    ```css
+    h3 + p {
+        color: red;
+    }
+    ```
+    ```html
+    <h3>我是一个标题</h3>
+    <p>我是一个段落</p>     <!-- 只有这一个变成红色 -->
+    <p>我是一个段落</p>
+    <p>我是一个段落</p>
+    ```
+
+## 伪类选择器
+伪类：同一个标签，根据不同种的状态，有不同的样式，用冒号:表示
+
+### 静态伪类
+只能用于**超链接**的样式
+- :link  超链接被点击之前
+- :visited  链接被访问之后
+
+### 动态伪类
+针对**所有标签**都适用
+- :hover  悬停，鼠标`放在标签`上的时候
+- :active  激活，鼠标`点击标签`但是不松手的时候
+- :focus  是某个标签`获得焦点`的时候的样式
+
+在实际操作中可能会遇见属性失效的问题，有以下情况：
+1) 写了选择器，但是实际并没有应用在想应用的元素上
+2) 选择器写对了，但是属性及其值并没有生效
+    - 属性值写错了，不生效
+    - 属性值被覆盖
+
+遇见失效情况，可根据以上情形进行问题排查，也可多次变更浏览器进行尝试
+
+### 超链接a的四种状态
+> 四种状态必须按照`固定顺序`写，否则将失效：a:link 、a:visited 、a:hover 、a:active
+
+- :link  超链接`被点击之前`
+- :visited  链接被`访问之后`
+- :hover  悬停，鼠标`放在标签`上的时候
+- :active  激活，鼠标`点击标签`，但是不松手的时候
+
+```css
+/*让超链接点击之前是红色*/
+a:link{
+    color:red;
+}
+/*让超链接点击之后是绿色*/
+a:visited{
+    color:orange;
+}
+/*鼠标悬停，放到标签上的时候，是绿色*/
+a:hover{
+    color:green;
+}
+/*鼠标点击链接，但是不松手的时候，是黑色*/
+a:active{
+    color:black;
+}
+```
\ No newline at end of file
