diff --git "a/\346\226\271\345\207\244\344\270\271/20240909\357\274\210\346\270\262\346\237\223\357\274\211.md" "b/\346\226\271\345\207\244\344\270\271/20240909\357\274\210\346\270\262\346\237\223\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b9dc17d99d4490e727bf5f91349e01782639e922
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240909\357\274\210\346\270\262\346\237\223\357\274\211.md"
@@ -0,0 +1,17 @@
+# 效果展示
+
+`<style>
+    img.center{
+        display: flex;
+
+        margin-left: auto;
+        margin-right: auto;
+    }
+</style>
+<body>
+    <!-- <a href="./image.png" >什么破图也拿出来！！！</a> -->
+    
+        <img src="./image.png" alt="什么破图也拿出来！！！" width="320px" height="280px" class="center">
+  
+        
+  </body>`
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20240911(HTML\345\237\272\346\234\254\350\257\255\346\263\225).md" "b/\346\226\271\345\207\244\344\270\271/20240911(HTML\345\237\272\346\234\254\350\257\255\346\263\225).md"
new file mode 100644
index 0000000000000000000000000000000000000000..998d5ab6218b1511a8d051d4038b6774c0b4c0d0
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240911(HTML\345\237\272\346\234\254\350\257\255\346\263\225).md"
@@ -0,0 +1,51 @@
+
+ 效果展示`<style>
+.a{
+    text-align: center;
+}
+.b{
+    height: 15px;
+    width: 250;
+    background-color: aqua;
+     border: none;
+}
+</style>
+<body>
+    <p class="a">床前明月光，疑是地上霜。</p>
+    <!-- <hr size="5" width="500" color="pink"> -->
+     <hr class="b">
+    <p class="a">举头望明月，低头思故乡。</p>
+    
+</body>`
+
+## 笔记
+
+# 计算机编码介绍
+
+## HTML的规范
+HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写
+HTML页面的后缀名是html或者htm
+
+所有标记元素都要正确的嵌套，不能交叉嵌套
+
+所有的标记都必须小写。
+
+所有的标签都必须闭合。
+
+双标签：`<span></span>`
+
+单标签：`<br>` 建议写成 `<br />`   `<hr>` 建议转成 `<hr />`，还有`<img src=“URL” />`
+
+## HTML的基本语法特性
+
+HTML对换行不敏感，对tab不敏感
+
+### 空白折叠现象
+HTML中所有的**文字之间**，如果有空格、换行、tab都将被折叠为一个空格显示
+
+## 标签
+### 标题标签
+
+标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。
+
+
diff --git "a/\346\226\271\345\207\244\344\270\271/20240913(\345\212\250\345\233\276).md" "b/\346\226\271\345\207\244\344\270\271/20240913(\345\212\250\345\233\276).md"
new file mode 100644
index 0000000000000000000000000000000000000000..b9dc17d99d4490e727bf5f91349e01782639e922
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240913(\345\212\250\345\233\276).md"
@@ -0,0 +1,17 @@
+# 效果展示
+
+`<style>
+    img.center{
+        display: flex;
+
+        margin-left: auto;
+        margin-right: auto;
+    }
+</style>
+<body>
+    <!-- <a href="./image.png" >什么破图也拿出来！！！</a> -->
+    
+        <img src="./image.png" alt="什么破图也拿出来！！！" width="320px" height="280px" class="center">
+  
+        
+  </body>`
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20240914(\346\240\207\347\255\276).md" "b/\346\226\271\345\207\244\344\270\271/20240914(\346\240\207\347\255\276).md"
new file mode 100644
index 0000000000000000000000000000000000000000..a1f6a1be75d7652ea999353eba56e0dd9e69ab19
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240914(\346\240\207\347\255\276).md"
@@ -0,0 +1,39 @@
+## 效果展示
+![alt text](苹果页面导航栏.png)
+
+# 笔记
+
+ ## 列表标签
+
+### **无序列表 (`<ul>`)**：
+使用 `<li>` 标签，表示无序项。
+
+
+
+可设置 `type` 属性为 `disc`、`square`、`circle`。
+
+应用场景包括导航条和内容较多的分类列表。
+
+
+
+### **有序列表 (`<ol>`)**：
+使用 `<li>` 标签，表示有序项。
+
+
+
+可设置 `type` 属性为 `1`, `a`, `A`, `i`, `I`，结合 `start` 属性表示从几开始。
+
+适用于需要按顺序排列的内容展示。
+
+
+
+### **定义列表 (`<dl>`)**：
+包含描述性标题 `<dt>` 和具体描述 `<dd>`。
+
+例如：`<dl><dt>第一条</dt><dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd></dl>`。
+
+表达两层语义——列出多个描述项和一个描述项的具体说明。
+
+### **表格标签 (`<table>`)**：
+
+表格用 <table> 表示，由行 <tr> 和列 <td> 组成。
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20240918\357\274\210\346\214\211\351\222\256\357\274\211.md" "b/\346\226\271\345\207\244\344\270\271/20240918\357\274\210\346\214\211\351\222\256\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4a71d4bb646a17c643079ddefa980e4a44ca390e
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240918\357\274\210\346\214\211\351\222\256\357\274\211.md"
@@ -0,0 +1,211 @@
+## 效果展示
+
+![alt text](单元格悬浮显示-1.gif)
+
+![alt text](按钮.png)
+
+## 代码
+`
+<style>
+    table{
+        border: 1px;
+        background-color: blanchedalmond;
+    }
+    table tr:hover{
+        background-color: pink;
+    }
+    table td:hover{
+        background-color: #a7d0f7;
+    }
+    
+</style>
+<style>
+.button1{
+    background-color: #1890ff;
+    border: none;
+    color: #FFF;
+    border-radius: 5px;
+   
+}
+.button2{
+background-color:#FFF;
+    border-radius: 5px;
+    border-color: gray;
+}
+.button3{
+    background-color: #FFF;
+    color: gray;
+    border-radius: 5px;
+    border: none;
+    border: 1px dashed gray;
+}
+.button4{
+    background-color:#FF4D4F;
+    color: #FFF;
+    border-radius: 5px;
+    border: none;
+}
+.button5{
+    border: none;
+    background-color: #1890ff;
+    color: #FFF;
+    border-radius: 5px;
+}
+.button6{
+    border: none;
+    color: #1890ff;
+    background-color: #fff;
+}
+</style>
+<body>
+   <input type="button" class="button1" value="Primary">
+   <input type="button" class="button2" value="Default">
+   <input type="button" class="button3" value="Dashed">
+    <input type="button" class="button4" value="Danger">
+    <input type="button" class="button5" value="按钮">
+    <input type="button" class="button6" value="Link">
+</body>
+`
+
+## 笔记
+### 表单标签
+>表单标签用`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/\346\226\271\345\207\244\344\270\271/20240920(\347\231\273\345\275\225&\350\267\221\351\251\254\347\201\257).md" "b/\346\226\271\345\207\244\344\270\271/20240920(\347\231\273\345\275\225&\350\267\221\351\251\254\347\201\257).md"
new file mode 100644
index 0000000000000000000000000000000000000000..fd94c373349399870b34701ebd0761529584796b
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240920(\347\231\273\345\275\225&\350\267\221\351\251\254\347\201\257).md"
@@ -0,0 +1,136 @@
+## 主要代码
+```html
+ <style>
+        body{display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background-image: url(../OIP-C.jpg);
+            background-size: cover;}
+        #A{background-color: pink;
+            opacity: 0.5;
+            width: 250px;
+            height: 300px;
+            text-align: center;
+            border-radius: 10px;
+            box-shadow: 10px 10px 20px 5px rgba(0,0, 0, 0.5);}
+        h2{ color: aliceblue;
+            text-align: center;}
+        #a{color: #000;
+            height: 25px;
+            border-radius: 5px;
+            border: none;
+            box-shadow: 10px 10px 20px 5px rgba(0,0, 0, 0.5);}
+       #b{ border-radius: 5px;
+            height: 25px;
+            border: none;
+            box-shadow: 10px 10px 20px 5px rgba(0,0, 0, 0.5);}
+        #c{border-radius: 10px;
+            height: 25px;
+            color: gray;
+            border: none;}
+        a{text-decoration: none;}
+    </style>
+</head>
+<body>
+    <div>
+       <div id="A">
+        <h2>登录</h2>
+        <p><label for=""><input type="text" placeholder="姓名" id="a"></label></p>
+        <p><label for=""><input type="password" placeholder="密码" id="b"></label></p>
+        <p><label for=""><input type="button" value="登录" id="c"></label></p>
+        <p><label for="" id="d">忘记密码?<a href="">点击这里！</a></label></p>
+        <p><label for="" id="e">没有账户?<a href="">注册!</a></label></p>
+       </div>
+    </div>
+</body>
+```
+
+## 效果展示
+
+![alt text](./登录.png)
+
+## 跑马灯主要代码
+```html
+ <style>
+    #a{
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        white-space: nowrap;
+        box-sizing: border-box;
+        animation: a 5s linear infinite;
+        color: red;
+    }
+    @keyframes a{
+        from{transform: translateX(100px);}
+        to{transform: translateX(-100px);}
+    }
+</style>
+<body>
+    <div id="a">
+            <span>我是会跑的文字，yes!!</span>
+    </div>
+</body>
+```
+
+## 效果展示
+![alt text](./跑马灯.gif)
+
+# 课堂笔记
+
+HTML5是新一代开发 Web 富客户端应用程序整体解决方案
+
+- `<section>` 表示区块
+
+- `<article>` 表示文章。如文章、评论、帖子、博客
+
+- `<header>` 表示页眉
+
+- `<footer>` 表示页脚
+
+- `<nav>` 表示导航
+
+- `<aside>` 表示侧边栏。如文章的侧栏
+
+- `<figure>` 表示媒介内容分组。
+
+- `<mark>` 表示标记 (用得少)
+
+- `<progress>` 表示进度 (用得少)
+
+- `<time>` 表示日期
+
+- `email` 只能输入email格式。自动带有验证功能。
+
+- `tel` 手机号码。
+
+- `url` 只能输入url格式。
+
+- `number` 只能输入数字。
+
+- `search` 搜索框
+
+- `range` 滑动条
+
+- `color` 拾色器
+
+- `time`	时间
+
+- `date` 日期
+
+- `datetime` 时间日期
+
+- `month` 月份
+
+- `week` 星期
+
+`<fieldset>` 标签将表单里的内容进行打包，代表一组；而`<legend> `标签的则是 fieldset 里的元素定义标题。
+
+`<keygen>`元素：作用是提供一种验证用户的可靠方法
+
+### 音频
+HTML5通过`<audio>`标签来解决音频播放的问题
+
+### 视频
+HTML5通过`<video>`标签来解决视频播放的问题
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20240923(html\350\257\246\350\247\243\347\254\254\345\205\253\345\260\217\347\202\271\345\210\26012\345\260\217\347\202\271).md" "b/\346\226\271\345\207\244\344\270\271/20240923(html\350\257\246\350\247\243\347\254\254\345\205\253\345\260\217\347\202\271\345\210\26012\345\260\217\347\202\271).md"
new file mode 100644
index 0000000000000000000000000000000000000000..ee3b44254429e5c2a077b7151f7193f8b63c59ce
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240923(html\350\257\246\350\247\243\347\254\254\345\205\253\345\260\217\347\202\271\345\210\26012\345\260\217\347\202\271).md"
@@ -0,0 +1,63 @@
+## ## 本文主要内容
+
+- 拖拽
+
+- 历史
+
+- 地理位置
+
+- 全屏
+
+### draggable="true"
+可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的
+
+**拖拽元素的事件监听**：（应用于拖拽元素）
+
+- `ondragstart`当拖拽开始时调用
+
+- `ondragleave`	当**鼠标离开拖拽元素时**调用
+
+- `ondragend`	当拖拽结束时调用
+
+- `ondrag` 		整个拖拽过程都会调用
+
+**目标元素的事件监听**：（应用于目标元素）
+
+- `ondragenter`	当拖拽元素进入时调用
+
+- `ondragover`	当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
+
+- `ondrop`		当在目标元素上松开鼠标时调用
+
+- `ondragleave`	当鼠标离开目标元素时调用
+
+ 当拖拽元素在 目标元素上时，连续触发
+    two.ondragover = function (e) {
+        //阻止拖拽事件的默认行为
+        e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。 console.log("over...");
+    }
+
+**总结**：如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。
+
+## 地理定位
+
+在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。
+
+### 获取地理信息的方式
+
+#### 1、IP地址
+
+
+#### 2、三维坐标：
+
+
+**GPS**（Global Positioning System，全球定位系统）
+1.美国（GPS）
+2.苏联/俄罗斯（GLONASS）
+3.欧盟（GALILEO）
+4.中国（BDS）
+5.印度（IRNSS）
+#### 3、用户自定义数据：
+对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息：
+
+当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
diff --git "a/\346\226\271\345\207\244\344\270\271/20240925(\345\255\227\344\275\223\345\261\236\346\200\247).md" "b/\346\226\271\345\207\244\344\270\271/20240925(\345\255\227\344\275\223\345\261\236\346\200\247).md"
new file mode 100644
index 0000000000000000000000000000000000000000..84041bd85c179f8febbc10916bb626c3393907a4
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240925(\345\255\227\344\275\223\345\261\236\346\200\247).md"
@@ -0,0 +1,30 @@
+## 
+
+ - CSS的单位
+ - 字体属性
+ - 文本属性
+ - 定位属性：position、float、overflow等
+
+ ### CSS的单位
+
+ html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
+<font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
+
+### font 字体属性
+
+CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
+为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
+
+### 如何让单行文本垂直居中
+\`vertical-align: middle;` 属性
+
+### 字号、行高、字体三大属性
+font-size:14px;
+line-height:24px;
+font-family:"宋体";
+
+#### 把字号、行高、字体这三个属性合二为一
+font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";
+比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”`。`200%`可以理解成word里面的2倍行高。
+
+![](http://img.smyhvae.com/2015-10-03-css-18.png)
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20240929(\350\203\214\346\231\257\345\261\236\346\200\247).md" "b/\346\226\271\345\207\244\344\270\271/20240929(\350\203\214\346\231\257\345\261\236\346\200\247).md"
new file mode 100644
index 0000000000000000000000000000000000000000..ae2c23f4390aa19be648e989dd1bbad2c37e350f
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240929(\350\203\214\346\231\257\345\261\236\346\200\247).md"
@@ -0,0 +1,113 @@
+
+#### 背景属性代码
+```html
+.box{
+        background-color: #00008b;
+        height: 100px;
+        width: 200px;
+        color: #fff;
+    }
+    
+    .image-backgrond{
+    background-image: url(../OIP-C.jpg);
+    height: 100vh;
+    width: 100%;
+    background-size: cover;
+background-repeat: no-repeat;
+  }
+   
+    .header{
+        background-size: 200px;
+        background-position: bottom right;
+        height: 200px;
+        width: 300px;
+        background-image: url(../OIP-C.jpg);
+        background-repeat: no-repeat;
+        border: 1px dashed;
+    }
+     .pattern {
+        background-image: url(../OIP-C.jpg);
+        background-size: 100px 100px;
+        width: 500px;
+        height: 600px;
+        background-color: black;
+        background-repeat: no-repeat;
+        background-repeat: repeat-y;
+        background-position: center;
+        margin-top: 50px;
+    }
+     .cover-image{
+        background-image: url(../OIP-C.jpg);
+        background-size: cover;
+        background-repeat: no-repeat;
+        height: 1000px;
+        width: 100%;
+    }
+
+```
+
+### 效果展示
+![](./pt/蓝色盒子.png)
+![](./pt/背景位置.png)
+![](./pt/背景图片.png)
+![](./pt/背景重复.png)
+![](./pt/背景尺寸.mp4)
+
+### overflow属性：超出范围的内容要怎么处理
+visible:默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
+hidden：不显示超过对象尺寸的内容。
+
+auto：如果内容超出，则不显示滚动条。内容超出，则显示滚动条
+
+scroll :无论书否超出，总显示滚动条
+
+### 鼠标的属性：cursor
+auto：默认值：浏览器根据当前的情况自动确定鼠标光标类型。
+pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
+hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 hover：悬浮效果
+滤镜： filter
+<img src='./jpg ' style="filter:gray()">
+
+### 背景属性：background
+常见的一些背景属性：
+background-color：#ff99ff；设置元素的背景颜色
+background-image：url(img.gif):将图片设置为背景
+background-repeat:no-repeat:设置背景图片是否重复，如何重复，默认平铺（重要）
+no-repeat不要平铺
+repeat-x横向平铺
+repeat-y纵向平铺
+background-position：center top ：将图片背景图片在当前容器中的位置
+background-attachment：scroll:设置背景图片是否跟着滚动条一起滚动 scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。
+综合属性：background 通常是在css中运用：background-orign background-clip 背景裁切 background-size：调整尺寸
+background-color：背景颜色的表示方法
+颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
+
+#### 用英语单词表示 比如red、green、blue、orange、gray等
+RGB 表示法 background-color: rgb(255,0,0)
+RGBA 表示法 background-color: rgba(0, 0, 255, 0.3)
+十六进制表示法 background-color: #ff0000
+HSLA 表示法 background-color: hsla(240,50%,50%,0.4)
+H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
+
+S 饱和度，取值范围 0%~100%。值越大，越鲜艳。
+
+L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
+
+A 透明度，取值范围 0~1
+
+#### 设置透明度的其他方式
+opacity: 0.3;会将整个盒子及子盒子设置透明度。background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
+
+background-repeat属性
+background-repeat：no-repeat：设置背景是否重复及如何重复，默认平铺满
+
+no-repeat不要平铺
+repeat-x横向平铺
+repeat-y纵向平铺
+background-position属性
+background-position属性指的是背景定位属性
+
+#### 用像素值描述属性值： background-position：像右偏移量 向下偏移量 属性值可以是正数，也可以是负数：100培训200培训，-34px -123px
+用单词描述与属性值 background-position: 描述左右的词 描述上下的词;
+描述左右的词：left、center、right
+描述上下的词：top 、center、bottom right center 表示将图片放在右边的中间；center center表示将图片放在正中间 bottom 表示将图片的底部和父亲底部贴齐
diff --git "a/\346\226\271\345\207\244\344\270\271/20240930\350\203\214\346\231\257\350\246\206\347\233\226and\346\273\232\345\212\250\350\247\206\345\267\256+\347\272\277\346\200\247\346\270\220\345\217\230.md" "b/\346\226\271\345\207\244\344\270\271/20240930\350\203\214\346\231\257\350\246\206\347\233\226and\346\273\232\345\212\250\350\247\206\345\267\256+\347\272\277\346\200\247\346\270\220\345\217\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9d38b4f5eda67f5bbc52d46a35cbdfcc727b804c
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20240930\350\203\214\346\231\257\350\246\206\347\233\226and\346\273\232\345\212\250\350\247\206\345\267\256+\347\272\277\346\200\247\346\270\220\345\217\230.md"
@@ -0,0 +1,163 @@
+
+
+### 效果展示
+![进阶](./pt/进阶作业.png)
+![线性](./pt/线性渐变.png)
+![滚动](./pt/滚动视差.gif)
+
+进阶代码
+```html
+   .multi-background {
+        background-image: url(../图片/易烊千玺1.webp), url(../图片/2.jpeg);
+        background-repeat: no-repeat;
+        background-position: top left, bottom left;
+        width: 100%;
+        height: 500px;
+        opacity: 0.8;
+        /* 多重背景：请为一个名为.multi-background的类设置两个背景图片，并确保第一个图片覆盖在第二个图片之上。 */
+    }
+
+    .gradient-box {
+
+        width: 400px;
+        height: 100px;
+        background: linear-gradient(to right, blue, red);
+        /* 背景渐变：请为一个名为.gradient-box的类创建一个从左到右的线性渐变背景，颜色从蓝色到红色。 */
+    }
+
+    .cropped-background {
+        /* 背景裁剪：请为一个名为.cropped-background的类设置背景图片，并确保图片只显示在元素的中心区域。 */
+        width: 200px;
+        height: 200px;
+        background-image: url(../图片/2.jpeg);
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+    }
+
+    .responsive-background {
+        /* 背景缩放：请为一个名为.responsive-background的类设置背景图片，并确保图片能够根据元素大小自动缩放。 */
+        width: 100%;
+        height: 500px;
+        background-image: url(../图片/易烊千玺1.webp);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+    }
+
+    .sticky-footer {
+        /* 背景附加属性：请为一个名为.sticky-footer的类设置背景图片，并确保图片在页面滚动时固定在底部 */
+        width: 100%;
+        height: 100px;
+        background-image: url(../图片/2.jpeg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+        z-index: 1000;
+        bottom: 0;
+        left: 0;
+    }
+```
+线性代码
+```html
+      .d1 {
+            height: 80px;
+            width: 600px;
+            
+            background-image: linear-gradient(to right,
+            black 0%,black 25%,
+            pink 25%,pink 50%,
+            black 50%,black 75%,
+            pink 75%,pink 100%
+            );
+        }
+        .d2{
+            margin-top: 20px;
+            height: 80px;
+            width: 600px;
+
+            background-image: linear-gradient(45deg,
+            rgb(92, 152, 187)0%,rgb(92, 152, 187) 25%,
+            pink 25%,pink 50%,
+            rgb(49, 165, 33) 50%,rgb(49, 165, 33) 75%,
+            rgb(209, 201, 85) 75%,rgb(209, 201, 85) 100%
+            );
+       
+        }
+        .d3{
+            font-size: 85px;
+            width: 600px;
+            height: 200px;
+           font-weight: bold;
+            color: transparent;
+            background-image: linear-gradient(45deg,red 0%,red 40%,blue 40%,blue 65%,pink 65%,pink 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+        }
+```
+滚动代码
+```html
+*{
+            margin: 0px;
+            padding: 0px;
+        }
+       div{
+        width: 100%;
+        height: 100vh;
+        background: rgba(0, 0, 0, .7);
+      color: #fff;
+      line-height: 100vh;
+      text-align: center;
+      font-size: 20vh;
+
+       }
+       .bg {
+      background-attachment: fixed;
+      background-size: cover;
+      background-position: center center;}
+.img1 {
+      background-image: url(../图片/4.png);
+
+  }
+
+  .img2 {
+      background-image: url(../图片/5.png);
+
+  }
+
+  .img3 {
+      background-image: url(../图片/7.png);
+
+  }
+```
+### 渐变背景
+使用 background-image 属性设置线性渐变或径向渐变背景，可控制渐变方向、颜色和位置。渐变背景: 使用 background-image 属性设置线性渐变或径向渐变背景，可控制渐变方向、颜色和位置。
+
+### 渐变类型：
+
+#### 线性渐变 (linear-gradient): 
+沿着一条直线从一种颜色渐变到另一种颜色。
+
+*语法*： background-image: linear-gradient([方向], 起始颜色, 终止颜色);
+
+*方向*： 可使用 to left, to right, to top, to bottom 或角度 (如 30deg)。
+
+*颜色*： 可使用颜色名、RGB、十六进制、RGBA 或 HSLA 等表示方法。
+
+*多色渐变*： 可添加多个颜色值，创建更复杂的渐变效果。
+
+*颜色位置*： 可使用百分比或像素值指定颜色出现的位置。
+
+#### 径向渐变 (radial-gradient): 
+从一个中心点向外扩散渐变效果。
+
+*语法*： background-image: radial-gradient(半径大小 at 中心位置, 起始颜色, 终止颜色);
+*半径大小*： 可使用像素值或百分比指定渐变的半径。
+*中心位置*： 可使用 left, right, center, top, bottom 或像素值指定渐变的中心点位置。
+*多色渐变*： 同线性渐变，可添加多个颜色值。
+*颜色位置*： 同线性渐变。
+
+#### 重复渐变: 
+重复线性渐变或径向渐变，形成周期性的图案。
+
+*语法*： background-image: repeating-linear-gradient([方向], 起始颜色, 终止颜色); 或 background-image: repeating-radial-gradient(半径大小 at 中心位置, 起始颜色, 终止颜色);
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20241010\351\200\211\346\213\251\345\231\250.md" "b/\346\226\271\345\207\244\344\270\271/20241010\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a75dab650220324c1f72d1665844009e9a6aa44c
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241010\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,428 @@
+# 径向渐变，选择器
+
+## 径向渐变
+
+格式
+
+```
+    background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
+
+	background-image: radial-gradient(100px at center,yellow ,green);
+```
+
+解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。
+
+中心点的位置可以是：at  left  right  center bottom  top。如果以像素为单位，则中心点参照的是盒子的左上角。
+
+
+格式举例：
+
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        div {
+            width: 250px;
+            height: 250px;
+            border: 1px solid #000;
+            margin: 20px;
+            float: left;
+        }
+
+        /*
+            径向渐变：
+            radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
+            中心点位置：at  left  right  center bottom  top
+        */
+
+        /*辐射半径为100px，中心点在中间*/
+        div:nth-child(1) {
+            background-image: radial-gradient(100px at center, yellow, green);
+        }
+
+        /*中心点在左上角*/
+        div:nth-child(3) {
+            background-image: radial-gradient(at left top, yellow, green);
+        }
+
+        div:nth-child(2) {
+            background-image: radial-gradient(at 50px 50px, yellow, green);
+        }
+
+        /*设置不同的颜色渐变*/
+        div:nth-child(4) {
+            background-image: radial-gradient(100px at center,
+            yellow 0%,
+            green 30%,
+            blue 60%,
+            red 100%);
+        }
+
+        /*如果辐射半径的宽高不同，那就是椭圆*/
+        div:nth-child(5) {
+            background-image: radial-gradient(100px 50px at center, yellow, green);
+        }
+
+    </style>
+
+```
+
+**举例：**利用径向渐变和边框圆角的属性，生成按钮。代码如下：
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CSS3 渐变</title>
+    <style>
+
+        div:nth-child(1) {
+            width: 200px;
+            height: 200px;
+            margin: 40px auto;
+            border-radius: 100px;
+            background-color: yellowgreen;
+        }
+
+        div:nth-child(2) {
+            width: 200px;
+            height: 200px;
+            margin: 40px auto;
+            border-radius: 100px;
+            background-color: yellowgreen;
+            background-image: radial-gradient(
+                    200px at 100px 100px,
+                    rgba(0, 0, 0, 0),
+                    rgba(0, 0, 0, 0.5)
+            );
+        }
+    </style>
+
+```
+
+# clip-path：裁剪出元素的部分区域做展示
+
+`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
+
+虽然`clip-path`不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
+
+举例：（鼠标悬停时，放大裁剪的区域）
+
+```css
+    .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);
+    }
+```
+
+`clip-path`属性的好处是，即使做了任何裁剪，**容器的占位大小是不变的**。比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。
+
+
+# CSS样式表和选择器
+
+## CSS 语法
+
+**语法格式：**（其实就是键值对）
+
+```html
+选择器{ 属性名: 属性值; 属性名: 属性值; }
+```
+
+或者可以写成：
+
+```css
+选择器 {
+    k: v;
+    k: v;
+    k: v;
+    k: v;
+}
+选择器 {
+    k: v;
+    k: v;
+    k: v;
+    k: v;
+}
+```
+
+-   选择器代表页面上的某类元素，选择器后一定是大括号。
+-   属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
+-   冒号和属性值之间可以留一个空格（编程习惯的经验）。
+-   如果一个属性有多个值的话，那么多个值用**空格**隔开。
+
+### css 代码的注释
+
+ /*
+    	具体的注释
+	*/
+
+
+## CSS 的一些简单常见的属性
+
+**字体颜色：**（c）
+
+```html
+color:red;
+```
+
+color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制(后期详细讲)。
+
+**字号大小：**（fos）
+
+```html
+font-size:40px;
+```
+
+font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。
+
+**背景颜色：**（bgc）
+
+```html
+background-color: blue;
+```
+
+background 就是“背景”。
+
+**加粗：**（fwb）
+
+```html
+font-weight: bold;
+```
+
+font 是“字体” weight 是“重量”的意思，bold 粗。
+
+**不加粗：**（fwn）
+
+```html
+font-weight: normal;
+```
+
+normal 就是正常的意思。
+
+**斜体：**（fsi）
+
+```html
+font-style: italic;
+```
+
+italic 就是“斜体”。
+
+**不斜体：**（fsn）
+
+```html
+font-style: normal;
+```
+
+**下划线：**（tdu）
+
+```html
+text-decoration: underline;
+```
+
+decoration 就是“装饰”的意思。
+
+**没有下划线：**（tdn）
+
+```html
+text-decoration:none;
+```
+
+## CSS 的书写方式——行内，内嵌，外链
+
+### 1、CSS 和 HTML 结合方式一：行内样式
+
+采用 style 属性。范围只针对此标签适用。
+
+该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
+
+
+### 2、CSS 和 HTML 结合方式二：内嵌样式表
+
+在 head 标签中加入`<style>`标签，对多个标签进行统一修改，范围针对此页面。
+
+该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
+
+
+### 3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件
+
+**引入样式表文件**的方式又分为两种：
+
+-   （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
+
+-   （2）**采用 import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
+
+> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。
+
+-   `stylesheet`：定义的样式表
+-   `alternate stylesheet`：候选的样式表
+
+## CSS 的四种基本选择器
+
+**基本选择器：**
+
+-   标签选择器：针对**一类**标签
+-   ID 选择器：针对某**一个**特定的标签使用
+-   类选择器：针对**你想要的所有**标签使用
+-   通用选择器（通配符）：针对所有的标签都适用（不建议使用）
+
+### 1、标签选择器：选择器的名字代表 html 页面上的标签
+
+标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“**共性**”，无法描述某一个元素的“个性”。
+
+【总结】需要注意的是：
+
+（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
+
+（2）无论这个标签藏的多深，一定能够被选择上。
+
+（3）选择的所有，而不是一个。
+
+### 2、ID 选择器：规定用`#`来定义
+
+针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。
+
+id 选择器的选择符是“#”。
+
+任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
+
+-   （1）只能有字母、数字、下划线。
+-   （2）必须以字母开头。
+-   （3）不能和标签同名。比如 id 不能叫做 body、img、a。
+
+另外，特别强调的是：**HTML 页面，不能出现相同的 id，哪怕他们不是一个类型**。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！
+
+**一个标签可以被多个 css 选择器选择：**
+
+### 3、类选择器：规定用圆点`.`来定义
+
+、针对**你想要的所有**标签使用。优点：灵活。
+
+和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：
+
+-   特性 1：类选择器可以被多种标签使用。
+
+-   特性 2：同一个标签可以使用多个类选择器。用**空格**隔开。举例如下：（正确）
+
+### 4、通配符`*`：匹配任何标签
+
+通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。
+
+效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
+
+
+
+## CSS 的几种高级选择器
+
+**高级选择器：**
+
+-   后代选择器：用空格隔开
+-   交集选择器：选择器之间紧密相连
+-   并集选择器（分组选择器）：用逗号隔开
+-   伪类选择器
+
+### 1、后代选择器: 定义的时候用空格隔开
+
+对于`E F`这种格式，表示**所有属于 E 元素后代的 F 元素**，有这个样式。空格就表示后代。
+
+后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。
+
+后代选择器，描述的是祖先结构。
+
+举例 1：
+
+```html
+<style type="text/css">
+    .div1 p {
+        color: red;
+    }
+</style>
+```
+
+空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。
+
+这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
+
+举例：
+
+```html
+<style type="text/css">
+    h3 b i {
+        color: red;
+    }
+</style>
+```
+
+上方代码的意思是说：定义了`<h3>`标签中的`<b>`标签中的`<i>`标签的样式。
+同理：h3 和 b 和 i 标签不一定是连续紧挨着的，只要保持一个后代的关联即可。
+
+
+### 2、交集选择器：定义的时候紧密相连
+
+定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。
+
+如果后一个选择器是类选择器，则写为`div.special`；如果后一个选择器 id 选择器，则写为`div#special`。
+
+```css
+h3.special {
+    color: red;
+}
+```
+
+选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。
+
+
+### 3、并集选择器：定义的时候用逗号隔开
+
+三种基本选择器都可以放进来。
+
+举例：
+
+```css
+p,h1,.title1,#one {
+    color: red;
+}
+```
+
+## 作业
+
+```
+  .zx{
+            border: 1px solid;
+            width: 800px;
+            height: 400px;
+          
+
+            background-image:
+        repeating-linear-gradient(90deg, #ff0000b7 0%, #ff1900b7 4%, rgba(255, 255, 255, 0.4) 4%, rgba(255, 255, 255, 0.4) 8%),
+        repeating-linear-gradient(0deg, #00ff0db7 0%, #15ff00b7 6%, rgba(255, 255, 255, 0.4) 6%, rgba(255, 255, 255, 0.4) 12%);
+
+     
+        }
+
+        .zx1{
+            border: 1px solid;
+            width: 800px;
+            height: 400px;
+            background:repeating-linear-gradient(to right, #998aff80 0 16%, transparent 0 28%), repeating-linear-gradient(to bottom, #8ae8ff80 0 17%, transparent 0 28%);
+        }
+```
+
+效果图
+
+<img src="https://pic.imgdb.cn/item/6707e2c5d29ded1a8ce65e9c.png" alt="1.png">
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20241011(\344\274\252\347\261\273).md" "b/\346\226\271\345\207\244\344\270\271/20241011(\344\274\252\347\261\273).md"
new file mode 100644
index 0000000000000000000000000000000000000000..3d0f5da8e0ea1130e037a8b41dd64b8170f544fb
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241011(\344\274\252\347\261\273).md"
@@ -0,0 +1,72 @@
+### 伪类选择器
+
+-   CSS 和 HTML 结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表`
+-   CSS 四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器`
+-   CSS 几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
+-   CSS 样式优先级
+
+CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS 将网页**内容和显示样式进行分离**，提高了显示功能
+
+ sublime 中输入`<st`或者`<style`然后按 tab 键，可以自动生成的格式
+ <style type="text/css"></style>
+
+ type 表示“类型”，text 就是“纯文本”，css 也是纯文本。
+
+ css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
+
+ **语法格式：**（其实就是键值对）
+
+```html
+选择器{ 属性名: 属性值; 属性名: 属性值; }
+```
+
+-   选择器代表页面上的某类元素，选择器后一定是大括号。
+-   属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
+-   冒号和属性值之间可以留一个空格（编程习惯的经验）。
+-   如果一个属性有多个值的话，那么多个值用**空格**隔开。
+
+CSS 只有`/* */`这种注释，没有`//`这种注释
+
+CSS 的书写方式有三种：
+
+1. **行内样式**：在某个特定的标签里采用 style **属性**。范围只针对此标签。
+
+2. **内嵌样式**（内联样式）：在页面的 head 标签里里采用`<style>`**标签**。范围针对此页面。
+3. **外链样式**：引入外部样式表 CSS **文件**。这种引入方式又分为两种：
+   - 3.1 采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
+   - 3.2 采用 import 导入，必须写在`<style>`标签中。然后用类似于`@import url(a.css) ;`这种方式导入。
+
+   CSS 的书写方式有三种：
+
+1. **行内样式**：在某个特定的标签里采用 style **属性**。范围只针对此标签。
+
+2. **内嵌样式**（内联样式）：在页面的 head 标签里里采用`<style>`**标签**。范围针对此页面。
+3. **外链样式**：引入外部样式表 CSS **文件**。这种引入方式又分为两种：
+   - 3.1 采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
+   - 3.2 采用 import 导入，必须写在`<style>`标签中。然后用类似于`@import url(a.css) ;`这种方式导入。
+
+   所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
+
+（2）无论这个标签藏的多深，一定能够被选择上。
+
+（3）选择的所有，而不是一个。
+
+所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
+
+（2）无论这个标签藏的多深，一定能够被选择上。
+
+（3）选择的所有，而不是一个。
+
+**高级选择器：**
+
+-   后代选择器：用空格隔开
+-   交集选择器：选择器之间紧密相连
+-   并集选择器（分组选择器）：用逗号隔开
+-   伪类选择器
+
+后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。
+
+####  效果展示
+
+![](./pt/01.png)
+![](./pt/02.png)
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20241012(\347\273\247\346\211\277\345\222\214\345\261\202\345\217\240\346\200\247).md" "b/\346\226\271\345\207\244\344\270\271/20241012(\347\273\247\346\211\277\345\222\214\345\261\202\345\217\240\346\200\247).md"
new file mode 100644
index 0000000000000000000000000000000000000000..704f9852aef5ccf253f9e7b7929382927a6782a0
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241012(\347\273\247\346\211\277\345\222\214\345\261\202\345\217\240\346\200\247).md"
@@ -0,0 +1,151 @@
+# 05-CSS样式表的继承性和层叠性
+
+CSS样式表的继承性和层叠性是CSS中的两个核心概念，它们决定了样式如何应用到HTML元素上。
+
+## CSS的继承性
+
+继承性是指CSS属性从父元素传递到子元素的能力。某些CSS属性是可继承的，而另一些则不是。
+
+### 可继承的属性
+
+- 文字颜色（`color`）
+- 字体系列（`font-family`）
+- 字体大小（`font-size`）
+- 字体样式（`font-style`）
+- 字体粗细（`font-weight`）
+- 文本装饰（`text-decoration`）
+- 行高（`line-height`）
+
+### 不可继承的属性
+
+- 宽度和高度（`width`, `height`）
+- 边框（`border`）
+- 外边距（`margin`）
+- 内边距（`padding`）
+
+## CSS的层叠性
+
+层叠性是指当多个样式规则应用于同一个元素时，CSS如何解决冲突的能力。层叠性通过计算选择器的权重来工作。
+
+### 权重计算
+
+1. **内联样式**：权重最高，因为它直接应用于HTML元素。
+2. **ID选择器**：`#elementId` 的权重高于类选择器和标签选择器。
+3. **类选择器**：`.elementClass` 的权重高于标签选择器。
+4. **标签选择器**：`elementTag` 的权重最低。
+
+### 权重问题大总结
+
+- 如果权重相同，后来的规则会覆盖先前的规则（就近原则）。
+- 继承的样式的权重为0，因此它们总是可以被后来的规则覆盖。
+- `!important` 规则的权重最高，但应谨慎使用，因为它可能导致样式难以维护。
+
+### 深入权重问题
+
+#### 同一个标签携带多个类名
+
+当一个元素应用了多个类，并且这些类中有冲突的样式时，权重较高的类将胜出。
+
+#### `!important` 标记
+
+`!important` 可以提高单个属性的权重，使其优先级高于其他任何规则。
+
+```css
+p {
+    color: red !important;
+}
+```
+
+在使用 `!important` 时需要注意的几点：
+
+1. `!important` 只影响单个属性，而不是整个选择器。
+2. `!important` 不能提升继承样式的权重。
+3. `!important` 不影响就近原则。
+
+## CSS样式表的冲突总结
+
+1. 内联样式 > 内部样式表 > 外部样式表。
+2. ID选择器 > 类选择器 > 标签选择器。
+3. 外部样式表的ID选择器 > 内部样式表的标签选择器。
+
+## 知识回顾
+
+- **CSS属性**：了解如何设置文本样式和背景。
+- **class和id的区别**：class用于样式，可以重复；id用于脚本，唯一。
+- **选择器**：了解不同选择器的兼容性，如IE6、IE7和IE8。
+- **CSS两个性质**：继承性和层叠性，了解它们如何影响样式的应用。
+
+通过理解继承性和层叠性，我们可以更好地控制CSS样式的应用，解决样式冲突，并创建出更加灵活和可维护的样式表。
+
+####  主要代码
+```html
+<style>
+    .a h2 {
+        text-align: center;
+    }
+
+    .a {
+        background-color: pink;
+
+        height: 250px;
+        width: 350px;
+    }
+    </style>
+    <style>
+        /* 2、选择所有的bento */
+        .div>table,
+        bento {
+            background-color: greenyellow;
+            border: 1px solid pink;
+            padding: 10px;
+        }
+ </style>
+    <style>
+        /* 3选择id为fancy的plate */
+        .div>#fancty,plate{
+            background-color: goldenrod;
+            border: 1px solid green;
+            padding: 20px;
+        }
+    </style>
+     <style>
+    /* 4、选择plate里面的apple */
+    .div > .plate,apple{
+        background-color: royalblue;
+        border: 1px solid greenyellow;
+        padding: 10px;
+    }
+</style>
+<style>
+    /* 选择id为fancy的plate中的pickle */
+    #fancy>.plate,pickle{
+        background-color: pink;
+        border: 5px solid red;
+        padding: 30px;
+    }
+</style>
+<style>
+    /* 选择small的apple */
+    div>small,apple {
+        background-color: lightgreen;
+        padding: 20px;
+        border: 2px solid;
+    }
+</style>
+    <style>
+/* 选择small的orange */
+.table>small,orange{
+    background-color: pink;
+    border: 1px solid green;
+    padding: 10px;
+}
+</style>
+<style>
+    /* 选择bento中的small orange */
+    div>.bento.small,orange{
+        background-color: pink;
+        border: 5px solid gold;
+        padding: 10px;
+    }
+</style>
+```
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20241012\357\274\210\344\274\252\347\261\273\357\274\211.md" "b/\346\226\271\345\207\244\344\270\271/20241012\357\274\210\344\274\252\347\261\273\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c7979047e3ed7ecd87c372e365d54f4dd851b988
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241012\357\274\210\344\274\252\347\261\273\357\274\211.md"
@@ -0,0 +1,116 @@
+**静态伪类**：只能用于**超链接**的样式。如下：
+
+- `:link` 超链接点击之前
+- `:visited` 链接被访问过之后
+
+PS：以上两种样式，只能用于超链接。
+
+（2）**动态伪类**：针对**所有标签**都适用的样式。如下：
+
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+
+## 超链接a标签
+
+### 超链接的四种状态
+
+
+a标签有4种伪类（即对应四种状态），要求背诵。如下：
+
+- `:link`  	“链接”：超链接点击之前
+- `:visited` “访问过的”：链接被访问过之后
+- `:hover`	“悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+
+记住，在css中，这四种状态**必须按照固定的顺序写**：
+
+> a:link 、a:visited 、a:hover 、a:active
+
+如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
+
+**`a{}`和`a:link{}`的区别：**
+
+ - `a{}`定义的样式针对所有的超链接(包括锚点)
+ - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
+## 动态伪类举例
+
+我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。
+
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+##### 主要代码
+```html
+<style>
+    .a h2 {
+        text-align: center;
+    }
+
+    .a {
+        background-color: pink;
+
+        height: 250px;
+        width: 350px;
+    }
+    </style>
+    <style>
+        /* 2、选择所有的bento */
+        .div>table,
+        bento {
+            background-color: greenyellow;
+            border: 1px solid pink;
+            padding: 10px;
+        }
+ </style>
+    <style>
+        /* 3选择id为fancy的plate */
+        .div>#fancty,plate{
+            background-color: goldenrod;
+            border: 1px solid green;
+            padding: 20px;
+        }
+    </style>
+     <style>
+    /* 4、选择plate里面的apple */
+    .div > .plate,apple{
+        background-color: royalblue;
+        border: 1px solid greenyellow;
+        padding: 10px;
+    }
+</style>
+<style>
+    /* 选择id为fancy的plate中的pickle */
+    #fancy>.plate,pickle{
+        background-color: pink;
+        border: 5px solid red;
+        padding: 30px;
+    }
+</style>
+<style>
+    /* 选择small的apple */
+    div>small,apple {
+        background-color: lightgreen;
+        padding: 20px;
+        border: 2px solid;
+    }
+</style>
+    <style>
+/* 选择small的orange */
+.table>small,orange{
+    background-color: pink;
+    border: 1px solid green;
+    padding: 10px;
+}
+</style>
+<style>
+    /* 选择bento中的small orange */
+    div>.bento.small,orange{
+        background-color: pink;
+        border: 5px solid gold;
+        padding: 10px;
+    }
+</style>
+```
\ No newline at end of file
diff --git "a/\346\226\271\345\207\244\344\270\271/20241014(CSS\347\233\222\346\250\241\345\236\213).md" "b/\346\226\271\345\207\244\344\270\271/20241014(CSS\347\233\222\346\250\241\345\236\213).md"
new file mode 100644
index 0000000000000000000000000000000000000000..556512b132983c77386b659e6b3ecb654c931cdd
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241014(CSS\347\233\222\346\250\241\345\236\213).md"
@@ -0,0 +1,105 @@
+CSS盒模型是前端开发中的基础概念，它描述了HTML元素在页面上的表现形式。盒模型包括五个部分：内容（content）、内边距（padding）、边框（border）、外边距（margin）和可能的装饰性边框（如外阴影等）。盒模型的核心属性有：
+
+- `width` 和 `height`：控制内容区域的尺寸。
+- `padding`：内容与边框之间的空间。
+- `border`：围绕内容和内边距的边框。
+- `margin`：盒子与其他元素之间的空间。
+
+### 标准盒模型与IE盒模型
+
+- **标准盒模型**：`width` 和 `height` 只包含内容区域，不包括边框和内边距。
+- **IE盒模型**：`width` 和 `height` 包含内容区域、内边距和边框。
+
+### 盒模型的计算
+
+盒子的实际占有空间计算公式为：
+\[ \text{总宽度} = \text{左外边距} + \text{左边框} + \text{左内边距} + \text{宽度} + \text{右内边距} + \text{右边框} + \text{右外边距} \]
+\[ \text{总高度} = \text{上外边距} + \text{上边框} + \text{上内边距} + \text{高度} + \text{下内边距} + \text{下边框} + \text{下外边距} \]
+
+### Padding和Border
+
+- `padding` 可以有颜色，并且会填充所有边框内的区域。
+- `padding` 可以分别设置四个方向的值。
+- `border` 由宽度、样式和颜色组成，可以按方向设置不同的值。
+
+### 清除默认样式
+
+为了统一样式，通常会清除元素的默认`margin`和`padding`：
+
+```css
+* {
+    margin: 0;
+    padding: 0;
+}
+```
+
+### 利用Border绘制形状
+
+可以通过设置`border`的宽度和颜色来绘制简单的形状，如三角形：
+
+```css
+div {
+    width: 0;
+    height: 0;
+    border: 50px solid transparent;
+    border-top-color: red;
+    border-bottom: none;
+}
+```
+
+这会创建一个上边为红色，其他边透明的等腰三角形。
+
+以上是CSS盒模型的简要概述，涵盖了基本概念、盒模型的两种类型、尺寸计算、内边距和边框的使用，以及如何通过CSS清除默认样式和绘制简单形状。
+#### 三角形主要代码
+
+```html
+<style>
+    div{
+        margin-top: 10px;
+    }
+.d1{
+    width: 0px;
+    height: 0px;
+    border: 50px solid transparent;
+    border-top-color: pink;
+    border-bottom: none;
+    
+}
+.d2{
+    width: 0px;
+    height: 0px;
+    border: 50px solid transparent;
+    border-bottom-color: pink;
+    border-top: none;
+}
+.d3{
+    width: 0px;
+    height: 0px;
+    border: 50px solid transparent;
+   border-right-color:pink ;
+    border-left: none;
+}
+.d4{
+    width: 0px;
+    height: 0px;
+    border: 50px solid transparent;
+   border-left-color:pink ;
+    border-right: none;
+}
+.d5{
+    width: 0px;
+    height: 0px;
+    border-top: 50px solid red;
+    border-left: 30px solid transparent;
+    border-right: 30px solid transparent;
+}
+.d6{
+    width: 0px;
+    height: 0px;
+    border-bottom: 50px solid red;
+    border-left: 30px solid transparent;
+    border-right: 30px solid transparent;
+}</style>
+```
+#### 三角形效果展示图（课堂小练）
+![](./pt/三角形.PNG)
diff --git "a/\346\226\271\345\207\244\344\270\271/20241016(\346\265\256\345\212\250).md" "b/\346\226\271\345\207\244\344\270\271/20241016(\346\265\256\345\212\250).md"
new file mode 100644
index 0000000000000000000000000000000000000000..caf06e6e65b52a2362aaa0839317b1fe1c95101e
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241016(\346\265\256\345\212\250).md"
@@ -0,0 +1,232 @@
+## 效果展示
+![浮动](./pt/浮动.png)
+![公告](./pt/公告.png)
+## 代码
+```html
+<style>
+        * {
+            margin: 0px;
+            padding: 0px;
+        }
+
+        .box {
+            height: 600px;
+            width: 970px;
+            border: 1px solid pink;
+            float: left;
+        }
+
+        .A {
+            height: 103px;
+            width: 970px;
+            float: left;
+        }
+
+        .a1 {
+            height: 103px;
+            width: 277px;
+            float: left;
+            background-color: red;
+        }
+
+        .a2 {
+            height: 49px;
+            width: 137px;
+            float: right;
+            background-color: green;
+            margin-bottom: 8px;
+        }
+
+        .a3 {
+            height: 46px;
+            width: 670px;
+            float: right;
+            background-color: green;
+        }
+
+        .boty {
+            width: 970px;
+            height: 435px;
+            float: left;
+            margin-top: 8px;
+            margin: 0 auto;
+        }
+
+        .yellow {
+            width: 310px;
+            height: 435px;
+            background-color: yellow;
+            float: left;
+            margin-top: 8px;
+        }
+
+        .bp {
+            width: 650px;
+            height: 400px;
+            float: left;
+            margin-bottom: 10px;
+        }
+
+        .sky_blue1 {
+            width: 450px;
+            height: 240px;
+            background-color: skyblue;
+            float: left;
+            margin-left: 10px;
+            margin-top: 8px;
+        }
+
+        .sky_blue2 {
+            width: 450px;
+            height: 110px;
+            background-color: skyblue;
+            float: left;
+            margin-left: 10px;
+            margin-top: 10px;
+        }
+
+        .sky_blue3 {
+            width: 450px;
+            height: 30px;
+            background-color: skyblue;
+            float: left;
+            margin-left: 10px;
+            margin-top: 10px;
+        }
+        .purple {
+            width: 190px;
+            height: 400px;
+            background-color: purple;
+            float: right;
+        }
+        .blue {
+            width: 650px;
+            height: 25px;
+            background-color: blue;
+            margin-top: 10px;
+            margin-left: 10px;
+            float: left;
+        }
+        .bottom {
+            background-color: orange;
+            margin-top: 20px;
+            width: 970px;
+            height: 42px;
+            float: left;
+        }
+    </style>
+    <style>
+    .top {
+        border-top: 1px dashed gray;
+        width: 810px;
+        height: 20px;
+    }
+    .titly{
+        font-family: 黑体;
+        color: rgb(25, 25, 143);
+        float: left;
+    }
+
+    .many {
+        color: gray;
+        float: right;
+        margin-top: 22px;
+    }
+
+    .mamy a {
+        color:rgb(243, 160, 174);
+        text-decoration: none;
+    }
+
+    .body {
+        float: left;
+        margin-left: -20px;
+        height: 300px;
+        width: 800px;
+    }
+    ul li{
+        width: 800px;
+        margin-left: -10px;
+        list-style-type: none;
+        border-bottom: 1px dashed gray;
+        padding-bottom: 10px;
+        margin-bottom: 11px;
+    }
+    ul li a{
+        text-decoration: none;
+        color:rgb(243, 160, 174);
+        font-size: 14px;
+    }
+    .time{
+        float: right;
+        font-size: 14px;
+    }
+    .h{
+        color: rgb(243, 160, 174);
+        font-size: 11px;
+    }
+    .line{
+        background-image: linear-gradient(to right,blue,red);
+        width: 810px;
+        height: 5px;
+        margin-top: 27px;
+    }
+</style>
+```
+
+## CSS浮动与布局详细
+
+## 标准文档流（Normal Flow）
+- **特性**：
+  - **空白折叠**：多个空白字符折叠为一个空格。
+  - **高矮不齐，底边对齐**：块级元素高低不同，但底边对齐。
+  - **自动换行**：行内元素自动换行以填充容器。
+- **行内元素**（Inline Elements）：
+  - 与其他行内元素并排显示。
+  - 不能设置宽度和高度，宽度默认为内容宽度。
+- **块级元素**（Block Elements）：
+  - 独占一行，不与其他元素并排。
+  - 可以设置宽度和高度，宽度默认为父元素的100%。
+
+## 行内元素与块级元素的转换
+- **块级转行内**：
+  ```css
+  display: inline;
+  ```
+- **行内转块级**：
+  ```css
+  display: block;
+  ```
+
+## 浮动（Float）的性质
+- **脱标**：浮动元素脱离标准文档流，不占据原本的空间。
+- **互相贴靠**：浮动元素会彼此贴靠，直到没有足够的空间。
+- **字围效果**：浮动元素不会遮挡住标准流中的文本。
+- **收缩**：未设置宽度的浮动元素会收缩至其内容的宽度。
+
+## 浮动的清除（Clearing Floats）
+- **加高法**：确保浮动元素的父元素有明确的高度。
+- `clear:both;`：清除浮动的影响，但可能导致相邻元素的外边距（margin）失效。
+- **隔墙法**：在浮动元素之间插入一个清除浮动的元素，通常使用`<div style="clear:both;"></div>`。
+- `overflow:hidden;`：使用溢出隐藏来清除浮动，使父元素能包含浮动子元素。
+
+## 浏览器兼容性问题
+- **微型盒子**：IE6不支持高度小于12px的盒子，解决方法是使用`_font-size:0;` hack。
+- `overflow:hidden;`：IE6不兼容使用`overflow:hidden;`来清除浮动，解决方法是添加`_zoom:1;` hack。
+
+## 浮动中的margin
+- **塌陷**：竖直方向的margin不叠加，取较大的值。
+- `margin:0 auto;`：用于水平居中块级元素，需要元素有明确宽度。
+- **父子距离**：使用padding而非margin来表达父子元素之间的距离。
+
+## IE6的margin问题
+- **双倍margin bug**：连续浮动的元素如果携带与浮动方向相同的margin，队首元素的margin可能会加倍。
+  - 解决方案：使浮动方向和margin方向相反，或者使用IE6 hack。
+- **3px bug**：IE6中，浮动元素与非浮动元素相邻时可能出现的间距问题。
+  - 解决方案：避免使用margin表达父子之间的距离，使用padding代替。
+
+## 其他
+- **Fireworks**：Adobe的设计软件，常用于网页设计和原型制作，默认文件格式为png。
+- `text-indent: 2em;`：用于实现首行缩进，2em相当于两个汉字的宽度。
+
+通过这些简记，可以快速回顾和理解CSS中的浮动和布局相关的概念、性质以及浏览器兼容性问题。在实际的网页设计和开发中，这些知识点是非常重要的基础。
diff --git "a/\346\226\271\345\207\244\344\270\271/20241018(\345\256\232\344\275\215).md" "b/\346\226\271\345\207\244\344\270\271/20241018(\345\256\232\344\275\215).md"
new file mode 100644
index 0000000000000000000000000000000000000000..aeca24cf8fbd170dc1775063e05b3042d15f2bba
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241018(\345\256\232\344\275\215).md"
@@ -0,0 +1,168 @@
+## 效果展示
+![](./pt/悬停.gif)
+![](./pt/导航栏不遮住.png)
+![](./pt/图标.png)
+
+## 代码
+```html
+<style>
+    .A {
+        margin: 0;
+        padding: 0;
+        width: 500px;
+        height: 500px;
+        border: 1px solid red;
+        position: absolute;
+    }
+    .a {
+        background-color: pink;
+        width: 100%;
+        height: 60px;
+    }
+    .b {
+        padding-top: 60px;
+    }
+</style>
+<style>
+.A{
+   position: relative;
+   display:inline-block;
+   cursor: pointer;
+}
+.A .a{
+    
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: pink;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+   
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 50%;
+    margin-left: -30px;
+
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+.A:hover .a{
+    visibility: visible;
+    opacity: 1;
+}
+</style>
+<style>
+    div{
+            background-image: url(./pt/图标.png);
+            width: 241px;
+            height: 163px;
+            margin-bottom: 10px;
+        }
+
+    .d1 {
+        background-position: -1px -1px;
+        width: 70px;
+        height: 76px;
+    }
+
+    .d2 {
+        background-position: -82px 0;
+        width: 65px;
+        height: 81px;
+    }
+
+    .d3 {
+        background-position: -6px -83px;
+        width: 66px;
+        height: 73px;
+        margin-left: 5px;
+    }
+
+    .d4 {
+        background-position: -88px -82px;
+        width: 57px;
+        height: 74px;
+        margin-left: 6px;
+    }
+
+    .d5 {
+
+
+        background-position: -159px 0;
+        width: 70px;
+        height: 75px;
+    }
+
+    .d6 {
+        background-position: -161px -81px;
+        width: 75px;
+        height: 79px;
+    }
+
+    p {
+        font-size: 40px;
+        position: absolute;
+        margin-top: 15px;
+        margin-left: 75px;
+    }
+</style>
+```
+## CSS定位属性
+
+CSS定位属性包括绝对定位、相对定位和固定定位三种方式
+
+## 相对定位
+- `position: relative;` 用于微调元素位置。
+- 通过 `left` 和 `top` 属性进行微调，不脱离标准流。
+- 相对定位不脱标，原位置保留空间，不影响其他元素布局。
+
+### 示例代码
+```html
+<div class="div2" style="position: relative; left: 50px; top: 50px;">相对定位元素</div>
+```
+
+## 绝对定位
+- `position: absolute;` 用于定位元素到包含块的特定位置。
+- 脱离标准文档流，不影响其他元素布局。
+- 参考点可以是父元素，也可以是浏览器窗口的左上角或右下角。
+
+### 示例代码
+```html
+<div class="box" style="position: relative;">
+  <div class="absolute-element" style="position: absolute; top: 20px; left: 20px;">绝对定位元素</div>
+</div>
+```
+
+## 固定定位
+- `position: fixed;` 用于创建固定位置的元素，相对于浏览器窗口。
+- 即使页面滚动，固定定位元素也会停留在相同的屏幕位置。
+- IE6不兼容固定定位。
+
+### 示例代码
+```html
+<div style="position: fixed; bottom: 20px; right: 20px;">固定定位元素</div>
+```
+
+## z-index属性
+- 控制元素的堆叠顺序。
+- 具有更高 `z-index` 值的元素将覆盖具有较低值的元素。
+- 只有定位元素（absolute, relative, fixed）可以设置 `z-index`。
+- 默认 `z-index` 值为0。
+
+### 示例代码
+```html
+<div style="position: absolute; z-index: 10;">元素1</div>
+<div style="position: absolute; z-index: 5;">元素2</div>
+```
+
+## 定位元素居中
+- 绝对定位元素可以通过设置 `left: 50%` 和 `margin-left: -宽度的一半` 来居中。
+
+### 示例代码
+```html
+<div style="position: absolute; width: 200px; left: 50%; transform: translateX(-50%);">居中的绝对定位元素</div>
+```
+
+以上简记涵盖了CSS定位的基本概念、属性和一些实用技巧。
diff --git "a/\346\226\271\345\207\244\344\270\271/20241021(\347\262\230\346\200\247\357\274\214\351\200\211\346\213\251\345\231\250).md" "b/\346\226\271\345\207\244\344\270\271/20241021(\347\262\230\346\200\247\357\274\214\351\200\211\346\213\251\345\231\250).md"
new file mode 100644
index 0000000000000000000000000000000000000000..e697e2af85c50430f9bba4f4fc870ad81249db99
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241021(\347\262\230\346\200\247\357\274\214\351\200\211\346\213\251\345\231\250).md"
@@ -0,0 +1,133 @@
+# 定位属性（二）
+## 固定定位（position：fixed；）
+相对浏览器的的窗口进行定位，无论页面如何滚动，这个盒子的显示不变，一般用于创建导航栏、页脚、广告横幅等。
+
+*例：*
+```css
+.fixed-element {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 60px;
+  height: 60px;
+  background-color: red;
+}
+```
+## 粘性定位（position：sticky；）
+在页面滚动到特定位置之前表现的想相对定位的元素，但当页面滚动到  某个 点时，它就会像固定定位一样固定在屏幕上。这种定位方式非常适合创建在页面滚动时固定视图中的导航栏或侧边栏。
+
+*例：*
+```css
+.sticky-element {
+  position: sticky;
+  top: 0; /* 当页面滚动到元素顶部与视口顶部重合时，元素将固定在顶部 */
+  background-color: blue;
+  padding: 10px;
+  font-size: 20px;
+}
+```
+```html
+<div class="sticky-element">粘性定位元素</div>
+<p>一些文本内容...</p>
+<!-- 页面内容 -->
+<p>更多的文本内容...</p>
+```
+**注意**
+
+粘性定位的元素必须有一个相对于其长流位置的偏移量，这意味着它不能在没有top、right、bottom或left属性的情况下使用。此外，粘性定位元素的滚动行为是由其最近的已定位（非static）祖先元素决定的，如果没有这样的祖先元素，则由初始包含块决定
+
+## z-index 属性
+- `z-index` 是 CSS 中的一个属性，用于控制元素的堆叠顺序。在 CSS 中，元素可以重叠，`z-index` 属性决定了这些重叠元素的前后顺序。具有更高 z-index 值的元素将会覆盖具有较低 `z-index` 值的元素。
+
+- `z-index` 只在定位元素（即设置了 `position` 性为 `relative`、`absolute`、`fixed` 或 `sticky` 的元素）上有效。对于没有定位的元素（即 `position` 属性为 `static` 的元素），`z-index` 是不起作用的。
+
+- `z-index` 可以取任何整数，包括负数。如果没有指定 `z-index` 值，元素将按照它们在 HTML 中出现的顺序堆叠，即后出现的元素会覆盖先出现的元素。
+
+*例：*
+```css
+.box1 {
+  position: relative;
+  background-color: red; 
+  width: 100px;
+  height: 100px;
+   z-index: 1;
+}
+.box2{
+background-color: blue;
+  position: absolute;
+  top: 20px;
+  left: 20px; 
+  z-index: 2;
+}
+/* 蓝色盒子在红色盒子上面 */
+```
+**注意：**
+
+- z-index 只影响定位元素的层叠上下文。
+- z-index 可以是任何整数，包括负值。
+- 如果两个定位元素的 z-index 相同，则它们覆盖的顺序将由它们在 HTML 文档中出现的顺序决定。
+- z-index 值仅在元素的层叠上下文中有效，这意味着 z-index 值只与父元素的 z-index 值有关。
+- 如果一个元素的父元素有 z-index 值，那么这个元素的 z-index 值是相对于父元素的 z-index 值来计算的。
+
+## css3属性选择器
+CSS3 的属性选择器是一种选择元素的方法，它允许你根据元素的属性及其值来选择它们。属性选择器的基本语法是使用方括号 `[]` 来包围属性名，如果需要匹配特定的属性值，则在方括号内加上等号 `=` 和相应的值。
+
+### 属性选择器主要有以下几种样式：
+
+1. **存在属性选择器**：
+   当你只想选择具有特定属性的元素，而不考虑属性值时，可以使用这种选择器。例如，选择所有具有 `type` 属性的 `<input>` 元素：
+   ```css
+   input[type] {
+     /* 样式规则 */
+   }
+   ```
+
+2. **完全匹配属性选择器**：
+   当你想选择属性值完全匹配特定值的元素时，可以使用等号 `=`。例如，选择所有 `type` 属性值为 `text` 的 `<input>` 元素：
+   ```css
+   input[type="text"] {
+     /* 样式规则 */
+   }
+   ```
+
+3. **部分匹配属性选择器**：
+   对于属性值由多个单词或字符组成的属性，你可以使用 `~=` 来选择属性值中包含特定值的元素。例如，选择所有 `class` 属性值中包含 `admin` 的元素：
+   ```css
+   [class~="admin"] {
+     /* 样式规则 */
+   }
+   ```
+
+4. **开始匹配属性选择器**：
+   使用 `^=` 来选择属性值以特定字符串开头的元素。例如，选择所有 `id` 属性值以 `header-` 开头的元素：
+   ```css
+   [id^="header-"] {
+     /* 样式规则 */
+   }
+   ```
+
+5. **结束匹配属性选择器**：
+   使用 `$=` 来选择属性值以特定字符串结尾的元素。例如，选择所有 `class` 属性值以 `-footer` 结尾的元素：
+   ```css
+   [class$="-footer"] {
+     /* 样式规则 */
+   }
+   ```
+
+6. **包含匹配属性选择器**：
+   使用 `*=` 来选择属性值中包含特定字符串的元素。例如，选择所有 `class` 属性值中包含 `highlight` 的元素：
+   ```css
+   [class*="highlight"] {
+     /* 样式规则 */
+   }
+   ```
+
+7. **多个值的属性选择器**：
+   当属性可以有多个值时，可以使用 `|=` 来选择属性值的完整单词与特定值匹配的元素。例如，选择所有 `lang` 属性值为 `en` 或以 `en-` 开头的元素：
+   ```css
+   [lang|="en"] {
+     /* 样式规则 */
+   }
+   ```
+
+属性选择器提供了一种非常强大的选择元素的方法，允许开发者根据元素的属性来应用样式，而不仅仅是根据元素的类型或类名。这使得CSS的选择器更加灵活和强大。
diff --git "a/\346\226\271\345\207\244\344\270\271/20241025(\350\277\207\346\270\241).md" "b/\346\226\271\345\207\244\344\270\271/20241025(\350\277\207\346\270\241).md"
new file mode 100644
index 0000000000000000000000000000000000000000..869e2da5f26ae957323683ffc2b54704f21d1e7f
--- /dev/null
+++ "b/\346\226\271\345\207\244\344\270\271/20241025(\350\277\207\346\270\241).md"
@@ -0,0 +1,339 @@
+### 效果展示
+![](./pt/遥遥领先.gif)
+![](./pt/扑克牌.gif)
+![](./pt/小火箭.gif)
+![](./pt/小米商品.gif)
+
+### 主要代码
+```html
+<style>
+    html,body {
+        height: 100%;
+    }
+    body{
+        background-color: orange;
+    }
+    .A{
+        position: absolute;
+        left: 100px;
+        top: 600px;
+        height: 100px;
+        transform: rotate(45deg);
+    }
+    body:hover .A{
+        transition: all 2s;
+        transform: rotate(45deg) translate(0,-1000px);
+    }
+</style>
+
+<body>
+    <img class="A" src="./pt/小火箭.png" alt="">
+</body>
+<style>
+    body{
+        background-color: #eee;
+    }
+    .box{
+        width: 300px;
+        height: 440px;
+        margin: 100px auto;
+        position: relative;
+    }
+    img{
+        width: 100%;
+        top: 0;
+        left: 0;
+        position: absolute;
+        transition: all 1s;
+        transform-origin: center bottom;
+    }
+    .box:hover img:nth-child(1){
+        transform: rotate(-60deg)
+    }
+    .box:hover img:nth-child(2){
+        transform: rotate(-50deg)
+    }
+    .box:hover img:nth-child(3){
+        transform: rotate(-40deg)
+    }
+    .box:hover img:nth-child(4){
+        transform: rotate(-30deg)
+    }
+    .box:hover img:nth-child(5){
+        transform: rotate(-20deg)
+    }
+    .box:hover img:nth-child(6){
+        transform: rotate(-10deg)
+    }
+    .box:hover img:nth-child(7){
+        transform: rotate(0deg)
+    }
+    .box:hover img:nth-child(8){
+        transform: rotate(10deg)
+    }
+    .box:hover img:nth-child(9){
+        transform: rotate(20deg)
+    }
+    .box:hover img:nth-child(10){
+        transform: rotate(30deg)
+    }
+    .box:hover img:nth-child(11){
+        transform: rotate(40deg)
+    }
+    .box:hover img:nth-child(12){
+        transform: rotate(50deg)
+    }
+    .box:hover img:nth-child(13){
+        transform: rotate(60deg)
+    }
+  
+</style>
+<body>
+    <div class="box">
+        <img src="./pt/J.png" alt="">
+        <img src="./pt/Q.png" alt="">
+        <img src="./pt/J.png" alt="">
+        <img src="./pt/Q.png" alt="">
+        <img src="./pt/J.png" alt="">
+        <img src="./pt/Q.png" alt="">
+        <img src="./pt/J.png" alt="">
+        <img src="./pt/Q.png" alt="">
+        <img src="./pt/J.png" alt="">
+        <img src="./pt/Q.png" alt="">
+        <img src="./pt/J.png" alt="">
+        <img src="./pt/Q.png" alt="">
+    </div>
+</body>
+<style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: white;
+        }
+
+        .A {
+            width: 800px;
+            height: 320px;
+            margin: 80px auto;
+            padding-left: 20px;
+        }
+
+        .a{
+            width: 250px;
+            height: 300px;
+            margin-right: 20px;
+            position: relative;
+            top: 0;
+            transition: all .5s;
+            text-align: center;
+            float: left;
+            /* overflow: hidden; */
+        }
+
+        .a img {
+            margin-top: 30px;
+        }
+
+        .a .b {
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: yellow;
+            transition: all .5s;
+        }
+        .a:hover .b{
+            bottom: 0;
+        }
+        .a:hover{
+            top: -5px;
+            box-shadow: 0 0 5px pink;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="A">
+        <div class="a">
+            <img src="./pt/手环.png" alt="">
+        </div>
+        <div class="a">
+            <img src="./pt/电视机.png" alt="">
+            <span class="b"></span>
+        </div>
+        <div class="a">
+            <img src="./pt/手机.png" alt="">
+            <span class="b"></span>
+        </div>
+    </div>
+</body>
+<style>
+    .box {
+        width: 250px;
+        height: 250px;
+        background-color: red;
+        transition: all 2s;
+        font-size: 50px;
+        color: aliceblue;
+        margin: 0px auto;
+
+    }
+    .box:hover{
+        transform: rotate(360deg);
+    }
+</style>
+
+<body>
+    <div class="box">遥遥领先</div>
+</body>
+```
+### 内容
+
+text-shadow:设置文本的阴影
+eg:
+```
+text-shadow: 20px 27px 22px pink;
+```
+**参数解释：水平位移 垂直位移 模糊程度 阴影颜色。**
+
+
+
+## 盒模型中的 box-sizing 属性
+>属性值可以是: content-box , border-box。
+
+**外加模式：**（css的默认方式）
+```javascript
+	box-sizing: content-box;
+```
+盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
+
+
+**内减模式：**【需要注意】
+```javascript
+	box-sizing: border-box;
+```
+`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
+
+
+## 处理兼容性问题：私有前缀
+>可以**为浏览器添加不同的私有前缀**，属性就可以生效
+eg:
+```
+    -webkit-: 谷歌 苹果
+    -moz-:火狐
+    -ms-：IE
+    -o-：欧朋
+```
+
+
+
+
+## 边框
+>**边框圆角**和**边框阴影**这两个属性，应用十分广泛,兼容性较好
+
+
+### 边框圆角：`border-radius` 属性
+>圆有**水平半径**和**垂直半径**
+
+单个属性的写法：
+```
+    border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径
+
+	border-top-right-radius: 60px 120px;
+
+	border-bottom-left-radius: 60px 120px;
+
+	border-bottom-right-radius: 60px 120px;
+
+```
+
+复合写法：：
+```
+    border-radius: 60px/120px;             //参数：水平半径/垂直半径
+
+	border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
+
+	border-radius: 20px 60px;
+```
+
+
+最简洁的写法：（四个角的半径都相同时）:
+```
+	border-radius: 60px;
+```
+
+
+### 边框阴影：`box-shadow` 属性
+eg:
+```
+    box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+	box-shadow: 15px 21px 48px -2px #666;
+```
+
+**参数解释：**
+- 水平偏移：正值向右 负值向左。
+- 垂直偏移：正值向下 负值向上。
+- 模糊程度：不能为负值。
+
+
+### 边框图片
+综合属性eg:
+```
+   border-image: url("images/border.png") 27/20px round;
+```
+
+
+
+##  过渡：transition
+**综合属性**：
+```javascript
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+	transition: all 3s linear 0s;
+```
+
+
+
+## 2D转换
+>可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。
+
+
+### 1、缩放：`scale`
+eg：
+```javascript
+	transform: scale(x, y);
+	transform: scale(2, 0.5);
+```
+
+**参数解释：**
+- x：表示水平方向的缩放倍数。
+- y：表示垂直方向的缩放倍数。
+- 如果只写一个值就是等比例缩放。取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+
+
+
+### 2、位移：translate
+eg：
+```javascript
+	transform: translate(水平位移, 垂直位移);
+	transform: translate(-50%, -50%);
+```
+
+**参数解释：**
+- 参数为百分比，相对于自身移动。
+- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+
+
+### 3、旋转：rotate
+eg：
+```javascript
+	transform: rotate(角度);
+	transform: rotate(45deg);
+```
+
+**参数解释：**正值 顺时针；负值：逆时针。
+
+
+
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/01.png" "b/\346\226\271\345\207\244\344\270\271/pt/01.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7dfbba7ed374f97c79a37aec90be7010d2b699e2
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/01.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/02.png" "b/\346\226\271\345\207\244\344\270\271/pt/02.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cdb2c4d6623c319db14c2baeea20827b9a608676
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/02.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\345\205\254\345\221\212.png" "b/\346\226\271\345\207\244\344\270\271/pt/\345\205\254\345\221\212.png"
new file mode 100644
index 0000000000000000000000000000000000000000..421ea3892edfa1960bbb8cdd3237c1efa483e056
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\345\205\254\345\221\212.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\345\233\276\346\240\207.png" "b/\346\226\271\345\207\244\344\270\271/pt/\345\233\276\346\240\207.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ae1987f09f1b579227197fe9ba6f5467f1614144
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\345\233\276\346\240\207.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\345\257\274\350\210\252\346\240\217\344\270\215\351\201\256\344\275\217.png" "b/\346\226\271\345\207\244\344\270\271/pt/\345\257\274\350\210\252\346\240\217\344\270\215\351\201\256\344\275\217.png"
new file mode 100644
index 0000000000000000000000000000000000000000..79c3c34215c4dd7ee29eccc11d913f7fad49cad4
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\345\257\274\350\210\252\346\240\217\344\270\215\351\201\256\344\275\217.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\345\260\217\347\201\253\347\256\255.gif" "b/\346\226\271\345\207\244\344\270\271/pt/\345\260\217\347\201\253\347\256\255.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..5666b6048957314856063953245db1dc4e3685d1
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\345\260\217\347\201\253\347\256\255.gif" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\345\260\217\347\261\263\345\225\206\345\223\201.gif" "b/\346\226\271\345\207\244\344\270\271/pt/\345\260\217\347\261\263\345\225\206\345\223\201.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..9c4c9b108a53b66577a8d44db688d68161818a50
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\345\260\217\347\261\263\345\225\206\345\223\201.gif" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\346\202\254\345\201\234.gif" "b/\346\226\271\345\207\244\344\270\271/pt/\346\202\254\345\201\234.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..8e9922805c9bd50045c1d1a5b6333d838f74ca5e
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\346\202\254\345\201\234.gif" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\346\211\221\345\205\213\347\211\214.gif" "b/\346\226\271\345\207\244\344\270\271/pt/\346\211\221\345\205\213\347\211\214.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..d47087d65b9913127203123646e973e0cf6261ae
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\346\211\221\345\205\213\347\211\214.gif" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\346\265\256\345\212\250.png" "b/\346\226\271\345\207\244\344\270\271/pt/\346\265\256\345\212\250.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7a1b7d8a3c2c9447e34eebe822724f10b2a1a066
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\346\265\256\345\212\250.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\346\273\232\345\212\250\350\247\206\345\267\256.gif" "b/\346\226\271\345\207\244\344\270\271/pt/\346\273\232\345\212\250\350\247\206\345\267\256.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..83c190d640809c1c54a8baab71d76eb9f5d0688d
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\346\273\232\345\212\250\350\247\206\345\267\256.gif" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\347\272\277\346\200\247\346\270\220\345\217\230.png" "b/\346\226\271\345\207\244\344\270\271/pt/\347\272\277\346\200\247\346\270\220\345\217\230.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e09de477f917afb1c888402fbc30df4a425a7517
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\347\272\277\346\200\247\346\270\220\345\217\230.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\344\275\215\347\275\256.png" "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\344\275\215\347\275\256.png"
new file mode 100644
index 0000000000000000000000000000000000000000..86eb9996492ba8ca63613e6beb2e054c1ea9b57a
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\344\275\215\347\275\256.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\345\233\276\347\211\207.png" "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\345\233\276\347\211\207.png"
new file mode 100644
index 0000000000000000000000000000000000000000..30a7bb9825caf31d068cf6de82b6b11671048be4
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\345\233\276\347\211\207.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\345\260\272\345\257\270.mp4" "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\345\260\272\345\257\270.mp4"
new file mode 100644
index 0000000000000000000000000000000000000000..8d532041de737bc33bccf94f0d4f4fa271579fa8
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\345\260\272\345\257\270.mp4" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\351\207\215\345\244\215.png" "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\351\207\215\345\244\215.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1c5411e92e4869256c4ee2510e4966f9cc5a70cd
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\350\203\214\346\231\257\351\207\215\345\244\215.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\350\223\235\350\211\262\347\233\222\345\255\220.png" "b/\346\226\271\345\207\244\344\270\271/pt/\350\223\235\350\211\262\347\233\222\345\255\220.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8d18eaea06550c74445b7fbfa8b40ee19d86548a
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\350\223\235\350\211\262\347\233\222\345\255\220.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\350\277\233\351\230\266\344\275\234\344\270\232.png" "b/\346\226\271\345\207\244\344\270\271/pt/\350\277\233\351\230\266\344\275\234\344\270\232.png"
new file mode 100644
index 0000000000000000000000000000000000000000..efe24bc3759b838ad41fa809efe03a1d41392ae8
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\350\277\233\351\230\266\344\275\234\344\270\232.png" differ
diff --git "a/\346\226\271\345\207\244\344\270\271/pt/\351\201\245\351\201\245\351\242\206\345\205\210.gif" "b/\346\226\271\345\207\244\344\270\271/pt/\351\201\245\351\201\245\351\242\206\345\205\210.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..7c2f979b5bacedc31c0ea23a366dd817483c9f65
Binary files /dev/null and "b/\346\226\271\345\207\244\344\270\271/pt/\351\201\245\351\201\245\351\242\206\345\205\210.gif" differ
