diff --git "a/\345\210\230\346\254\242/20240904--\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240904--\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..987b843d9462e364733a0c91c2212ef6c4f87b86
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240904--\347\254\224\350\256\260.md"
@@ -0,0 +1,38 @@
+ # 笔记
+## git流程图
+
+![图片](./imgs/流程图.jpg)
+
+## .md代码
+*斜体*
+**粗体**
+***斜粗体***
+
+> 我是一段引用
+
+`dom` 标签，这个`dom`标签是指`font`
+
+如下代码
+```js
+console.log('xxx')
+```
+
+有序列表
+1. 列表
+    1. 列表
+    1. 列表
+    1. 列表
+2. 列表
+3. 列表
+4. 列表
+
+无序列表
++ 列表
+    - 列表
+    - 列表
++ 列表
++ 列表
+
+| 左对齐 | 居中 | 右对齐 |
+|:- | :-: | -: |
+| 表格1 |表格2|表格3|
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240909--\346\265\217\350\247\210\345\231\250\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240909--\346\265\217\350\247\210\345\231\250\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e8ac7b1c5a5fd9f5eaf7ba8d4b1077237097b46e
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240909--\346\265\217\350\247\210\345\231\250\347\254\224\350\256\260.md"
@@ -0,0 +1,58 @@
+# 浏览器
+
+## 中国浏览器市场排行榜
+1. 在所有平台
+
+|浏览器名称|市场份额|
+|:-|-:|
+|Chrome|65%|
+|苹果 Safari|18.57%|
+|微软 Edge|5.01%|
+|Firefox |2.79%|
+|intemet|2.65%|
+
+
+2. 在国内市场
+
+|浏览器名称|市场份额|
+|:-|-:|
+|Chrome|46.92%|
+|苹果 Safari|14.51%|
+|微软 Edge|10.28%|
+|QQ浏览器 |7.88%|
+|360安全浏览器|2.65%|
+|UC浏览器|7.64%|
+
+3. 在桌面平台
+
+|浏览器名称|市场份额|
+|:-|-:|
+|Chrome|65.77%|
+|微软 Edge|12.7%|
+|苹果 Safari|8.63%|
+|Firefox |6.61%|
+|Opera|3.16%|
+
+# GIT 指令
+git remote -v
+     *该用于显示当前仓库中已经配置的远程仓库的简写名称和对应的URL。
+    (可以用于查看仓库的信息->创建人是谁以及仓库名)
+
+# HTML的专有名词
+```
+网页 ：由各种标记组成的一个页面就叫网页。
+
+主页(首页) : 一个网站的起始页面或者导航页面。
+
+标记： 比如<p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
+
+元素：比如<p>内容</p>称为元素，也叫dom元素，也叫节点.
+
+属性：给每一个标签所做的辅助信息。
+
+XHTML：符合XML语法标准的HTML。
+
+DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
+
+HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240911--\345\210\235\345\247\213HTML\347\254\224\350\256\260.MD" "b/\345\210\230\346\254\242/20240911--\345\210\235\345\247\213HTML\347\254\224\350\256\260.MD"
new file mode 100644
index 0000000000000000000000000000000000000000..25180562a660226431ee05945f263bd218d70bfb
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240911--\345\210\235\345\247\213HTML\347\254\224\350\256\260.MD"
@@ -0,0 +1,76 @@
+# 初识HTML
+
+## HTML的概述
+HTML全称HyperText Markup Language，译为<font color=#0000ff>**超文本标记语言**</font>。
+> 图片、音频、视频、动画、多媒体等内容，成为超文本
+> 从一个文件跳转到另一个文件，与世界各地主机的文件进行连接，即超链接
+## HTML的专有名词
++ 网页：由各种标签组成一个页面
++ 主页：一个网站的起始页
++ 标记： 比如`<p>`称为开始标记 ，`</p>`称为结束标记，也叫标签
++ 元素：比如`<p>内容</p>`称为元素，也叫dom元素
++ 属性：给每个标签所做的辅助信息
++ XHTML：符合规范的HTML
++ DHTML：动态的页面，`js + css + html ` 
+## HTML结构详解
+|标签名|定义|
+|:-|:-|
+|`<html></html>`|HTML标签，根标签|
+|`<head></head>`|头部，head标签中必须要设置title|
+|`<title></title>`|标题|
+| `<body></body>`|文档主体|
+
+## HTML骨架
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
+
+```
+
+
+## 文字居中练习
+### 效果图
+![文字居中](./imgs/文字居中.png)
+
+### 代码
+```html
+<style>
+    h1{
+        text-align: center;
+    }
+
+    h2{
+        display: flex;
+        justify-content: center;
+    }
+
+    h3{
+        display: grid;
+        place-items: center;
+    }
+</style>
+<body>
+    <h1 class="h1">静月光</h1>
+    <div class="h2">
+        <h2 >李白</h2>
+    </div>
+    <div class="h3">
+        <h3>床前明月光</h3>
+    </div>
+    <h3><center>疑是地上霜</center></h3>
+    <h3>举头望明月</h3>
+    <hr color="red" size="6"></hr>
+    <h3>低头思故乡</h3>
+</body>
+```
+
diff --git "a/\345\210\230\346\254\242/20240913--\346\216\222\347\211\210\345\222\214\350\266\205\351\223\276\346\216\245.md" "b/\345\210\230\346\254\242/20240913--\346\216\222\347\211\210\345\222\214\350\266\205\351\223\276\346\216\245.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5504e587038dfffdf9ac2bbac0ce6d6cc9ad4d36
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240913--\346\216\222\347\211\210\345\222\214\350\266\205\351\223\276\346\216\245.md"
@@ -0,0 +1,193 @@
+# 排版标签
+
+## 标题标签
+标题使用`<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`：在顶级窗口中显示
+
+
+
+
+## 图片居中练习
+### 效果图
+![图片居中](./imgs/图片居中.png)
+
+### 代码
+```HTML
+ <style>
+        body{
+            margin-top: 300px;
+            margin-left: 816px;
+        }
+        img{
+            width: 300px;
+        }
+    </style>
+</head>
+<body>
+    <img src="./merged.gif" alt="">
+</body>
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240914--\350\241\250\346\240\274.md" "b/\345\210\230\346\254\242/20240914--\350\241\250\346\240\274.md"
new file mode 100644
index 0000000000000000000000000000000000000000..719c2552f89e1ba556539a1a459e65fd78710098
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240914--\350\241\250\346\240\274.md"
@@ -0,0 +1,67 @@
+# 苹果导航栏练习
+## 效果图
+![苹果导航栏](./imgs/苹果导航栏.png)
+
+## 代码
+```html
+ <style>
+        ul{
+            height: 43px;
+            list-style-type: none;
+            margin:0px -8px;
+            padding-left: 410px;
+            background-color: rgb(4, 4, 26);
+          
+            
+        }
+
+        li{
+            float: left;
+           color: aliceblue;
+           padding: 0px 22px;
+            font-size: 16px;
+            height: 43px;
+            display: flex;
+            align-items: center; 
+            justify-content: center;
+        }
+      
+    </style>
+</head>
+<body>
+    <ul>
+        <li class="svg-circle">
+            <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg"> 
+                <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" fill="#fff">
+                </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">
+                <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" fill="#fff">
+                </path>
+            </svg>
+        </li>
+        <li>
+            <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
+                <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" fill="#fff">
+                </path>
+            </svg>
+        </li>
+    </ul>
+</body>
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240918--\350\241\250\345\215\225.md" "b/\345\210\230\346\254\242/20240918--\350\241\250\345\215\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e160bf1f4f7a11b84147b96555069b1eb3dae7a0
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240918--\350\241\250\345\215\225.md"
@@ -0,0 +1,133 @@
+#  **表单标签**
+
+表单标签用`<form>`表示，用于与服务器交互，收集用户信息
+
+## **`<input>`：输入标签**
+
+```html
+<input type="text" />
+```
+**属性：**
+
++ type="属性值":文本类型
+    - text
+    - password 密码类型
+    - radio 单选按钮
+    - checkbo 多选按钮
+    - hidden 隐藏框
+    - button 普通按钮
+    - submit 提交按钮
+    - reset 重置按钮
+    - image 图片按钮
+    - file 文件选择框
++ value="内容" ：文本框里的默认内容
++ size="50"：表示文本框内可以显示五十个字符
++ readonly 文本框只读，不能编辑
++ disabled 文本框只读，不能编辑
+
+# table 练习
+## 效果图
+![图片](./imgs/table.png)
+
+## 代码
+```html
+<style>
+        /* 设置表格的基本样式 */
+        table {
+          width: 100%;
+          border-collapse: collapse;
+        }
+        th, td {
+          border: 1px solid #ddd;
+          padding: 8px;
+          text-align: left;
+        }
+      
+        /* 设置鼠标悬停时的样式 */
+        /* td:hover {
+          background-color: #f5f5f5;
+          color: #333;
+        } */
+        tr:hover td {
+             background-color: #f5f5f5;
+            color: #333;
+        }
+      </style>
+</head>
+<body>
+    <table>
+        <tr>
+          <th> 1</th>
+          <th> 2</th>
+          <th> 3</th>
+        </tr>
+        <tr>
+          <td>Row </td>
+          <td>Row </td>
+          <td>Row</td>
+        </tr>
+        <tr>
+          <td>Row </td>
+          <td>Row </td>
+          <td>Row </td>
+        </tr>
+        
+      </table>
+</body>
+```
+
+# 按钮练习
+## 效果图
+![图片](./imgs/按钮.png)
+
+## 代码
+```html
+ <style>
+        input{
+            border-radius: 10px;
+            width: 100px;
+            height: 50px;
+        }
+        .primary{
+            background-color: blue;
+            border: 2px solid blue;
+            color: aliceblue;
+        }
+        .default{
+            border: 2px solid #808080;
+            background-color: #fff;
+            color: black;
+        }
+        .dashed{
+            border: 2px dashed #808080;
+            background-color: #fff;
+            color: black;
+        }
+        .danger{
+            border: 2px solid red;
+            background-color: #fff;
+            color: red;
+        }
+        .link{
+            border: none;
+            background-color: #fff;
+            color: blue;
+        }
+    </style>
+</head>
+<body>
+    <form action="">
+        <table>
+            <tr>
+                <td>
+                    <input type="button" value="按钮" class="primary">
+                    <input type="button" value="按钮" class="default">
+                    <input type="button" value="按钮" class="dashed">
+                    <input type="button" value="按钮" class="danger">
+                    <input type="button" value="按钮" class="link">
+                </td>
+            </tr>
+        </table>
+    </form>
+</body>
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240920--H5\346\246\202\345\277\265\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240920--H5\346\246\202\345\277\265\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3184d4c74eaa5decf351d6e806f15ac7859c7edb
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240920--H5\346\246\202\345\277\265\347\254\224\350\256\260.md"
@@ -0,0 +1,182 @@
+# HTML5
+
+HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它**制定了Web应用开发的一系列标准**，成为第一个将Web做为应用开发平台的HTML语言。
+
+**`HTML5`的广义概念**：H5包括HTML5、CSS3、Javascript API在内的一套技术组合。
+
+`HTML5`不等于 `HTML next version`。`HTML5` 包含： `HTML`的升级版、`CSS`的升级版、`JavaScript API`的升级版。
+
+### HTML5 的应用场景
+
+列举几个HTML5 的应用场景：
+
+（1）极具表现力的网页：内容简约而不简单。
+
+（2）网页应用程序：
+
+- 代替PC端的软件：iCloud、百度脑图、Office 365等。
+
+- APP端的网页：淘宝、京东、美团等。
+
+- 微信端：公众号、小程序等。
+
+（3）混合式本地应用。
+
+（4）简单的游戏。
+
+## 语义化的标签
+
+### 语义化的作用
+
+语义标签对于我们并不陌生，如`<p>`表示一个段落、`<ul>`表示一个无序列表。**标签语义化的作用：**
+
+- 能够便于开发者阅读和写出更优雅的代码。
+
+- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
+
+- 更好地搜索引擎优化。
+
+总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。
+
+## H5中新增的语义标签
+
+- `<section>` 表示区块
+
+- `<article>` 表示文章。如文章、评论、帖子、博客
+
+- `<header>` 表示页眉
+
+- `<footer>` 表示页脚
+
+- `<nav>` 表示导航
+
+- `<aside>` 表示侧边栏。如文章的侧栏
+
+- `<figure>` 表示媒介内容分组。
+
+- `<mark>` 表示标记 (用得少)
+
+- `<progress>` 表示进度 (用得少)
+
+- `<time>` 表示日期
+
+
+
+# 登录页面练习
+## 效果图
+![alt text](./imgs/登录页面效果图.png)
+
+## 代码
+```html
+<style>
+      body{
+        /* background: rgb(195, 215, 228); */
+        background: radial-gradient(circle,rgb(240, 241, 242), rgb(66, 167, 234));
+      }
+       img{
+        width: 300px;
+        height: 400px;
+        border-radius: 10px;
+       }
+       #rigth{
+        float: left;
+        margin-top: 124px;
+        margin-left: 385px;
+        border-radius: 10px;
+       }
+       #left{
+        width: 300px;
+        height: 400px;
+        float: left;
+        margin-top: 124px;
+       background:rgb( 171,202,222);
+       border-radius: 10px;
+       }
+      #h1{
+        height: 120px;
+        margin-top: 43px;
+      }
+      
+      input{
+        width: 185px;
+        height: 26px;
+        border: none;
+        border-bottom: 1px solid rgb(165, 160, 160);
+        margin-left: 60px;
+        border-radius: 10px;
+      }
+      #username{
+        width: 200px;
+        height: 60px;
+        
+      }
+      #btn{
+        margin-top: 40px;
+        margin-left: 105px;
+      }
+      button{
+        width: 87px;
+        border-radius: 10px;
+        background-color: rgb(249, 252, 252);
+        border: none;
+      }
+    </style>
+</head>
+<body>
+    <div id="total">
+      <div id="rigth">
+        <img src="./imgs/登录图片.jpg" alt="">
+      </div>
+      <div id="left">
+        <div id="h1"><h1 align="center">欢迎登录</h1></div>
+        <div id="username"><input type="text" placeholder="用户名"></div>
+        <div id="pwd"><input type="password" placeholder="密码"></div>
+        <div id="btn"><button>登录</button></div>
+      </div>
+    </div>
+</body>
+```
+
+# 跑马灯练习
+## 效果图
+![alt text](./imgs/跑马灯效果图.gif)
+
+## 代码
+```html
+<style>
+  /* 跑马灯容器样式 */
+  .marquee {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+    background-color: #f0f0f0;
+    color: #333;
+    padding: 10px 0;
+    position: relative;
+  }
+
+  /* 跑马灯内容样式 */
+  .marquee-content {
+    display: inline-block;
+    will-change: transform;
+    animation: scroll 10s linear infinite;
+  }
+
+  /* 跑马灯动画 */
+  @keyframes scroll {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+  }
+</style>
+</head>
+<body>
+
+<div class="marquee">
+  <div class="marquee-content">
+    欢迎来到我的网站！这里有最新的新闻和更新。请继续关注我们的最新动态。
+  </div>
+</div>
+
+</body>
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240923-\346\213\226\346\213\275\343\200\201\347\233\256\346\240\207\345\205\203\347\264\240\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240923-\346\213\226\346\213\275\343\200\201\347\233\256\346\240\207\345\205\203\347\264\240\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c78d1f088c4378a433a7cc76f254ee0401847e2f
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240923-\346\213\226\346\213\275\343\200\201\347\233\256\346\240\207\345\205\203\347\264\240\347\254\224\350\256\260.md"
@@ -0,0 +1,218 @@
+# HTML5详解（二）
+
+## 拖拽
+
+### 拖拽元素
+`draggable="true"`属性
+
+举例：
+```html
+<style>
+    .box1{
+        width: 200px;
+        height: 200px;
+        background-color: green;
+    }
+</style>
+<body>
+    <div class= "box1" draggable="true"></div>
+</body>
+```
+**拖拽元素的事件监听**：
+- `ondragstart`当拖拽开始时调用
+
+- `ondragleave`	当**鼠标离开拖拽元素时**调用
+
+- `ondragend`	当拖拽结束时调用
+
+- `ondrag` 		整个拖拽过程都会调用
+
+
+代码演示：
+```html
+ <style>
+        .box {
+            width: 200px;
+            height: 200px;
+            background-color: green;
+        }
+    </style>
+    <div class="box" draggable="true"></div>
+
+<script>
+    var box = document.querySelector('.box');
+
+    //  绑定拖拽事件
+
+    //  拖拽开始
+    box.ondragstart = function () {
+        console.log('拖拽开始.');
+    }
+
+    //  拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
+    box.ondragleave = function () {
+        console.log('拖拽离开..');
+    }
+
+    //  拖拽结束
+    box.ondragend = function () {
+        console.log('拖拽结束...');
+        console.log("---------------");
+    }
+
+    box.ondrag = function () {
+        console.log('拖拽');
+    }
+
+</script>
+```
+
+### 目标元素
+
+**目标元素的事件监听**：
+- `ondraggenter` 当拖拽元素进入时调用
+
+- `ondragover`  当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是否移动）
+
+- `ondrop`   当在目标元素上松开鼠标时调用
+
+- `ondragleave` 当鼠标离开目标元素时调用
+
+代码演示：
+```html
+  <style>
+        .one {
+            width: 100px;
+            height: 100px;
+            border: 1px solid #000;
+            background-color: green;
+        }
+
+        .two {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            left: 300px;
+            top: 100px;
+            border: 1px solid #000;
+            background-color: red;
+        }
+    </style>
+<body>
+<div class="one" draggable="true"></div>
+<div class="two"></div>
+
+<script>
+    var two = document.querySelector('.two');
+
+    //目标元素的拖拽事件
+
+    // 当被拖拽元素进入时触发
+    two.ondragenter = function () {
+        console.log("来了.");
+    }
+
+    // 当被拖拽元素离开时触发
+    two.ondragleave = function () {
+
+        console.log("走了..");
+    }
+
+    // 当拖拽元素在 目标元素上时，连续触发
+    two.ondragover = function (e) {
+        //阻止拖拽事件的默认行为
+        e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
+
+        console.log("over...");
+    }
+
+    // 当在目标元素上松开鼠标是触发
+    two.ondrop = function () {
+        console.log("松开鼠标了....");
+    }
+</script>
+</body>
+```
+
+## 历史状态
+
+`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
+
+- window.history.forward(); // 前进
+
+- window.history.back(); // 后退
+
+- window.history.go(); // 刷新
+
+- window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
+
+- 通过JS可以加入一个访问状态
+
+- history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
+
+## 地理定位
+### 三维坐标
+（1）**GPS**（Global Positioning System，全球定位系统）。
+
+目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：
+
+- 1.美国 Global Positioning System （全球定位系统） 简称GPS；
+
+- 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
+
+- 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；
+
+- 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
+
+- 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；
+
+- 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。
+
+以上6个系统中国都能使用。
+
+（2）**Wi-Fi**定位：仅限于室内。
+
+（3）**手机信号**定位：通过运营商的信号塔定位。
+
+### API
+- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
+
+- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
+
+
+1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
+
+- position.coords.latitude纬度
+
+- position.coords.longitude经度
+
+
+2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
+
+
+3、可选参数 options 对象可以调整位置信息数据收集方式
+
+
+
+# CSS属性：字体和文本
+## CSS的单位
+### 绝对单位
+
+1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`
+
+- `in`：英寸Inches (1 英寸 = 2.54 厘米)
+- `cm`：厘米Centimeters
+- `mm`：毫米Millimeters
+- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
+- `pc`：皮卡Picas (1 皮卡 = 12 点)
+
+### 相对单位
+`px`：像素
+`em`：印刷单位相当于12个点
+`%`：百分比，相对周围的文字的大小
+
+## font 字体属性
+### 行高
+```html
+	line-height:24px;
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240925--CSS\345\237\272\347\241\200\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240925--CSS\345\237\272\347\241\200\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b1d062233e9160fa8b50b98d668ce32ee4f138eb
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240925--CSS\345\237\272\347\241\200\347\254\224\350\256\260.md"
@@ -0,0 +1,333 @@
+# CSS属性
+## 字体属性
+为了严格保证字在行里面居中，我们有个约定：**行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除
+
+> 小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。
+
+> 如果还想让多行文本垂直居中，则需要计算盒子的padding，计算如下：
+
+
+![](http://img.smyhvae.com/20170808_2240.png)
+
+
+### `verticl-align: middle;` 属性
+
+`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
+
+代码举例：
+
+```css
+vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
+```
+
+### 字号、行高、字体三大属性
+（1）字号：
+
+```
+	font-size:14px;
+```
+
+（2）行高：
+
+```
+	line-height:24px;
+```
+
+（3）字体：（font-family就是“字体”，family是“家庭”的意思）
+
+```
+	font-family:"宋体";
+```
+
+是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）
+
+格式：
+
+```
+	font: 加粗 字号/行高/ 字体
+
+```
+
+举例：
+
+```
+	font: 400 14px/24px "宋体";
+```
+
+PS：400是nomal，700是bold。
+
+font属性连写至少要有**字号和字体**，否则连写是不生效的
+
+### 字体属性的说明
+
+（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，如果用户的Windows电脑里面没有这个字体，那么就会变成宋体。
+
+（2）为了防止用户电脑里，没有微软雅黑这个字体，就要用英语的逗号，提供备选字体
+```
+    font-family: "微软雅黑"，"宋体";
+```
+
+（3）须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
+```
+	font-family: "Times New Roman","微软雅黑","宋体";
+```
+
+(错误写法):
+
+```
+	font-family: "微软雅黑","Times New Roman","宋体";
+```
+
+上方代码会导致，中文和英文都会采用微软雅黑字体。
+
+（4）所有的中文字体，都有英语别名
+微软雅黑的英语别名：
+```
+    font-family: "Microsoft YaHei";
+```
+宋体的英语别名：
+```
+    font-family: "SimSun";
+```
+
+字号、行高、字体三个属性合二为一：
+```
+    font: 12px/30px  "Times New Roman","Microsoft YaHei","SimSun";
+```
+
+（5）行高也可以用百分比，表示字号的百分之多少
+一般来说，百分比都是大于100%的，因为行高一定要大于字号。
+
+`font: 12px/200% "宋体"` 等价于`font: 12px/24px "宋体"`
+
+
+# 字体练习
+## 效果图
+![alt text](./imgs/图片1.png)
+
+## 代码
+```html
+<style>
+    .p1{
+        font-size: 60px;
+        line-height: 80px;
+        font-family: "隶书";
+    }
+    .p2{
+        font: 400 30px/200% "myFont"
+    }
+    @font-face{
+        font-family: "myFont";
+        src: url(./STCAIYUN.TTF);
+    }
+</style>
+<body>
+   <p class="p1">字号、行高、字体三大属性</p>
+   <p class="p2">字号、行高、字体三大属性</p>
+</body>
+```
+
+# 博客园导航栏
+## 效果图
+![alt text](./imgs/博客园.png)
+
+## 代码
+```html
+<style>
+    ul{
+        list-style: none;
+    }
+    ul li{
+        float: left;
+        margin-left: 50px;
+        color: #696767;
+    }
+</style>
+<body>
+   <ul>
+    <li>首页</li>
+    <li>新闻</li>
+    <li>博问</li>
+    <li>会员</li>
+    <li>闪存</li>
+    <li>班级</li>
+   </ul>
+</body>
+```
+
+# 百度练习
+## 效果图
+![alt text](<./imgs/百度.png>)
+
+## 代码
+```html
+<style>
+    h3{
+        font-size: 20px;
+        font-weight: bolder;
+    }
+  ul{
+    list-style: none;
+    
+  }
+  ul li a {
+    text-decoration: none;
+    color: black;
+  }
+  span{
+    margin-right: 10px;
+    font-size: 15px;
+  }
+  .col1{
+    color: red;
+  }
+  .col2{
+    color: chocolate;
+  }
+  .col3{
+    color: burlywood;
+  }
+
+</style>
+<body>
+    <div class="news">
+        <h3 >百度新闻热榜</h3>
+        <ul>
+            <li><a href=""><span class="col1">1</span>神州杭州致辞中的“知识点”</a></li>
+            <li><a href=""><span class="col2">2</span>韩国运动员扇对手脸被罚出场</a></li>
+            <li><a href=""><span class="col3">3</span>张国伟在亚运会场馆外摊煎饼</a></li>
+            <li><a href=""><span class="col4">4</span>四海同赴亚运之约</a></li>
+            <li><a href=""><span class="col5">5</span>杭州亚运会首个双冠王诞生</a></li>
+            <li><a href=""><span class="col6">6</span>贪官曾在歌舞厅打架子鼓补贴家用</a></li>
+            <li><a href=""><span class="col7">7</span>49岁张震岳举行婚礼</a></li>
+            <li><a href=""><span class="col8">8</span>开幕式唱歌的四个帅哥是谁</a></li>
+        </ul>
+    </div>
+    
+</body>
+```
+
+# 文本样式综合设计
+## 效果图
+![alt text](./imgs/高亮显示文本.gif)
+
+## 代码
+```html
+.highlight {
+        color: gold;
+        background-color: black;
+        text-transform: uppercase;/*文本转换为大写*/
+        text-indent: 20px;/*首行缩进*/
+    }
+
+.highlight:hover {
+  color: aliceblue;
+  background-color: dimgrey;
+}
+```
+
+# 文本排版
+## 效果图
+![alt text](./imgs/首字母大写.png)
+
+## 代码
+```html
+.article p {
+  color: dimgrey;
+  font-size: 16px;
+  line-height: 1.5;
+  text-indent: 1em;
+}
+
+.article p:first-letter {
+  font-size: 24px;
+  font-weight: bold;
+}
+```
+# 文本对齐
+## 效果图
+![alt text](./imgs/诗.png)
+
+## 代码
+```
+.poem {
+  text-align: justify;/*文本对齐方式为两端对齐*/
+  color: blue;
+  text-transform: capitalize;/*每个单词的首字母大写*/
+}
+
+.poem::first-line {
+  color: crimson;
+}
+```
+
+# 文本样式响应式设计
+## 效果图
+![alt text](./imgs/600-900.png)
+
+## 代码
+```
+.news {
+  font-size: 16px;
+  line-height: 1.4;
+}
+@media screen and (max-width: 599px) {
+    .news {
+        font-size: 14px;
+        line-height: 1.2;
+    }
+}
+@media screen and (min-width: 600px) and (max-width: 900px) {
+    .news {
+        font-size: 16px;
+        line-height: 1.4;
+    }
+}
+@media screen and (min-width: 901px) {
+    .news {
+        font-size: 18px;
+        line-height: 1.6;
+    }
+}
+```
+
+# 引用文本
+## 效果图
+![alt text](./imgs/引用文本.png)
+
+## 代码
+```
+.quote {
+  color: dimgray;
+  font-style: italic;
+  text-indent: 20px;
+}
+
+.quote::before {
+  content: "“";
+}
+
+.quote::after {
+    content: "”";
+}
+```
+
+# 文本样式与动画
+## 效果图
+![alt text](./imgs/动画文本.gif)
+
+## 代码
+```
+@keyframes flash {
+  0%, 100% {
+    color: red;
+  }
+  50% {
+    color: yellow;
+  }
+}
+
+.flashing {
+  animation: flash 2s infinite; /*动画闪烁，持续2秒*/
+}
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240929--overflow\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240929--overflow\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2f4cdae4706bd67c300005e0f0a93f2b6663dbb0
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240929--overflow\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247\347\254\224\350\256\260.md"
@@ -0,0 +1,187 @@
+## overflow属性：超出范围的内容要怎么处理
+`overflow`属性的属性值可以是：
+    + `visible`：默认值，全部显示出来
+    + `hidden`：不显示超过对象尺寸的内容
+    + `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条
+    + `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。
+
+## 鼠标的属性cursor
+鼠标的属性`cursor`有以下几个属性值：
+
+ - `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
+ - `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
+ - `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
+
+
+
+# CSS属性：背景属性
+
+常见的背景属性
+- `background-color:#ff99ff;`  设置元素的背景颜色。
+
+- `background-image:url(images/2.gif);` 将图像设置为背景。
+
+-  `background-repeat: no-repeat;`  设置背景图片是否重复及如何重复，默认平铺满。（重要）
+	- `no-repeat`不要平铺；
+	- `repeat-x`横向平铺；
+	- `repeat-y`纵向平铺。
+
+- `background-position:center top;` 设置背景图片在当前容器中的位置。
+
+- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
+属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。
+
+- 另外还有一个综合属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
+
+**CSS3** 中，新增了一些background属性：
+
+- background-origin
+
+- background-clip 背景裁切
+
+- background-size 调整尺寸
+
+- 多重背景
+
+
+## background-color：背景颜色的表示方法
+### **用英语单词表示**
+
+### **RGB表示法**
+    RGB 表示三原色“红”red、“绿”green、“蓝”blue
+
+### **RGBA表示法**
+    RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度
+
+### **十六进制表示法**
+    所有用`#`开头的色值都是16进制的
+
+### **HSLA表示法**
+解释：
+ - `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
+
+- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
+
+- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
+
+- `A` 透明度，取值范围 0~1。
+
+
+**关于设置透明度的其他方式：**
+（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
+
+（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
+
+## `background-repeat`属性
+
+`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
+
+- `no-repeat`（不要平铺）
+- `repeat-x`（横向平铺）
+- `repeat-y`（纵向平铺）
+
+
+## `background-position`属性
+
+`background-position`属性指的是**背景定位**属性。
+
+**1、用像素值描述属性值：**
+
+格式如下：
+
+```
+	background-position:向右偏移量 向下偏移量;
+```
+
+属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
+
+**2、用单词描述属性值：**
+
+格式如下：
+
+```
+	background-position: 描述左右的词 描述上下的词;
+```
+
+- 描述左右的词：left、center、right
+- 描述上下的词：top 、center、bottom
+
+比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
+
+比如说，`bottom`表示图片的底边和父亲**底边贴齐**（好好理解）。
+
+
+
+## background-attachment 属性
+
+- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
+	- `fixed`（背景就会被固定住，不会被滚动条滚走）。
+	- `scroll`（与fixed属性相反，默认属性）
+
+# 背景属性练习
+## 背景颜色效果图
+![图片](./imgs/背景颜色图片.png)
+
+## 代码
+```
+ .box{
+        width: 400px;
+        height: 400px;
+        background-color: #091efc;
+      }
+     
+```
+
+## 背景图片效果图
+![图片](./imgs/背景图片效果图.png)
+
+## 代码
+```html
+<style>
+ .image-background{
+        width: 500px;
+        height: 400px;
+        background-image: url(./imgs/背景图片.jpg);/*背景图片*/
+        background-size: cover;/*覆盖*/
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+</style>
+```
+
+# 背景位置练习
+## 效果图
+![图片](./imgs/背景位置效果图.png)
+
+## 代码
+```html
+ <style>
+     .header{
+      background-image: url('./imgs/右下角图片素材.jpg');
+      background-repeat: no-repeat;
+      background-size: 300px 200px;
+      background-position: right bottom;
+      width: 700px; 
+      height: 600px; 
+     }
+      </style>
+```
+
+# 背景重复练习
+## 效果图
+![图片](./imgs/背景图片重复效果图.png)
+
+## 代码
+```html
+<style>
+     .pattern{
+      background-image: url('./imgs/右下角图片素材.jpg');
+      background-repeat: repeat-y;
+      background-position: center top;
+      background-size: 300px 200px;
+      background-position: right bottom;
+      width: 700px; 
+      height: 600px; 
+     }
+</style>
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20240930--background\347\273\274\345\220\210\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20240930--background\347\273\274\345\220\210\345\261\236\346\200\247\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1fa1ab92c6d644bfb6fc8fe3e584ca45c76b69a0
--- /dev/null
+++ "b/\345\210\230\346\254\242/20240930--background\347\273\274\345\220\210\345\261\236\346\200\247\347\254\224\350\256\260.md"
@@ -0,0 +1,134 @@
+# 背景属性
+## background 综合属性
+```css
+    background: red url(1.jpg) no-repeat 100px 100px fixed;
+```
+等价于：
+```css
+    background-color:red;
+    background-imge:url(1.jpg);
+    background-repeat:no-repeat;
+    background-position:100px 100px;
+    background-attachment:fixed;
+```
+
+## background-size属性： 背景尺寸
+格式举例：
+```css
+/*宽高的具体数值*/
+background-size:500px 500px;
+
+/**宽高的百分比（相对于容器的大小） */
+background-size:50% 50%; /* 如果两个属性值相同，可以简写成：background-size：50%*/
+
+background-size:100% auto;
+
+/**cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏 */
+background-size: cover;
+
+/**contain: 将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白 */
+background-size: contain;
+```
+这里我们对属性值 cover 和 contain 进行再次强调：
+
++ `cover`：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。
+
++ `contain`：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白。
+
+## 背景原点：background-origin 属性
+格式举例：
+```css
+/**从padding-box 内边距开始显示背景图 */
+background-origin: padding-box;   /**默认值 */
+
+/**从border-box 边框开始显示背景图 */
+background-origin: border-box;
+
+/**从content-box 内容区域开始显示背景图 */
+background-origin：content-box;
+```
+
+## background-clip 属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面
+
+格式举例：
+
++ `background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是：
+
++ `border-box`: 超出 `border-box` 的部分，将裁剪掉
+
++ `padding-box`: 超出 `padding-box` 的部分，将裁剪掉
+
++ `content-box`: 超出 `content-box` 的部分，将裁剪掉
+
+## 渐变：background-image
+渐变分为：
++ 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+
++ 径向渐变：从一个中心点开始沿着四周产生渐变效果。
+
++ 重复渐变
+
+### 线性渐变
+格式：
+```css
+background-image: linear-gradient(方向，起始颜色，终止颜色);
+```
+> 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`(指的是顺时针方向30deg)
+
+
+# line-height专项练习
+## 效果图
+![图片](./imgs/line-heightz专项练习效果图.png)
+
+## 代码
+```css
+  .d1 {
+    background: #06af47;
+    margin: 50px 10px;
+    line-height: 0;
+  }
+```
+
+# 线性渐变练习
+## 效果图1
+![图片](./imgs/渐变效果图1.png)
+
+## 代码1
+```css
+ div {
+            width: 900px;
+            height: 200px;
+            background-image: linear-gradient( 45deg,
+               yellow 0%,
+               yellow 25%,
+               blue 25%,
+               blue 50%,
+               red 50%,
+               red 75%,
+               green 75%,
+               green 100%);
+        }
+```
+
+## 效果图2
+![图片](./imgs/渐变效果图2.png)
+
+## 代码2
+```css
+ body{
+    background-color: yellow;
+    }
+        div {
+            width: 900px;
+            height: 200px;
+            background-image: linear-gradient( to right,
+               black 0%,
+               black 25%,
+               #ffff 25%,
+               #ffff 50%,
+               black 50%,
+               black 75%,
+               #ffff 75%,
+               #ffff 100%);
+        }
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20241009--\345\276\204\345\220\221\346\270\220\345\217\230\345\222\214CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" "b/\345\210\230\346\254\242/20241009--\345\276\204\345\220\221\346\270\220\345\217\230\345\222\214CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..df24cd9150d3ff6bdbd3f3c93c2163083146736e
--- /dev/null
+++ "b/\345\210\230\346\254\242/20241009--\345\276\204\345\220\221\346\270\220\345\217\230\345\222\214CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,81 @@
+# 径向渐变
+围绕中心点做渐变
+格式：
+```css
+background-imge: radial-gradient(辐射的半径大小，中心的位置，起始颜色，终止颜色)；
+background-imge: radial-gradient(100px at center,yellow,green);
+```
+> `at left top` 中心点在左上角
+
+重复线性渐变
+```css
+repeating-linear-gradient()
+```
+
+# CSS样式表和选择器
+
+## **CSS的四种基本选择器**
+分为两大类：基本选择器和扩展选择器
+
+**基本选择器：**
++ 标签选择器：针对一类标签
++ ID选择器：针对某一个特定的标签使用
++ 类选择器：针对你想要的所有标签使用
++ 通用选择器（通配符）：针对所有的标签都适用（不建议适用）
+
+### 标签选择器：选择器的名字代表HTML页面上的标签
+（1） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input
+（2） 无论这个标签藏得多深，一定能够被选上
+（3） 选择的所有，而不是一个
+
+### ID选择器：规定用 `#`来定义
+针对某一个特定的标签来使用，只能使用一次
+（1） 只能是字母、数字、下划线
+（2） 必须以字母开头
+（3） 不能和标签同名
+（4） HTML页面中，不能出现相同的id
+（5） 一个标签可以被多个css选择器选择
+
+### 类选择器：规定用圆点`.`来定义
+针对你想要的所有标签来使用。优点：灵活
+（1） 不要试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式
+（2） 每个类要尽可能小，有“公共”的概念，能够让更多的标签使用
+
+# 作业
+## 效果图
+![重复线性渐变](./imgs/重复线性渐变.png)
+
+## 代码
+```html
+<style>
+        .container {
+            width: 400px;
+            height: 500px;
+            position: relative;
+            border: 1px solid #000;
+        }
+
+        .overlap {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+
+        .d1 {
+            background-image: repeating-linear-gradient(pink 0px, pink 50px, white 50px, white 100px);
+            opacity: 0.6;
+        }
+
+        .d2 {
+            background-image: repeating-linear-gradient(90deg, pink 0px, pink 50px, white 50px, white 100px);
+            opacity: 0.5;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="overlap d1"></div>
+        <div class="overlap d2"></div>
+    </div>
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20241011--\344\274\252\347\261\273\347\254\224\350\256\260.md" "b/\345\210\230\346\254\242/20241011--\344\274\252\347\261\273\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8641be3a073c655e04a093bc522a4976dd0c89b1
--- /dev/null
+++ "b/\345\210\230\346\254\242/20241011--\344\274\252\347\261\273\347\254\224\350\256\260.md"
@@ -0,0 +1,70 @@
+# 子代选择器，用符号`>`表示
+```css
+div > p {
+    color: red;
+}
+```
+能够选择：
+```html
+<div>
+    <p>我是div的儿子</p>
+</div>
+```
+
+# 序选择器
+设置无序列表`<ul>`中的第一个`<li>`为红色：
+```html
+<style type="text/css">
+    ul li:first-child {
+        color: red;
+    }
+</style>
+```
+设置无序列表`<ul>`中的最后一个`<li>`为红色：
+```css
+ul li:last-child {
+    color: blue;
+}
+```
+
+# 伪类选择器
+**伪类：** 同一个标签，根据不同的状态，有不同的样式<br>
+伪类用冒号来表示
+
+## 静态伪类选择器
+只能用于超链接的样式
++ `:link`超链接点击前
++ `:visited`链接被访问过之后
+
+## 动态伪类选择器
+针对所有标签都使用的样式
++ `:hover`“悬停”：鼠标放到标签上的时候
++ `:active`“激活” ：鼠标点击标签，但是不松手时
++ `:focus`是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+# 超链接a标签
+## 超链接的四种状态
+a标签有4种伪类，如下：
++ `:link` “链接”：超链接点击之前
++ `:visited` “访问过的”：链接被访问过之后
++ `:hover` “悬停”：鼠标放到标签上的时候
++ `:active` “激活”： 鼠标点击标签，但是不松手时。
+
+ 四种状态必须按照固定的顺序写<br>
+> a:link、a:visited、a:hover、a:active
+
+
+# 选择器真实项目练习
+## 练习1
+### 效果图
+![图片](./imgs/选择器练习1.png)
+
+### 代码
+```css
+main > .intro h1,main > .post h2 {
+    font-weight: bolder;
+}
+.sidebar h3 {
+    font-style: italic;
+}
+```
diff --git "a/\345\210\230\346\254\242/20241012--\344\274\252\347\261\273\351\200\211\346\213\251\345\231\2502.md" "b/\345\210\230\346\254\242/20241012--\344\274\252\347\261\273\351\200\211\346\213\251\345\231\2502.md"
new file mode 100644
index 0000000000000000000000000000000000000000..da417446e03a5b14c9a7f667c98a78693b898100
--- /dev/null
+++ "b/\345\210\230\346\254\242/20241012--\344\274\252\347\261\273\351\200\211\346\213\251\345\231\2502.md"
@@ -0,0 +1,125 @@
+# 伪类
+## `:first-child`
+用于选择其父元素的第一个子元素的元素<br>
+例如：
+```html
+<style>
+p:first-child {
+    color: red;
+}
+</style>
+<body>
+<div>
+    <p>这是第一个段落。</p>
+    <p>这是第二个段落。</p>
+</div>
+</body>
+```
+
+# CSS的继承性
+有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。**
+继承性是从自己开始，直到最小的元素。
+- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
+
+- 关于盒子、定位、布局的属性，都不能继承。
+## CSS的层叠性
+### 计算权重
+**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
+
+当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
+
+-  id 选择器
+-  类选择器、属性选择器、伪类选择器
+-  标签选择器、伪元素选择器
+
+因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
+
+> 为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。**
+
+另外：**如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的**
+
+# 选择器真实项目练习
+## 练习任务2
+### 效果图
+![图片](./imgs/Username.gif)
+
+### 代码
+```css
+   input[required]:focus {
+            border-color: blue;
+        }
+
+        input[placeholder]::placeholder {
+            background: #a3a3a3;
+        }
+
+```
+
+## 练习任务3
+### 效果图
+![图片](./imgs/Home.gif)
+
+### 代码
+```css
+  nav {
+        width: 200px;
+        height: 200px;
+        background: pink;
+    }
+
+        .active:active {
+            background-color: #a3a3a3;
+        }
+
+        ul a:hover {
+            color: #ffff;
+        }
+```
+
+## 练习任务4
+### 效果图
+![图片](./imgs/首字母下沉.png)
+
+### 代码
+```css
+  .special-title::first-letter {
+            float: left;
+            font-size: 50px;
+            line-height: 1;
+            color: gold;
+            background-color: transparent;
+    }
+```
+
+
+## 练习任务5
+### 效果图
+![图片](./imgs/ul.gif)
+
+### 代码
+```css
+        .list li > ul:first-child {
+            background-color: lightgray;
+        }
+
+        .list :hover{
+            color: blue;
+        }
+
+```
+
+
+## 练习任务6
+### 效果图
+![图片](./imgs/Lable.gif)
+
+
+### 代码
+```css
+        .container input:focus{
+            border-color: green;
+        }
+        .container label:hover{
+            background-color: #63b9eb;
+        }
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20241014---\345\261\202\345\217\240\346\200\247\345\222\214\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\345\210\230\346\254\242/20241014---\345\261\202\345\217\240\346\200\247\345\222\214\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b595cdb0ed32cb1a77c469665b91bb57a013c36f
--- /dev/null
+++ "b/\345\210\230\346\254\242/20241014---\345\261\202\345\217\240\346\200\247\345\222\214\347\233\222\345\255\220\346\250\241\345\236\213.md"
@@ -0,0 +1,49 @@
+# CSS 的层叠性
+## **CSS样式表的冲突总结**
++ 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
++ 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
++ 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
+> 总结：就近原则。ID选择器优先级最大。
+
+
+这里需要补充两种冲突的情况：
+
++ 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁。
++ 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
+
+**!important标记：优先级最高**
+强调：
++ (1) !important提升的是一个属性，而不是一个选择器
++ (2) !important无法提升继承的权重，该是0还是0
++ (3) !omportant不影响就近原则
+
+> !important尽量不要用，否则会让css写的很乱
+
+
+# 盒子模型
+一个盒子中主要的属性有5个：width、height、padding、border、margin
++ width和height：内容的宽度、高度（不是盒子的宽度、高度）。
++ padding：内边距。
++ border：边框。
++ margin：外边距。
+
+标准盒子模型：
+![标准盒子模型](./imgs/标准盒子模型.png)
+
+IE盒子模型：
+![IE盒子模型](./imgs/IE盒子模型.png)
+
+
+> 注：`<body>`标签也有margin
+
+## **认识padding**
+**padding区域也有颜色**
+padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域
+
+padding有四个方向：
++ 如果写了四个值，则顺序为：上、右、下、左。
++ 如果只写了三个值，则顺序为：上、右和左、下。
++ 如果只写了两个值，则顺序为：上和下、左和右
+
+## **认识border**
+border就是边框。边框三要素：像素（粗细）、线型（实线 虚线 没有线）、颜色。
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20241016--\346\265\256\345\212\250.md" "b/\345\210\230\346\254\242/20241016--\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c6e2db91e128b9c85df18e9c5b99c60d753ec1e9
--- /dev/null
+++ "b/\345\210\230\346\254\242/20241016--\346\265\256\345\212\250.md"
@@ -0,0 +1,176 @@
+# 浮动
+## 标准文档流
++  行内元素
+    + 与其他行内元素并排
+    + 不能设置宽高，默认的宽度是文字的宽度
++  块级元素
+    + 霸占一行，不能与其他元素并列
+    + 能接受宽高，如果不设置宽高，那么默认为父亲的100%
+
+分类：<br>
+![图片](./imgs/行内元素和块级元素的分类.png)
+
+### 行内元素和块级元素的相互转换
+`display`属性
+```
+display: inline;
+```
+inline就是“行内” ，块级元素————>行内元素<br>
+block是“块” ，行内元素————>块级元素
+
+### 脱离文档流
+标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
+
+css中一共有三种手段，使一个元素脱离标准文档流：
+
++ （1）浮动
++ （2）绝对定位
++ （3）固定定位
+
+
+## 浮动的性质
+### 性质1：浮动的元素脱标
+脱标即脱离标准流<br>
+一个`div`有float，另一个没有，导致第一个`div`盒子脱离了标准流
+> 所以能够证明一件事：一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。
+
+### 性质2：浮动的元素互相贴靠
+给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果<br>
+同样，float还有一个属性值是right，这个和属性值left是对称的。
+
+### 性质3：浮动的元素有“字围”效果
+
+让div浮动，p不浮动
+
+![图片](./imgs/“字围”效果.png)
+
+总结：标准流中的文字不会被浮动的盒子遮挡住。
+
+### 性质4：收缩
+收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩
+
+## 浮动的清除
++ 方法1：给浮动元素的祖先元素加高度
+    + 如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。
++ 方法2：clear:both;
+    + clear:both的意思就是：不允许左侧和右侧有浮动对象。
++ 方法3：隔墙法
+    + 在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。
++ 方法4：overflow:hidden;
+    + overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。
+
+
+# 浮动练习
+## 效果图
+![图片](./imgs/盒子.png)
+
+## 代码
+```html
+ <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        .container{
+            width: 970px;
+            height: 590px;
+            margin: 0 auto;
+        }
+
+        .top {
+            width: 970px;
+            height: 103px;
+        }
+
+        .red {
+            float: left;
+            background-color: red;
+            width: 277px;
+            height: 103px;
+        }
+        .green1 {
+            float: right;
+            width: 137px;
+            height: 49px;
+            margin-bottom: 8px;
+            background-color: green;
+        }
+
+        .green2 {
+            float: right;
+            width: 679px;
+            height: 46px;
+            background-color: green;
+        }
+
+        .middle{
+            width: 970px;
+            height: 435px;
+            margin-top: 8px;
+        }
+        .middle .yellow{
+            float: left;
+            width: 310px;
+            height: 435px;
+            background-color: yellow;
+        }
+
+        .middle-right{
+            float: right;
+            width: 650px;
+            height: 435px;
+            margin-left: 10px;
+        }
+        .middle-right .middle-right-top{
+            float: right;
+            width: 650px;
+            height: 400px;
+        }
+        .middle-right .blue{
+            float: left;
+            width: 450px;
+            height: 400px;
+            
+        }
+        .middle .middle-right .middle-right-top .blue1{
+            float: right;
+            width: 450px;
+            height: 240px;
+            background-color: #99dff2;
+            margin-bottom: 10px;
+        }
+        .middle .middle-right .middle-right-top .blue2{
+            float: right;
+            width: 450px;
+            height: 110px;
+            margin-bottom: 10px;
+            background-color: #99dff2;
+        }
+        .middle .middle-right .middle-right-top .blue3{
+            float: right;
+            width: 450px;
+            height: 30px;
+            background-color: #99dff2;
+        }
+        .middle .middle-right .middle-right-top .purple{
+            float: left;
+            width: 190px;
+            height: 400px;
+            margin-left: 10px;
+            background-color: purple;
+        }
+        .middle .middle-right .smalt{
+            float: left;
+            width: 650px;
+            height: 25px;
+            background-color: #0f1ee7;
+            margin-top: 10px;
+        }
+        .bottom{
+            width: 970px;
+            height: 34px;
+            background-color: #e4af0f;
+            margin-top: 10px;
+        }
+    </style>
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20241018--\345\256\232\344\275\215.md" "b/\345\210\230\346\254\242/20241018--\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c5e1576e5ef7d5d0dd08069ddd504ccbcf8d23f9
--- /dev/null
+++ "b/\345\210\230\346\254\242/20241018--\345\256\232\344\275\215.md"
@@ -0,0 +1,316 @@
+# 定位
+css定位属性有三种：相对定位、绝对定位、固定定位
+
+## 相对定位relative
+让元素相对与自己**原来的位置**，进行位置调整。格式：
+```css
+position: reative;
+left: 向右偏移量;
+top: 向下偏移量;
+```
+
+### 相对定位不脱标
+别人不会把它的定位占走，相对定位的真实位置还在原来的地方
+
+### 用途
+1. 微调元素
+2. 做绝对定位的参考，**子绝父相**
+
+### 定位值
+可以有负数，负数表示相反的方向
+- left：盒子右移
+- right：盒子左移
+- top：盒子下移
+- bottom：盒子上移
+
+## 绝对定位absolute
+定义横纵坐标。原点在**父级容器**的左上角或左下角。格式：
+```css
+position: absolute;
+left: 横坐标;  
+top/bottom: 纵坐标;  
+```
+
+### 绝对定位脱标
+**绝对定位的盒子脱离了标准文档流**。绝对定位之后，标签就不区分所谓的行内元素、块级元素了
+
+### 绝对定位的参考点（！！！非常重要）
+1. 如果用**top**描述，参考点就是**页面的左上角**
+2. 如果是**bottom**描述，参考点就是浏览器的**首屏窗口尺寸，对应页面的左下角**
+
+### 以盒子为参考点
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点
+
+注意：
+1. 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷
+2. 不一定是相对定位，任何定位，都可以作为儿子的参考点
+3. 绝对定位的儿子，无视参考的那个盒子的padding
+
+“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。
+
+### 让绝对定位中的盒子再父亲里居中
+如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性
+
+如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
+```css
+div {
+  width: 600px;
+  height: 60px;
+  position: absolute;  绝对定位的盒子
+  left: 50%;           首先，让左边线居中
+  top: 0;
+  margin-left: -300px;  然后，向左移动宽度（600px）的一半
+	}
+```
+
+## 固定定位fixed
+相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+
+### z-index属性
+表示谁压着谁。数值大的压盖住数值小的。
+
+特性：
+1. 属性值大的位于上层，属性值小的位于下层。
+2. z-index值没有单位，就是一个正整数。默认的z-index值是0。
+3. 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人
+4. 只有定位了的元素，才能有z-index值。**浮动的元素不能用**。
+5. 如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
+
+
+
+# 定位练习1
+## 效果图
+![图片](./imgs/定位1.png)
+
+## 代码
+```html
+ <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        div{
+            width: 500px;
+            height: 500px;
+            border: 1px solid ;
+            position: absolute;
+            left: 30%;
+            top: 25%;
+        }
+    </style>
+```
+
+# 定位练习2（导航栏固定）
+## 效果图
+![图片](./imgs/固定导航栏.gif)
+
+## 代码
+```html
+  <style>
+        *{
+            margin: 0;
+            padding: 0;
+           
+        }
+        .nav{
+            width: 1850px;
+            height: 50px;
+            background-color: gray;
+            border: 1px solid;
+            position: fixed;
+           
+        }
+        .main{
+            height: 2000px;
+        }
+    </style>
+```
+
+# 定位练习3（悬浮文字）
+## 效果图
+![图片](./imgs/提示文字.png)
+
+## 代碼
+```html
+    <style>
+        .d1{
+            width: 100px;
+            height: 30px;
+            position: absolute;
+            top: 30px;
+            color: white;
+        }
+        .d1:hover{
+            background-color: black;
+        }
+    </style>
+</head>
+<body>
+   <div class="d1">我是提示文字</div>
+   <div class="d2">昂，你来了</div>
+</body>
+```
+
+# 定位4 （图标）
+## 效果图
+![图片](./imgs/图标.png)
+
+## 代码
+```html
+ <style>
+        li {
+            list-style-type: none;
+            padding-left: 30px;
+        }
+
+        div {
+            width: 16px;
+            height: 21px;
+            background-image: url(./imgs/精灵图技术素材.png);
+            background-size: 43px 40px;
+            float: left;
+        }
+
+        .d1 {
+            background-position: 2px 2px;
+        }
+
+        .d2 {
+            background-position: -13px 2px;
+        }
+
+        .d3 {
+            background-position: 1px -18px;
+        }
+
+        .d4 {
+            background-position: -13px -18px;
+        }
+
+        .d5 {
+            background-position: -27px 2px;
+        }
+
+        .d6 {
+            background-position: -27px -18px;
+        }
+    </style>
+</head>
+
+<body>
+    <ul>
+        <li>
+            <div class="d1"></div>付款图标
+        </li>
+        <li>
+            <div class="d2"></div>存款图标
+        </li>
+        <li>
+            <div class="d3"></div>删除图标
+        </li>
+        <li>
+            <div class="d4"></div>粘贴图标
+        </li>
+        <li>
+            <div class="d5"></div>笑脸图标
+        </li>
+        <li>
+            <div class="d6"></div>编辑图标
+        </li>
+    </ul>
+</body>
+
+```
+
+# 定位练习5（万达影城）
+## 效果图
+![图片](./imgs/第5题.png)
+
+## 代码
+```html
+  <style>
+        .d1 {
+            margin: 20px;
+            width: 440px;
+            position: relative;
+            border: 1px solid red;
+        }
+
+        .d2 {
+            width: 52px;
+            height: 28px;
+            background-image: url(./imgs/多套餐图标.png);
+            background-repeat: no-repeat;
+            position: absolute;
+            background-position: -108px 0px;
+            top: -9px;
+            left: 13px;
+        }
+
+        .d3 {
+            height: 50px;
+            width: 420px;
+            background-color: black;
+            color: #ccd3d7;
+            position: absolute;
+            top: 230px;
+            line-height: 50px;
+            padding-left: 20px;
+        }
+
+        .d4 {
+            padding: 10px;
+            line-height: 30px;
+        }
+        .d5{
+            padding-left: 10px;
+        }
+        .d6{
+            margin-top: 15px;
+        }
+        .s1{
+            color: #ff7401;
+            font-size: 24px;
+            font-weight: bolder;
+            padding-top: 10px;
+        }
+        del{
+            color: gray;
+            margin-left: 10px;
+        }
+        .s2{
+            margin-left: 240px;
+            color: gray;
+        }
+        .s3{
+            color: red;
+        }
+
+    </style>
+</head>
+
+<body>
+    <!--大盒子-->
+    <div class="d1">
+        <!--多套餐-->
+        <div class="d2"></div>
+        <!--背景圖-->
+        <div>
+            <img src="./imgs/万达影城图片.png" alt="">
+        </div>
+        <!--地点-->
+        <div class="d3">广东深圳宝安区建安一路海雅缤纷城4楼</div>
+        <!--简介，价格-->
+        <div class="d4">
+            <h3>【海雅缤纷城】万达影城（深圳海雅广场...</h3>
+            <div class="d5">单人电影票，可观看2D
+                <div class="d6">
+                    <span class="s1">￥35</span><del>￥80</del>
+                    <span class="s2">已售<span class="s3">225</span></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20241021--Z-index\345\261\236\346\200\247\345\222\214CSS3.md" "b/\345\210\230\346\254\242/20241021--Z-index\345\261\236\346\200\247\345\222\214CSS3.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4d487638ef3bf0d0445c6befef9f9ab9e1ba711a
--- /dev/null
+++ "b/\345\210\230\346\254\242/20241021--Z-index\345\261\236\346\200\247\345\222\214CSS3.md"
@@ -0,0 +1,47 @@
+# z-index属性
+z-index属性：表示谁压着谁，数值大的压盖住数值小的
+
+有如下特性：
+
+(1) 属性值大的位于上层，属性值小的位于下层
+
+(2) z-index值没有单位，就是一个正整数，默认的z-index值是0
+
+(3) 如果都没有z-index值，或者z-index值一样，那么代码写在后面的，谁就在上面能压住别人。定位了的元素永远能压住没有定位的元素
+
+(4) 只有定位了的元素，才能有z-index值。浮动的元素不能用
+
+(5) 从父现象：如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层
+
+
+# CSS3介绍
+## CSS的现状
++ 浏览器支持程度不够好，有些需要添加私有前缀
++ 移动端支持优于PC端
++ 不断改进中
++ 应用相对广泛
+
+## CSS3选择器
+### 属性选择器
+属性选择器的标志性符号是`[]`
+
+匹配含义：
+
+> ^:开头   $ :结尾   *：包含
+
+格式：
++ `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。
+
+
diff --git "a/\345\210\230\346\254\242/imgs/600-900.png" "b/\345\210\230\346\254\242/imgs/600-900.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ff20535d4093067293348eb3cbb2e1f217fefbf1
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/600-900.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/Home.gif" "b/\345\210\230\346\254\242/imgs/Home.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..0f7b52cc97aff3d6f09d47bdba414df33ec6bd89
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/Home.gif" differ
diff --git "a/\345\210\230\346\254\242/imgs/Lable.gif" "b/\345\210\230\346\254\242/imgs/Lable.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..acba72907a5622031c76aa56ab2262fb4cd23933
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/Lable.gif" differ
diff --git "a/\345\210\230\346\254\242/imgs/Username.gif" "b/\345\210\230\346\254\242/imgs/Username.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..caadce3a3315c1d9f7c79bc4aeaf20fb7fd80624
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/Username.gif" differ
diff --git "a/\345\210\230\346\254\242/imgs/line-heightz\344\270\223\351\241\271\347\273\203\344\271\240\346\225\210\346\236\234\345\233\276.png" "b/\345\210\230\346\254\242/imgs/line-heightz\344\270\223\351\241\271\347\273\203\344\271\240\346\225\210\346\236\234\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3ad5681695d8c7aa4fe3c7afb09679cc8a239611
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/line-heightz\344\270\223\351\241\271\347\273\203\344\271\240\346\225\210\346\236\234\345\233\276.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/merged.gif" "b/\345\210\230\346\254\242/imgs/merged.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..ab3f8d65fabe549d1e9de6ffc68b7cff957a4ac7
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/merged.gif" differ
diff --git "a/\345\210\230\346\254\242/imgs/table.png" "b/\345\210\230\346\254\242/imgs/table.png"
new file mode 100644
index 0000000000000000000000000000000000000000..087f0b4669dee01cd45563370dd3c69d3c2049dd
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/table.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/ul.gif" "b/\345\210\230\346\254\242/imgs/ul.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..1d4761c46a1f53966c476c036b819b52d051df23
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/ul.gif" differ
diff --git "a/\345\210\230\346\254\242/imgs/\344\270\207\350\276\276\345\275\261\345\237\216\345\233\276\347\211\207.png" "b/\345\210\230\346\254\242/imgs/\344\270\207\350\276\276\345\275\261\345\237\216\345\233\276\347\211\207.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ed10d0cb97548f4b69cfdc475ce1f5e62b10ebb2
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\344\270\207\350\276\276\345\275\261\345\237\216\345\233\276\347\211\207.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\345\212\250\347\224\273\346\226\207\346\234\254.gif" "b/\345\210\230\346\254\242/imgs/\345\212\250\347\224\273\346\226\207\346\234\254.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..044ce7bdc909a8c4af38fa81138b7946db83c5d0
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\212\250\347\224\273\346\226\207\346\234\254.gif" differ
diff --git "a/\345\210\230\346\254\242/imgs/\345\215\232\345\256\242\345\233\255.png" "b/\345\210\230\346\254\242/imgs/\345\215\232\345\256\242\345\233\255.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5b696e4e1582bab0b21f5e3f7f9936e9ee93d666
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\215\232\345\256\242\345\233\255.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\345\233\276\346\240\207.png" "b/\345\210\230\346\254\242/imgs/\345\233\276\346\240\207.png"
new file mode 100644
index 0000000000000000000000000000000000000000..59672be4c583e11aef5bdb36963b8157a728c247
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\233\276\346\240\207.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\345\233\276\347\211\2071.png" "b/\345\210\230\346\254\242/imgs/\345\233\276\347\211\2071.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2a4f88c94d56699773b4d4e89cae1a3145c92cdd
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\233\276\347\211\2071.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\345\233\276\347\211\207\345\261\205\344\270\255.png" "b/\345\210\230\346\254\242/imgs/\345\233\276\347\211\207\345\261\205\344\270\255.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f68ce6ea494521370502183489440fd1e41d654d
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\233\276\347\211\207\345\261\205\344\270\255.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\345\244\232\345\245\227\351\244\220\345\233\276\346\240\207.png" "b/\345\210\230\346\254\242/imgs/\345\244\232\345\245\227\351\244\220\345\233\276\346\240\207.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5bcddb4c7afead15912d00421a1f12a05046fe3e
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\244\232\345\245\227\351\244\220\345\233\276\346\240\207.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\345\274\225\347\224\250\346\226\207\346\234\254.png" "b/\345\210\230\346\254\242/imgs/\345\274\225\347\224\250\346\226\207\346\234\254.png"
new file mode 100644
index 0000000000000000000000000000000000000000..304224ccccbf6846faa50678362a960cf10f38b7
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\345\274\225\347\224\250\346\226\207\346\234\254.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\346\214\211\351\222\256.png" "b/\345\210\230\346\254\242/imgs/\346\214\211\351\222\256.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a1c07ce1c6668ccc5026523ec5a2a693a3b92d65
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\346\214\211\351\222\256.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\346\217\220\347\244\272\346\226\207\345\255\227.png" "b/\345\210\230\346\254\242/imgs/\346\217\220\347\244\272\346\226\207\345\255\227.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5d7e2c708a7ca1bd47a0887343ea1751b2cf117e
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\346\217\220\347\244\272\346\226\207\345\255\227.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\346\226\207\345\255\227\345\261\205\344\270\255.png" "b/\345\210\230\346\254\242/imgs/\346\226\207\345\255\227\345\261\205\344\270\255.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5b63790be46d9bec64ba87152393a1b5ffb54c6c
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\346\226\207\345\255\227\345\261\205\344\270\255.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\346\265\201\347\250\213\345\233\276.jpg" "b/\345\210\230\346\254\242/imgs/\346\265\201\347\250\213\345\233\276.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f91f613e45638c6d2922a88dbf4ea18aa27948ce
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\346\265\201\347\250\213\345\233\276.jpg" differ
diff --git "a/\345\210\230\346\254\242/imgs/\346\270\220\345\217\230\346\225\210\346\236\234\345\233\2761.png" "b/\345\210\230\346\254\242/imgs/\346\270\220\345\217\230\346\225\210\346\236\234\345\233\2761.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1178f9f1e49f48c9662394b8b8b8a90f5cda3808
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\346\270\220\345\217\230\346\225\210\346\236\234\345\233\2761.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\346\270\220\345\217\230\346\225\210\346\236\234\345\233\2762.png" "b/\345\210\230\346\254\242/imgs/\346\270\220\345\217\230\346\225\210\346\236\234\345\233\2762.png"
new file mode 100644
index 0000000000000000000000000000000000000000..75a6893ff798e0f02f13c1a62254b18cf0d1c116
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\346\270\220\345\217\230\346\225\210\346\236\234\345\233\2762.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\347\231\273\345\275\225\345\233\276\347\211\207.jpg" "b/\345\210\230\346\254\242/imgs/\347\231\273\345\275\225\345\233\276\347\211\207.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..49b88efdf40030169af721dac3eef5a97aae5e0d
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\347\231\273\345\275\225\345\233\276\347\211\207.jpg" differ
diff --git "a/\345\210\230\346\254\242/imgs/\347\231\273\345\275\225\351\241\265\351\235\242\346\225\210\346\236\234\345\233\276.png" "b/\345\210\230\346\254\242/imgs/\347\231\273\345\275\225\351\241\265\351\235\242\346\225\210\346\236\234\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5d1195aa8d25d9b06b000740ed9c03cec45140a4
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\347\231\273\345\275\225\351\241\265\351\235\242\346\225\210\346\236\234\345\233\276.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\347\231\276\345\272\246.png" "b/\345\210\230\346\254\242/imgs/\347\231\276\345\272\246.png"
new file mode 100644
index 0000000000000000000000000000000000000000..06b24054cfad8e69f9327b3faec4ff0cfc21e5a9
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\347\231\276\345\272\246.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\347\233\222\345\255\220.png" "b/\345\210\230\346\254\242/imgs/\347\233\222\345\255\220.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fdbffb12769521cd77c7b9c95aaa31e58d5e67f5
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\347\233\222\345\255\220.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\347\254\2545\351\242\230.png" "b/\345\210\230\346\254\242/imgs/\347\254\2545\351\242\230.png"
new file mode 100644
index 0000000000000000000000000000000000000000..058d1d2396393114ed23585d8be723ce23281b4c
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\347\254\2545\351\242\230.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\347\264\240\346\235\220.png" "b/\345\210\230\346\254\242/imgs/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\347\264\240\346\235\220.png"
new file mode 100644
index 0000000000000000000000000000000000000000..00138ea2a9ec09abba06e7f0a3bde57b05342cc6
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\347\264\240\346\235\220.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\344\275\215\347\275\256\346\225\210\346\236\234\345\233\276.png" "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\344\275\215\347\275\256\346\225\210\346\236\234\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..da24b97bb7e367b5071d6ec89813f41dd930ac11
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\344\275\215\347\275\256\346\225\210\346\236\234\345\233\276.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\345\233\276\347\211\207\346\225\210\346\236\234\345\233\276.png" "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\345\233\276\347\211\207\346\225\210\346\236\234\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..197010605c7bbcbe27ee48d094cf6d0892722519
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\345\233\276\347\211\207\346\225\210\346\236\234\345\233\276.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\345\233\276\347\211\207\351\207\215\345\244\215\346\225\210\346\236\234\345\233\276.png" "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\345\233\276\347\211\207\351\207\215\345\244\215\346\225\210\346\236\234\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cdf6ac039ea31ea3e34629d4f3c34ec2af71fbca
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\345\233\276\347\211\207\351\207\215\345\244\215\346\225\210\346\236\234\345\233\276.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\351\242\234\350\211\262\345\233\276\347\211\207.png" "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\351\242\234\350\211\262\345\233\276\347\211\207.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b1949d0f6307f33ccaeefdd87870e5acbd2d47cd
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\350\203\214\346\231\257\351\242\234\350\211\262\345\233\276\347\211\207.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\350\213\271\346\236\234\345\257\274\350\210\252\346\240\217.png" "b/\345\210\230\346\254\242/imgs/\350\213\271\346\236\234\345\257\274\350\210\252\346\240\217.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a291b58c440d913ea46d2d1e112a50b9aedc38aa
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\350\213\271\346\236\234\345\257\274\350\210\252\346\240\217.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\350\257\227.png" "b/\345\210\230\346\254\242/imgs/\350\257\227.png"
new file mode 100644
index 0000000000000000000000000000000000000000..08b0f24a233e18016dd21fc58b7381177b90f0aa
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\350\257\227.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\350\267\221\351\251\254\347\201\257\346\225\210\346\236\234\345\233\276.gif" "b/\345\210\230\346\254\242/imgs/\350\267\221\351\251\254\347\201\257\346\225\210\346\236\234\345\233\276.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..bb393563b1e207a2b9e60da2ba977ee9d18878ec
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\350\267\221\351\251\254\347\201\257\346\225\210\346\236\234\345\233\276.gif" differ
diff --git "a/\345\210\230\346\254\242/imgs/\351\200\211\346\213\251\345\231\250\347\273\203\344\271\2401.png" "b/\345\210\230\346\254\242/imgs/\351\200\211\346\213\251\345\231\250\347\273\203\344\271\2401.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c11c7e28c118a6f2022467f2917ec8a40f70d3ba
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\351\200\211\346\213\251\345\231\250\347\273\203\344\271\2401.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\351\207\215\345\244\215\347\272\277\346\200\247\346\270\220\345\217\230.png" "b/\345\210\230\346\254\242/imgs/\351\207\215\345\244\215\347\272\277\346\200\247\346\270\220\345\217\230.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7400efeeb50fd64f0814e07d1ca8700c497ac971
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\351\207\215\345\244\215\347\272\277\346\200\247\346\270\220\345\217\230.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\351\246\226\345\255\227\346\257\215\344\270\213\346\262\211.png" "b/\345\210\230\346\254\242/imgs/\351\246\226\345\255\227\346\257\215\344\270\213\346\262\211.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8fae1385cfc81ad593f17a254bf50dfa18c6e804
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\351\246\226\345\255\227\346\257\215\344\270\213\346\262\211.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\351\246\226\345\255\227\346\257\215\345\244\247\345\206\231.png" "b/\345\210\230\346\254\242/imgs/\351\246\226\345\255\227\346\257\215\345\244\247\345\206\231.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3b80e2993c7b62ee9835be1cc409a383d90c33a1
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\351\246\226\345\255\227\346\257\215\345\244\247\345\206\231.png" differ
diff --git "a/\345\210\230\346\254\242/imgs/\351\253\230\344\272\256\346\230\276\347\244\272\346\226\207\346\234\254.gif" "b/\345\210\230\346\254\242/imgs/\351\253\230\344\272\256\346\230\276\347\244\272\346\226\207\346\234\254.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..0b3ddfb31f5b674e6d692e122573960e4e13e4ef
Binary files /dev/null and "b/\345\210\230\346\254\242/imgs/\351\253\230\344\272\256\346\230\276\347\244\272\346\226\207\346\234\254.gif" differ
