diff --git "a/\345\220\264\344\275\263\346\225\217/20240904\350\257\276\345\240\202\347\254\224\350\256\260--md\346\226\207\346\241\243\344\270\200\344\272\233\345\260\217\346\212\200\345\267\247.md" "b/\345\220\264\344\275\263\346\225\217/20240904\350\257\276\345\240\202\347\254\224\350\256\260--md\346\226\207\346\241\243\344\270\200\344\272\233\345\260\217\346\212\200\345\267\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..de6684ddb161e6efb34bf0290e1350f2e1f9328e
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240904\350\257\276\345\240\202\347\254\224\350\256\260--md\346\226\207\346\241\243\344\270\200\344\272\233\345\260\217\346\212\200\345\267\247.md"
@@ -0,0 +1,13 @@
+# git流程
+先从远程班级仓库`fork`到一个远程个人仓库再`clone`到本地仓库。由本地仓库修改完毕后`push`到远程个人仓库，最后`pr(pull request)`到远程本地仓库
+>VS code中以md为后缀名的文件显示图片
+>![图片不显示时的提示文字](图片相对路径)
+# 一些技巧
+1. #几级标题
+2. *一个为斜体，两个为粗体，三个为斜粗体
+3. >为引用
+4. `为字体加上阴影背景（单个字），三个为段落
+5. |:-左对齐|:-:居中|-:右对齐| 
+6. 有序符号：1或者1）
+7. 无序符号：+ - *
+
diff --git "a/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\240\202\347\254\224\350\256\260--html\345\237\272\347\241\200.md" "b/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\240\202\347\254\224\350\256\260--html\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..746c2edd91edcf0a58235dde1e5b056593ad843d
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\240\202\347\254\224\350\256\260--html\345\237\272\347\241\200.md"
@@ -0,0 +1,23 @@
+# ![image-20240909110718247](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20240909110718247.png)
+
+# HTML的专有名词
+
+1.网页：由各种标记组成的一个页面就叫网页
+
+2.主页（首页）：一个网站的起始页面或者导航页面
+
+3.标记：比如<p>称为开始标记，</p>称为结束标记，也叫标签，每个标签都规定好了特殊的含义
+
+4.元素：比如<p>内容</p>称为元素
+
+5.属性：给每一个标签的辅助信息
+
+6.XHTML：符合xml语法标准的HTML
+
+7.DHTML:dynamic，动态的，是js+css+html合起来的页面
+
+8.HTTP：超文本传输协议，用来规定客户端浏览器和服务器交互时数据的一个格式
+
+9.SMTP:邮件传输协议
+
+10.FTP:文件传输协议
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\240\202\347\254\224\350\256\260--Git\345\233\236\346\273\232\345\222\214html\345\237\272\347\241\200.md" "b/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\240\202\347\254\224\350\256\260--Git\345\233\236\346\273\232\345\222\214html\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..75e8f0ef0f37a96437455223acb5cda77226d196
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\240\202\347\254\224\350\256\260--Git\345\233\236\346\273\232\345\222\214html\345\237\272\347\241\200.md"
@@ -0,0 +1,53 @@
+# git笔记
+
+1.git log---查看有几个版本
+
+2.git push -f---强制推送
+
+3.git status--查看状态
+
+4.git reset --hard (哈希值前4位)---回到某一个版本
+
+# 初识HTML
+
+1.<meta https-equiv="refresh" content="3;https://ww.baidu.com">
+上面这个标签的意思是说，3秒之后，自动跳转到百度页面，如果后面并没有网址，则表示3秒之后自动刷新一次
+
+2.编写HTML的规范：
+
+1. 所有标记元素都要正确的嵌套，不能交叉嵌套，正确举例：<h1><font></font></h1>
+2. 所有标记必须小写
+3. 所有标签必须闭合
+   - 双标签：<span></span>
+   - 单标签：<br>建议写成<br/>
+4. 所有的属性值必须加引号
+5. 所有的属性必须有值
+6. XHTML文档开头必须要有dtd文档类型定义
+
+3.HTML的基本语法特性：
+
+-  html对换行不敏感，对tab不敏感
+- 会折叠空白符
+
+4.排版标签：
+
+- h1
+
+- p
+
+- hr
+
+- br
+
+- div
+
+- span
+
+- center
+
+
+- pre
+
+
+- 由于空白的折叠性，因此有时想要保留大量空格时，可以写在预定义标签pre中
+
diff --git "a/\345\220\264\344\275\263\346\225\217/20240913\350\257\276\345\240\202\347\254\224\350\256\260--html\347\211\271\346\256\212\345\255\227\347\254\246.md" "b/\345\220\264\344\275\263\346\225\217/20240913\350\257\276\345\240\202\347\254\224\350\256\260--html\347\211\271\346\256\212\345\255\227\347\254\246.md"
new file mode 100644
index 0000000000000000000000000000000000000000..697c7c267783dc8ca54221f4339e50f232853724
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240913\350\257\276\345\240\202\347\254\224\350\256\260--html\347\211\271\346\256\212\345\255\227\347\254\246.md"
@@ -0,0 +1,34 @@
+# 特殊字符
+
+- &nbsp
+- &lt ＜
+- &gt ＞
+- &copy 版权@
+- &trade 商标
+- &amp 符号&
+- &quot 双引号
+- &apos 单引号
+
+想在页面上展示出某标签，例如p标签，可以写成&lt；p&gt；标签
+
+2. &lt；u&gt；标签---下划线
+
+- &lt；s&gt；标签或者&lt；del&gt；标签---被划掉的，在css样式中为line-through属性值
+- &lt；i&gt；标签或者&lt；em&gt；标签---斜体
+
+3. Windows：有很多字体，只支持有限的几种加粗效果，通常是400,600,900
+
+4. a标签中的target属性的blank值可以全新刷新一次并跳转到新页面
+
+5. 锚链接 
+
+   1.&lt;a name="">内容&lt;a>
+
+   2.&lt;a href="#名">&lt;/a>
+
+6. 图片标签，&lt;img src="图片的url" alt="图片不显示时，展示的文字" title="鼠标悬停时，展示的信息"/&gt;
+
+
+
+
+
diff --git "a/\345\220\264\344\275\263\346\225\217/20240914\350\257\276\345\240\202\347\254\224\350\256\260--\350\241\250\346\240\274.md" "b/\345\220\264\344\275\263\346\225\217/20240914\350\257\276\345\240\202\347\254\224\350\256\260--\350\241\250\346\240\274.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7d2070eab5fdc4929fc42e8f8bc9e51d5d8d53f0
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240914\350\257\276\345\240\202\347\254\224\350\256\260--\350\241\250\346\240\274.md"
@@ -0,0 +1,7 @@
+1.有序列表&lt;ul&gt;&lt;li&gt;
+
+无序列表&lt;ol&gt;&lt;li&gt;
+
+定义列表&lt;dl&gt;&lt;dd&gt;
+
+2.表格的&lt;thead&gt;&lt;tbody&gt;&lt;tfoot&gt;,如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead，tbody，tfoot的顺序显示内容
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20240918\350\257\276\345\240\202\347\254\224\350\256\260--\350\241\250\346\240\274\345\222\214\350\241\250\345\215\225.md" "b/\345\220\264\344\275\263\346\225\217/20240918\350\257\276\345\240\202\347\254\224\350\256\260--\350\241\250\346\240\274\345\222\214\350\241\250\345\215\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..273a247c78cf6380e872b7601159b42bec426c23
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240918\350\257\276\345\240\202\347\254\224\350\256\260--\350\241\250\346\240\274\345\222\214\350\241\250\345\215\225.md"
@@ -0,0 +1,64 @@
+#  表格`<table>`
+
+一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。 所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。 在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。 **`<table>`的属性：**
+
+- `border`：边框。像素为单位。
+- `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）
+- `width`：宽度。像素为单位。
+- `height`：高度。像素为单位。
+- `bordercolor`：表格的边框颜色。
+- `align`：**表格**的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签`<td>`进行设置）
+- `cellpadding`：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 **注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。**如果设置属性`dir="rtl"`，那就指的是内容到右边那条线的距离。
+- `cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
+- `bgcolor="#99cc66"`：表格的背景颜色。
+- `background="路径src/..."`：背景图片。 背景图片的优先级大于背景颜色。
+- `bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色
+- `bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置3D的效果。
+- `dir`：公有属性，单元格内容的排列方式(direction)。 可以 取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）
+
+### 单元格的合并
+
+单元格的属性：
+
+- `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
+- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
+
+# 表单`<form>`
+
+表单标签用`<form>`表示**，用于与服务器的交互。**表单就是收集用户信息的，就是让用户填写的、选择的。
+
+**属性：**
+
+- `name`：表单的名称，用于JS来操作或控制表单时使用；
+- `id`：表单的名称，用于JS来操作或控制表单时使用；
+- `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
+- `method`：表单数据的提交方式，一般取值：get(默认)和post
+
+注意：**表单和表格嵌套时，是在`<form>`标记中套`<table>`标记。**
+
+### `<input>`：输入标签（文本框）
+
+用于接收用户输入。
+
+```
+<input type="text" />
+```
+
+**属性：**
+
+- **`type="属性值"`**：文本类型。属性值可以是：
+  - `text`（默认）
+  - `password`：密码类型
+  - `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
+  - `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
+  - `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。属性值也是checked，可以省略。
+  - `hidden`：隐藏框，在表单中包含不希望用户看见的信息
+  - `button`：普通按钮，结合js代码进行使用。
+  - `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
+  - `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值
+  - `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
+  - `file`：文件选择框。 提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
+- **`value="内容"`**：文本框里的默认内容（已经被填好了的）
+- `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。 注意**size属性值的单位不是像素哦**。
+- `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
+- `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20240923\350\257\276\345\240\202\347\254\224\350\256\260--h5css.md" "b/\345\220\264\344\275\263\346\225\217/20240923\350\257\276\345\240\202\347\254\224\350\256\260--h5css.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fc7cbb33c410fca1c9fff36fcd61becb639e6870
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240923\350\257\276\345\240\202\347\254\224\350\256\260--h5css.md"
@@ -0,0 +1,77 @@
+# html5
+
+## 拖拽
+
+1.设置draggable=“true”属性之后，元素是可以拖拽的，但是拖拽之后要做的事情就涉及到事件监听（js技术）
+
+2.拖拽元素的事件监听：（应用于拖拽元素）
+
+- ondragstart --当拖拽开始时调用
+- ondragleave --当鼠标离开拖拽元素时调用
+- ondragend --当拖拽结束时调用
+- ondrag --整个过程中都会调用
+
+
+
+<!--eg：1.拿到节点---let box=document.getElementById('标签ID名')2.给拿到的节点的指点事件绑定一个函数--box.ondragstart=function(){console.log('')}-->
+
+## 全屏
+
+开启/关闭全屏显示
+
+requestFullscreen()---让元素开启全屏显示
+
+cancelFullscreen()---让元素关闭全屏显示
+
+## web存储
+
+### h5中有两种存储方式
+
+1.window.sessionStorage会话存储
+
+- 保存在内存中
+- 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁
+- 在同一个窗口下数据可以共享
+
+2.window.localStorage本地存储
+
+- 有可能保存在浏览器内存中，也可能保存在硬盘里
+- 永久生效，除非手动删除
+- 可以多窗口共享
+
+### web存储的特性
+
+1. 设置、读取方便
+
+2. 容量较大，sessionStorage约5M，localStorage约20M
+
+3. 只能存储字符串，可以将对象JSON.stringify()编码后存储
+
+   # css
+
+   ## 绝对单位
+
+   1 in=2.54cm=25.4mm=72pt=6pc
+
+   各种单位的含义：
+
+   - in：英寸
+   - cm：厘米
+   - mm：毫米
+   - pt：点points（1点=1/72英寸）
+   - pc：皮卡picas(1皮卡=12点)
+
+   ## 相对单位
+
+   px像素 em：印刷单位相当于12个点 %：百分比，相对于周围文字的大小
+
+   ## 如何让单行文本垂直居中
+
+   小技巧：如果一段文本只有一行，设置行高=盒子高，就可以保证文本垂直居中
+
+   记住：行高指的是一行的高度，并不是文字的高
+
+   
+
+
+
diff --git "a/\345\220\264\344\275\263\346\225\217/20240925\350\257\276\345\240\202\347\254\224\350\256\260---\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\345\220\264\344\275\263\346\225\217/20240925\350\257\276\345\240\202\347\254\224\350\256\260---\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e594adc51271b496561c7d5df58e6727a80c22af
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240925\350\257\276\345\240\202\347\254\224\350\256\260---\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md"
@@ -0,0 +1,67 @@
+#  字号、行高、字体三大属性
+
+1. 字号：font-size
+2. 行高：line-height
+3. 字体：font-family
+4. 是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）
+
+​      格式：font: 加粗 字号/行高/ 字体
+
+**上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。**
+
+5. 字体属性的说明：
+
+   （1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
+
+   ```
+   	font-family: "华文彩云";
+   ```
+
+   上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。
+
+   （2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）
+
+   ```
+   	font-family: "微软雅黑","宋体";
+   ```
+
+   上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
+
+   （3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
+
+   ```
+   	font-family: "Times New Roman","微软雅黑","宋体";
+   ```
+
+   上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体
+
+   （4）**行高可以用百分比**，表示字号的百分之多少。
+
+6. 在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
+
+   # 文本属性
+
+   - `letter-spacing: 0.5cm ;` 单个字母之间的间距
+
+   - `word-spacing: 1cm;` 单词之间的间距
+
+   - `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
+
+   - `color:red;` 字体颜色
+
+   - `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（**在当前容器的中间**）、justify
+
+   - `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
+
+   - direction 设置文本方向 ltr /rtl
+
+   - text-indent 缩进元素中文本的首行
+   
+[代码效果图](http://sk7rge758.hd-bkt.clouddn.com/1.png)
+[代码效果图（变化）](http://sk7rge758.hd-bkt.clouddn.com/2.png)
+[代码](http://sk7rge758.hd-bkt.clouddn.com/3.png)
+     
+
+   
+
+   
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20240929\350\257\276\345\240\202\347\254\224\350\256\260--\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\345\220\264\344\275\263\346\225\217/20240929\350\257\276\345\240\202\347\254\224\350\256\260--\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8d9d4ac72d107d3909c4c7380db04cbb78f1a9e9
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240929\350\257\276\345\240\202\347\254\224\350\256\260--\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -0,0 +1,165 @@
+# 文本属性
+## 列表属性
+1.简写属性叫做`list-style`，它的作用是：将上面的多个属性写在一个声明中
+![](../imgs/list.PNG)
+
+##  overflow属性：超出范围的内容要怎么处理
+
+`overflow`属性的属性值可以是：
+
+- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
+- `hidden`：不显示超过对象尺寸的内容。
+- `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
+- `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。
+
+## 滤镜
+
+这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：
+
+```
+	<img src="3.jpg" style="filter:gray()"
+```
+
+
+
+# 背景属性
+
+##  background 的常见背景属性
+
+**css2.1** 中，常见的背景属性有以下几种：（经常用到，要记住）
+
+- `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`，它的作用是：将上面的多个属性写在一个声明中。
+
+##  background-color：背景颜色的表示方法
+
+### 用英语单词表示：
+
+```
+background-color: red;
+```
+
+### RGB表示法
+
+RGB 表示三原色“红”red、“绿”green、“蓝”blue。
+
+光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
+
+比如红色：
+
+```
+background-color: rgb(255,0,0);
+```
+
+###  RGBA 表示法
+
+```
+    background-color: rgba(0, 0, 255, 0.3);
+
+    border: 30px solid rgba(0, 255, 0, 0.3);
+```
+
+**代码解释**：
+
+- RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。
+
+- R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。
+
+  ### 十六进制表示法
+
+  比如红色：
+
+  ```
+  background-color: #ff0000
+  ```
+
+**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
+
+比如：
+
+```
+	background-color:#ff0000;
+```
+
+等价于：
+
+```
+	background-color:#f00
+```
+
+## `background-repeat`属性
+
+`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
+
+- `no-repeat`（不要平铺）
+- `repeat-x`（横向平铺）
+- `repeat-y`（纵向平铺）
+
+## `background-position`属性
+
+**1、用像素值描述属性值：**
+
+格式如下：
+
+```
+	background-position:向右偏移量 向下偏移量;
+```
+
+属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
+
+**2、用单词描述属性值：**
+
+格式如下：
+
+```
+	background-position: 描述左右的词 描述上下的词;
+```
+
+- 描述左右的词：left、center、right
+- 描述上下的词：top 、center、bottom
+
+##  background-attachment 属性
+
+- ```
+  background-attachment:scroll;
+  ```
+
+   
+
+  设置背景图片是否固定。属性值可以是：
+
+  - `fixed`（背景就会被固定住，不会被滚动条滚走）。
+  - `scroll`（与fixed属性相反，默认属性）
+
+## `background-size`属性：背景尺寸
+
+格式举例：
+
+```
+	/* 宽、高的具体数值 */
+	background-size: 500px 500px;
+
+	/* 宽高的百分比（相对于容器的大小） */
+	background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;
+
+	background-size: 100% auto;  //这个属性可以自己试验一下。
+
+	/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
+	background-size: cover;
+
+	/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。  */
+	background-size: contain;
+```
+# 作业效果图展示
+![第一至三题](../imgs/9-29/929.PNG)
+![第四题](../imgs/9-29/929-2.PNG)
+![第五题](../imgs/9-29/929-3.PNG)
+# 代码
+![css代码](../imgs/9-29/929代码.PNG)
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20240930\350\257\276\345\240\202\347\254\224\350\256\260--\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\345\220\264\344\275\263\346\225\217/20240930\350\257\276\345\240\202\347\254\224\350\256\260--\350\203\214\346\231\257\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..aeb1329457420fe33ae03d0ae8662c75a4fbf509
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20240930\350\257\276\345\240\202\347\254\224\350\256\260--\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -0,0 +1,130 @@
+ background 综合属性
+
+background属性和border一样，是一个综合属性，可以将多个属性写在一起。(在[盒子模型](https://gitee.com/link?target=http%3A%2F%2Fwww.cnblogs.com%2Fsmyhvae%2Fp%2F7256371.html)这篇文章中专门讲到border)
+
+举例1:
+
+```
+	background:red url(1.jpg) no-repeat 100px 100px fixed;
+```
+
+等价于：
+
+```
+	background-color:red;
+	background-image:url(1.jpg);
+	background-repeat:no-repeat;
+	background-position:100px 100px;
+	background-attachment:fixed;
+```
+
+##  背景原点：`background-origin` 属性
+
+`background-origin` 属性：控制背景从什么地方开始显示。
+
+格式举例：
+
+```
+	/* 从 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-origin: border-box;
+
+	background-clip: content-box;
+```
+
+上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉
+
+##  同时设置多个背景
+
+我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
+
+代码举例：
+
+```
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        .box {
+            height: 416px;
+            border: 1px solid #000;
+            margin: 100px auto;
+            /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
+            background: url(images/bg1.png) no-repeat left top,
+            url(images/bg2.png) no-repeat right top,
+            url(images/bg3.png) no-repeat right bottom,
+            url(images/bg4.png) no-repeat left bottom,
+            url(images/bg5.png) no-repeat center;
+        }
+    </style>
+</head>
+<body>
+<div class="box"></div>
+</body>
+</html>
+```
+
+##  渐变：background-image
+
+渐变分为：
+
+- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
+- 重复渐变。
+
+###  线性渐变
+
+格式：
+
+```
+    background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+
+    background-image: linear-gradient(to right, yellow, green);
+```
+
+参数解释：
+
+- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
+
+###  径向渐变
+
+格式：
+
+```
+	background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
+
+	background-image: radial-gradient(100px at center,yellow ,green);
+```
+
+解释：围绕中心点做渐变，半径是100px，从黄色到绿色做渐变。
+
+中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
+
+当然，还有其他的各种参数
+
+## clip-path：裁剪出元素的部分区域做展示
+
+`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20241009\350\257\276\345\240\202\347\254\224\350\256\260--css\351\200\211\346\213\251\345\231\250.md" "b/\345\220\264\344\275\263\346\225\217/20241009\350\257\276\345\240\202\347\254\224\350\256\260--css\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..680ef37e60983b6371e1db59a30a97596cbe65cb
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241009\350\257\276\345\240\202\347\254\224\350\256\260--css\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,47 @@
+# 知识点
+## css语法
+语法格式：（其实就是键值对）
+选择器{ 属性名: 属性值; 属性名: 属性值; }
++ 选择器代表页面上的某类元素，选择器后一定是大括号。
++ 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
++ 冒号和属性值之间可以留一个空格（编程习惯的经验）。
++ 如果一个属性有多个值的话，那么多个值用空格隔开。
+## 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的四种基本选择器
+ ### 基本选择器：
++ 标签选择器：针对一类标签
++ ID 选择器：针对某一个特定的标签使用，规定用#来定义
+ + 任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
+1. 只能有字母、数字、下划线。
+2. 必须以字母开头。
+3. 不能和标签同名。比如 id 不能叫做 body、img、a
++ 类选择器：针对你想要的所有标签使用
++ 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
+
+## css的几种高级选择器
+### 高级选择器：
++ 后代选择器：用空格隔开
++ 交集选择器：选择器之间紧密相连
++ 并集选择器（分组选择器）：用逗号隔开
++ 伪类选择器
+#### 详细讲解
+1. 后代选择器: 定义的时候用空格隔开
+对于E F这种格式，表示所有属于 E 元素后代的 F 元素，有这个样式。空格就表示后代
+2. 交集选择器：定义的时候紧密相连
+定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如div.haha，再比如p.special。如果后一个选择器是类选择器，则写为div.special；如果后一个选择器 id 选择器，则写为div#special。
+3. 并集选择器：定义的时候用逗号隔开
+三种基本选择器都可以放进来
+举例：
+
+p,h1,.title1,#one {
+    color: red;
+}
+# 作业
+![作业效果](http://sk7rge758.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241010154512.png)
+![作业代码](http://sk7rge758.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241010154532.png)
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20241011\350\257\276\345\240\202\347\254\224\350\256\260--\351\200\211\346\213\251\345\231\250\345\222\214\344\274\252\347\261\273.md" "b/\345\220\264\344\275\263\346\225\217/20241011\350\257\276\345\240\202\347\254\224\350\256\260--\351\200\211\346\213\251\345\231\250\345\222\214\344\274\252\347\261\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2173e16710ec473bd54e15737450c800bb920dc4
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241011\350\257\276\345\240\202\347\254\224\350\256\260--\351\200\211\346\213\251\345\231\250\345\222\214\344\274\252\347\261\273.md"
@@ -0,0 +1,118 @@
+###  1.子代选择器，用符号`>`表示
+
+```
+div > p {
+    color: red;
+}
+```
+
+div 的儿子 p。和 div 的后代 p 的截然不同。
+
+能够选择：
+
+```
+<div>
+    <p>我是div的儿子</p>
+</div>
+```
+
+不能选择：
+
+```
+<div>
+    <ul>
+        <li>
+            <p>我是div的重孙子</p>
+        </li>
+    </ul>
+</div>
+```
+
+###  2.序选择器
+
+设置无序列表`<ul>`中的第一个`<li>`为红色：
+
+```
+<style type="text/css">
+    ul li:first-child {
+        color: red;
+    }
+</style>
+```
+
+设置无序列表`<ul>`中的最后一个`<li>`为红色：
+
+```
+ul li:last-child {
+    color: blue;
+}
+```
+
+###  3.下一个兄弟选择器
+
+`+`表示选择下一个兄弟
+
+```
+<style type="text/css">
+    h3 + p {
+        color: red;
+    }
+</style>
+```
+
+上方的选择器意思是：选择的是 h3 元素后面**紧挨着的第一个兄弟**
+
+# 伪类
+
+1. 同一个标签，根据其不同的状态，具有不同的样式这种叫做伪类
+
+## 静态伪类选择器、动态伪类选择器
+
+伪类选择器分为两种。
+
+（1）**静态伪类**：只能用于**超链接**的样式。如下：
+
+- `:link` 超链接点击之前
+- `:visited` 链接被访问过之后
+
+PS：以上两种样式，只能用于超链接。
+
+（2）**动态伪类**：针对**所有标签**都适用的样式。如下：
+
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active` “激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+##  超链接a标签
+
+### 超链接的四种状态
+
+a标签有4种伪类（即对应四种状态），要求背诵。如下：
+
+- `:link` “链接”：超链接点击之前
+
+- `:visited` “访问过的”：链接被访问过之后
+
+- `:hover` “悬停”：鼠标放到标签上的时候
+
+- `:active` “激活”： 鼠标点击标签，但是不松手时。
+
+- 记住，在css中，这四种状态**必须按照固定的顺序写**：
+
+  > a:link 、a:visited 、a:hover 、a:active，否则不生效
+
+###  超链接的美化
+
+问：既然`a{}`定义了超链的属性，和`a:link{}`定义了超链点击之前的属性，那这两个有啥区别呢？
+
+答：
+
+**`a{}`和`a:link{}`的区别：**
+
+- `a{}`定义的样式针对所有的超链接(包括锚点)
+- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点）
+
+锚记/锚点是网页制作中超级链接的一种，又叫命名锚记。它就像定位器一样是一种页面内的超级链接，可以迅速跳到某个节点
+
+# 作业
+![前10题](http://sk7rge758.hd-bkt.clouddn.com/%E6%8D%95%E8%8E%B7.PNG)
diff --git "a/\345\220\264\344\275\263\346\225\217/20241012\350\257\276\345\240\202\347\254\224\350\256\260--css\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247.md" "b/\345\220\264\344\275\263\346\225\217/20241012\350\257\276\345\240\202\347\254\224\350\256\260--css\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e804a576d0d4221d3c63140fc94b3975759b5659
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241012\350\257\276\345\240\202\347\254\224\350\256\260--css\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247.md"
@@ -0,0 +1,69 @@
+# css继承性
+
+- 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。**
+- 继承性是从自己开始，直到最小的元素。
+- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
+- 关于盒子、定位、布局的属性，都不能继承。
+
+# css层叠性
+
+###  层叠性：计算权重
+
+**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题
+
+当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
+
+- id 选择器
+- 类选择器、属性选择器、伪类选择器
+- 标签选择器、伪元素选择器
+
+因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
+
+![](D:\JavaProjects\grade23-class3-note-h5css3\吴佳敏\imgs\捕获.PNG)
+
+如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
+
+####  举例3：具有实战性的例子
+
+![img](http://img.smyhvae.com/20170726_2221.png)
+
+现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
+
+就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。**
+
+####  举例4：继承性造成的影响
+
+这里需要声明一点：
+
+> 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
+
+###  层叠性：权重计算的问题大总结（非常重要)
+
+![](D:\JavaProjects\grade23-class3-note-h5css3\吴佳敏\imgs\层叠性.PNG)
+
+上面这个图非常重要，我们针对这个图做一个文字描述：
+
+- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
+- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
+
+### CSS样式表的冲突的总结
+
+- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
+- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
+- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
+
+> 总结：就近原则。ID选择器优先级最大。
+
+另外还有两个冲突的情况：
+
+- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁在后面，用谁的
+- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，谁在后面用谁的
+
+# 作业
+## 代码
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241013204327.png)
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241013204335.png)
+## 效果图
+![前四题](http://sk7rge758.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241013204548.png)
+![第五题](http://sk7rge758.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241013204552.png)
+![第六题](http://sk7rge758.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241013204557.png)
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20241014\350\257\276\345\240\202\347\254\224\350\256\260--css\347\233\222\346\250\241\345\236\213.md" "b/\345\220\264\344\275\263\346\225\217/20241014\350\257\276\345\240\202\347\254\224\350\256\260--css\347\233\222\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7561dee432560bbb169298d1f3363ba65842edfc
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241014\350\257\276\345\240\202\347\254\224\350\256\260--css\347\233\222\346\250\241\345\236\213.md"
@@ -0,0 +1,64 @@
+###  !important标记：优先级最高
+
+1. 语法：k:v !important；
+2. `!important`标记需要强调如下3点：
+   - **！important提升的是一个属性，并不是一个选择器**
+   - ***!important无法提升继承的权重，该是0还是0**
+   - **!important不影响就近原则**
+
+# css盒子模型
+
+1. 无论是div、span、还是a都是盒子。
+
+​      但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
+
+2. 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
+
+- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
+- padding：内边距。
+- border：边框。
+- margin：外边距。
+
+3. CSS盒模型和IE盒模型的区别：
+
+- 在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+- **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
+
+# 认识padding
+
+###  padding区域也有颜色
+
+padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。**
+
+### padding有四个方向
+
+padding是4个方向的，所以我们能够分别描述4个方向的padding。
+
+方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
+
+小属性的写法：
+
+```
+	padding-top: 30px;
+	padding-right: 20px;
+	padding-bottom: 40px;
+	padding-left: 100px;
+```
+
+综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
+
+```
+padding:30px 20px 40px 100px;
+```
+
+如果写了四个值，则顺序为：上、右、下、左。
+
+如果只写了三个值，则顺序为：上、右和左、下。
+
+如果只写了两个值，则顺序为：上和下、左和右。
+
+# 认识border
+
+border就是边框。边框有三个要素：像素（粗细）、线型、颜色
+
+颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20241016\350\257\276\345\240\202\347\254\224\350\256\260--\346\265\256\345\212\250.md" "b/\345\220\264\344\275\263\346\225\217/20241016\350\257\276\345\240\202\347\254\224\350\256\260--\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f2aec15d35c53553eb4b6bb7d00c344f69f3a523
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241016\350\257\276\345\240\202\347\254\224\350\256\260--\346\265\256\345\212\250.md"
@@ -0,0 +1,73 @@
+# 标准文档流
+宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
+## 标准文档流的特性
+1. 空白折叠现象：
+无论多少个空格、换行、tab，都会折叠为一个空格。
+2. 高矮不齐，底边对齐：
+3. 自动换行，一行写不满，换行写
+## 行内元素和块级元素
+### 行内元素和块级元素分类
+1. 从HTML的角度来讲，标签分为：
++ 文本级标签：p、span、a、b、i、u、em。
++ 容器级标签：div、h系列、li、dt、dd。
+2. 现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
++ 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
++ 块级元素：所有的容器级标签都是块级元素，还有p标签。
+### 行内元素和块级元素的区别
+行内元素：
++ 与其他行内元素并排；
++ 不能设置宽、高。默认的宽度，就是文字的宽度。
+块级元素：
++ 霸占一行，不能与其他任何元素并列；
++ 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+### 行内元素和块级元素的相互转换
+#### 块级元素可以转换为行内元素：
+一旦，给一个块级元素（比如div）设置：
+**display: inline;**
+那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
++ 此时这个div不能设置宽度、高度；
++ 此时这个div可以和别人并排了。
+#### 行内元素转换为块级元素：
+同样的道理，一旦给一个行内元素（比如span）设置：
+**display: block;**
+# 浮动
+## 浮动元素的性质
+1. 浮动元素的脱标（即脱离标准流）
+2. 浮动的元素互相贴靠
+3. 浮动的元素有“字围”效果
+4. 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）
+## 浮动的清除
+1. 方法1：给浮动元素的祖先元素加高度
+```
+总结：
+
+如果一个元素要浮动，那么它的祖先元素一定要有高度。
+
+有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）
+
+只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
+但是在网页设计中我们一般不会想去设置盒子的高度 
+ ```
+
+2. clear:both
+```
+意思就是：不允许左侧和右侧有浮动对象。
+这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。
+margin失效的本质原因是：上图中的box1和box2，高度为零
+```
+3. 隔墙法
+<br>
+我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法
+4. 清除浮动方法4：overflow:hidden;
+<br>
+**一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。**
+
+# 作业
+## 效果图
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-17%20180042.png)
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-17%20211620.png)
+## 代码
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-17%20180015.png)
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-17%20180015.png)
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-17%20211651.png)
+![](http://sk7rge758.hd-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-17%20211715.png)
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/20241018\350\257\276\345\240\202\347\254\224\350\256\260--\345\256\232\344\275\215.md" "b/\345\220\264\344\275\263\346\225\217/20241018\350\257\276\345\240\202\347\254\224\350\256\260--\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4a33856621760824732a19e55d9532c0c8910d94
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241018\350\257\276\345\240\202\347\254\224\350\256\260--\345\256\232\344\275\215.md"
@@ -0,0 +1,117 @@
+# 相对定位
+
+**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+
+我们之前学习的背景属性中，是通过如下格式：
+
+```
+	background-position:向右偏移量 向下偏移量;
+```
+
+但这回的定位属性，是通过如下格式：
+
+```
+	position: relative;
+	left: 50px;
+	top: 50px;
+```
+
+正值表示向右向下偏移，负值表示向左向上偏移
+
+##  相对定位不脱标
+
+不脱标，老家留坑，**别人不会把它的位置挤走**。
+
+也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘
+
+## 相对定位的用途
+
+- （1）微调元素
+- （2）做绝对定位的参考，子绝父相
+
+# 绝对定位
+
+**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。
+
+### 绝对定位脱标
+
+**绝对定位的盒子脱离了标准文档流。**
+
+所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
+
+绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了
+
+###  绝对定位的参考点（重要）
+
+（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角：
+
+（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角：
+
+###  以盒子为参考点
+
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
+
+以下几点需要注意。
+
+（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    没有定位
+				<p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
+			</div>
+		</div>
+```
+
+再比如：
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    相对定位
+				<p></p>           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
+			</div>
+		</div>
+```
+
+（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
+
+子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
+
+“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
+
+> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
+
+（3）绝对定位的儿子，无视参考的那个盒子的padding（以border为起点）：
+
+###  让绝对定位中的盒子在父亲里居中
+
+我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。
+
+可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
+
+```
+	div {
+		width: 600px;
+		height: 60px;
+		position: absolute;  绝对定位的盒子
+		left: 50%;           首先，让左边线居中
+		top: 0;
+		margin-left: -300px;  然后，向左移动宽度（600px）的一半
+	}
+```
+
+如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
+
+我们可以总结成一个公式：
+
+> left:50%; margin-left:负的宽度的一半
+
+# 作业
+## 第一题
+![](./imgs/10-18/1效果.PNG)![](./imgs/10-18/第1题.PNG)
+## 第三题
+![](./imgs/10-18/第3题.PNG)![]()
+## 第四题
+![](./imgs/10-18/4效果.PNG)![](./imgs/10-18/4-1代码.PNG)![](./imgs/10-18/4-2代码.PNG)
+## 第五题
+![](./imgs/10-18/5效果.PNG)![](./imgs/10-18/5代码.PNG)![](./imgs/10-18/5-1代码.PNG)![](./imgs/10-18/5-2代码.PNG)
diff --git "a/\345\220\264\344\275\263\346\225\217/20241021\350\257\276\345\240\202\347\254\224\350\256\260--\345\256\232\344\275\215\350\241\245\345\205\205\344\273\245\345\217\212\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" "b/\345\220\264\344\275\263\346\225\217/20241021\350\257\276\345\240\202\347\254\224\350\256\260--\345\256\232\344\275\215\350\241\245\345\205\205\344\273\245\345\217\212\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3162a09e2b34d4640088abfdcc65695f5ad652dd
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/20241021\350\257\276\345\240\202\347\254\224\350\256\260--\345\256\232\344\275\215\350\241\245\345\205\205\344\273\245\345\217\212\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
@@ -0,0 +1,32 @@
+# 固定定位
+
+## z-index属性：
+
+**z-index**属性：表示谁压着谁。数值大的压盖住数值小的。
+
+有如下特性：
+
+（1）属性值大的位于上层，属性值小的位于下层。
+
+（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
+
+（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+
+（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。
+
+（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
+
+## css选择器
+
+## 属性选择器
+
+属性选择器的标志性符号是 `[]`。
+
+匹配含义：
+
+```
+^：开头  $：结尾  *：包含
+```
+
+格式：
+![](./imgs/属性选择器.PNG)
diff --git "a/\345\220\264\344\275\263\346\225\217/9.20\350\257\276\345\240\202\347\254\224\350\256\260--\347\231\273\345\275\225\351\241\265\351\235\242\345\210\266\344\275\234.md" "b/\345\220\264\344\275\263\346\225\217/9.20\350\257\276\345\240\202\347\254\224\350\256\260--\347\231\273\345\275\225\351\241\265\351\235\242\345\210\266\344\275\234.md"
new file mode 100644
index 0000000000000000000000000000000000000000..edc80da5abe5f320ffa12acc1627f428debdb089
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/9.20\350\257\276\345\240\202\347\254\224\350\256\260--\347\231\273\345\275\225\351\241\265\351\235\242\345\210\266\344\275\234.md"
@@ -0,0 +1,105 @@
+# 表单
+[登录页面](http://sk7rge758.hd-bkt.clouddn.com/%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.png)
+
+### 1. H5中新增的表单类型
+
+- `email` 只能输入email格式。自动带有验证功能。
+
+- `tel` 手机号码。
+
+- `url` 只能输入url格式。
+
+- `number` 只能输入数字。
+
+- `search` 搜索框
+
+- `range` 滑动条
+
+- `color` 拾色器
+
+- `time` 时间
+
+- `date` 日期
+
+- `datetime` 时间日期
+
+- `month` 月份
+
+- `week` 星期
+
+  [^值得注意的是：]: `<fieldset>` 标签将表单里的内容进行打包，代表一组；而`<legend> `标签的则是 fieldset 里的元素定义标题
+
+  ### 2.表单属性
+
+  1.&lt;datalist&gt;数据列表：
+
+  ```
+  <input type="text" list="myData">
+  <datalist id="myData">
+      <option>本科</option>
+      <option>研究生</option>
+      <option>不明</option>
+  </datalist>
+  ```
+
+  上方代码中，input里的list属性和 datalist 进行了绑定。
+
+  2、`<keygen>`元素：
+
+  keygen 元素的作用是提供一种验证用户的可靠方法。
+
+  keygen 元素是密钥对生成器（key-pair generator）。当<u>提交表单</u>时，会生成两个键：一个公钥，一个私钥。
+
+  私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
+
+  3、`<meter>`元素：度量器
+
+  - low：低于该值后警告
+  - high：高于该值后警告
+  - value：当前值
+  - max：最大值
+  - min：最小值。
+
+  举例：
+
+  ```
+  	<meter  value="81"    min="0" max="100"  low="60"  high="80"/>
+  ```
+
+  # 多媒体标签
+
+  ###  音频
+
+  HTML5通过`<audio>`标签来解决音频播放的问题。
+
+  使用举例：
+
+  ```
+  	<audio src="music/yinyue.mp3" autoplay controls> </audio>
+  ```
+
+我们可以通过附加属性，来更友好地控制音频的播放，如：
+
+- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
+- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
+- `loop` 循环播放。
+- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
+
+### 视频
+
+HTML5通过`<video>`标签来解决视频播放的问题。
+
+使用举例：
+
+```
+	<video src="video/movie.mp4" controls autoplay></video>
+```
+
+我们可以通过附加属性，来更友好地控制视频的播放，如：
+
+- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
+- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
+- `loop` 循环播放。
+- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
+- `width`：设置播放窗口宽度。
+- `height`：设置播放窗口的高度。
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/1\346\225\210\346\236\234.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/1\346\225\210\346\236\234.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..35510af45818238a5a9dc11109f7abd3f5878b83
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/1\346\225\210\346\236\234.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/4-1\344\273\243\347\240\201.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/4-1\344\273\243\347\240\201.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..46c1720775b39243041a7d58e695fcd1ec07d80c
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/4-1\344\273\243\347\240\201.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/4-2\344\273\243\347\240\201.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/4-2\344\273\243\347\240\201.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..b60e34f158d9be00c5c6ecef444b761be0d5d7f4
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/4-2\344\273\243\347\240\201.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/4\346\225\210\346\236\234.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/4\346\225\210\346\236\234.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..5ae35e6389d8c9935686f68df3a965cc1f03a857
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/4\346\225\210\346\236\234.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/5-1\344\273\243\347\240\201.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5-1\344\273\243\347\240\201.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..38edf1e751d236506c0bcba9880d08cb4b12864b
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5-1\344\273\243\347\240\201.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/5-2\344\273\243\347\240\201.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5-2\344\273\243\347\240\201.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..da6365eec44a0f3983c79d1bc7e0842b07533c54
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5-2\344\273\243\347\240\201.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/5\344\273\243\347\240\201.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5\344\273\243\347\240\201.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..4dfe074981e1252513774b811d8524b788278f87
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5\344\273\243\347\240\201.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/5\346\225\210\346\236\234.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5\346\225\210\346\236\234.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..53f79fc2803201f124afec2988f00524c009a2b3
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/5\346\225\210\346\236\234.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/Video_20241018103254.mp4" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/Video_20241018103254.mp4"
new file mode 100644
index 0000000000000000000000000000000000000000..0fd2cd72ce3d70760fbb35c47490e2da11abfed5
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/Video_20241018103254.mp4" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/\347\254\2541\351\242\230.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/\347\254\2541\351\242\230.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..77b144d766b3b7e96fd918ab5fdf2fe1634c38f7
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/\347\254\2541\351\242\230.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/10-18/\347\254\2543\351\242\230.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/\347\254\2543\351\242\230.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..7dd33e22349b7a83e3686141a259dd9043c40f91
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/10-18/\347\254\2543\351\242\230.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138 (1).png.crdownload" "b/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138 (1).png.crdownload"
new file mode 100644
index 0000000000000000000000000000000000000000..1f7a6330d8892af0da52c911f31588aafb73529b
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138 (1).png.crdownload" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138.png.crdownload" "b/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138.png.crdownload"
new file mode 100644
index 0000000000000000000000000000000000000000..1f7a6330d8892af0da52c911f31588aafb73529b
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/20170725_2138.png.crdownload" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/9-29/929-2.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929-2.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..3cf56a17a937263205ed3ce40ecf255633f85c70
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929-2.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/9-29/929-3.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929-3.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..d08ef93f2ef2c5dcf6df24507ee92988e468babb
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929-3.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/9-29/929.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..bb14afd2595d73c88c135dd0762cb618f45684b9
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/9-29/929\344\273\243\347\240\201.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929\344\273\243\347\240\201.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..fb04c268f91f71f4b5d385ea7e56e7b68657a3b6
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/9-29/929\344\273\243\347\240\201.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/9-30/Video_20240930113019.wmv" "b/\345\220\264\344\275\263\346\225\217/imgs/9-30/Video_20240930113019.wmv"
new file mode 100644
index 0000000000000000000000000000000000000000..60c27331bc79b85469c111f83b40c8395377f2fd
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/9-30/Video_20240930113019.wmv" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..1cfd52be75207d1cf83ad25b42f701a1770dc382
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232css\344\273\243\347\240\201.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232css\344\273\243\347\240\201.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..c3dae7c38ff3dd12b9a0cc2821db15b85b5c02d2
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232css\344\273\243\347\240\201.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/list.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/list.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..8929c6ec9a06025914dc7e03dfb5966058020e10
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/list.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/\345\261\202\345\217\240\346\200\247.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/\345\261\202\345\217\240\346\200\247.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..c7779a10d349d9dfd27ed50bbc0c2e2c28a1761c
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/\345\261\202\345\217\240\346\200\247.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..003a0559f2152523e6c171f56decbc04724c730c
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/\346\215\225\350\216\267.PNG" "b/\345\220\264\344\275\263\346\225\217/imgs/\346\215\225\350\216\267.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..493916f67f6012562f5bdf1d5fea780a21a2a79c
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/\346\215\225\350\216\267.PNG" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/imgs/\350\203\214\346\231\257\345\233\276.jpg" "b/\345\220\264\344\275\263\346\225\217/imgs/\350\203\214\346\231\257\345\233\276.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..5fd039cf08cf9d367e419e8f991af7b613a34621
Binary files /dev/null and "b/\345\220\264\344\275\263\346\225\217/imgs/\350\203\214\346\231\257\345\233\276.jpg" differ
diff --git "a/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/20240909\350\257\276\345\220\216\344\275\234\344\270\232.md" "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/20240909\350\257\276\345\220\216\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7dfb11f2e1ff11ac5a1ac803dbba4abedbc2e484
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/20240909\350\257\276\345\220\216\344\275\234\344\270\232.md"
@@ -0,0 +1,11 @@
+# 主流浏览器中的渲染引擎和js引擎
+
+| 浏览器名称         | 渲染引擎         | js引擎                      |
+| :----------------- | ---------------- | --------------------------- |
+| **IE 浏览器**      | Trident 渲染引擎 | Chakra JavaScript 引擎      |
+| **Firefox 浏览器** | Gecko 渲染引擎   | TraceMonkey JavaScript 引擎 |
+| **Safari 浏览器**  | Webkit 渲染引擎  | Nitro JavaScript 引擎       |
+| **Chrome 浏览器**  | Blink 渲染引擎   | V8 JavaScript 引擎          |
+| Opera浏览器        |                  | CaraKan                     |
+| Safari浏览器       | Webkit/Webkit2   | JSCore/Nitro(4+)            |
+
diff --git "a/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/20240911\350\257\276\345\220\216\344\275\234\344\270\232.html" "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/20240911\350\257\276\345\220\216\344\275\234\344\270\232.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9890c71f0f5c66bba1ea3e10410cd0c1478e6a58
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/20240911\350\257\276\345\220\216\344\275\234\344\270\232.html"
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .test{
+           text-align: center;
+            background-color: bisque;
+         
+        }
+    </style>
+</head>
+<body>
+    <p class="test">
+        1. 如何给p标签中的内容居中<br>
+A.使用p标签创建一行文字，给p标签添加一个class属性，设置为test。<br>
+B.在css标签内，通过class定义p标签的样式，设置它的高度为50px，宽度为200px，背景颜色为灰色。 <br>
+C.在css标签内，再使用line-height属性设置p标签的行高为50（与高度相同），便可以实现内容居中<br>
+
+
+    </p>
+
+    <h1>软件工程学院</h1>
+    <h2>吴佳敏</h2>
+    <hr style="border: 18px solid red;">
+    <h3>舍友是程梦</h3>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/demo.html" "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..19b4d06efb63f5519026963a8f6ee1479301d81e
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/demo.html"
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=dvice-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #intro h1,.post h2{
+            font-weight: bolder;
+        }
+        .sidebar h3{
+            font-style: italic;
+        }
+        input:required:focus{
+           border:3px solid blue;
+           color: gray;
+        }
+        
+        /*为了更好的显示效果所写的代码*/
+        .container{
+            background-color: black;
+            width:200px;
+            height:200px;
+        }
+        .container a:hover{
+          color:#fff;
+        }
+        a.active:hover{
+           background-color: grey;
+        }
+        .special-title::first-letter {
+           /* 首字下沉效果 */
+            float: left;
+            color: gold; /* 金色字体 */
+            background-color: transparent; /* 透明背景 */
+            line-height: 0.7em; 
+            padding-top: 0.9em;
+}
+        /* 设置.list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色 */
+         .list li > ul {
+           background-color: #f2f2f2; /* 浅灰色背景 */
+         }
+         
+         /* 当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色 */
+         .list li:hover {
+           color: #00008B; /* 深蓝色字体 */
+         }
+         .container form input:focus {
+           border:3px solid green; 
+         }
+         
+         
+         .container form label:hover {
+           background-color: #add8e6; 
+         }
+
+         label{
+          color: #fff;
+         }
+         laber:hover{
+          background-color: #00008B;
+         }
+
+    </style>
+</head>
+<body>
+    <div class="main">
+        <section id="intro">
+          <h1>Welcome</h1>
+          <p>This is the introduction section.</p>
+        </section>
+        <article class="post">
+          <h2>Post Title</h2>
+          <p>Post content...</p>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+          </ul>
+        </article>
+        <aside class="sidebar">
+          <h3>Sidebar Title</h3>
+          <p>Sidebar content...</p>
+        </aside>
+      </div>
+
+
+      <form>
+        <input type="text" name="username" required placeholder="Username">
+        <input type="email" name="email" required placeholder="Email">
+        <input type="submit" value="Submit">
+      </form>
+
+
+      <nav class="container">
+        <ul>
+          <li><a href="#home" class="active">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+
+      <h2 class="special-title">Special Title</h2>
+
+      <ul class="list">
+        <li>Item 1
+          <ul>
+            <li>Subitem 1</li>
+            <li>Subitem 2</li>
+          </ul>
+        </li>
+        <li>Item 2
+          <ul>
+            <li>Subitem 3</li>
+            <li>Subitem 4</li>
+          </ul>
+        </li>
+      </ul>
+      
+
+      <div class="container">
+        <form>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name">
+          <label for="password">Password:</label>
+          <input type="password" id="password" name="password">
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+      
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/\345\233\276\347\211\207\345\236\202\347\233\264\346\260\264\345\271\263\345\261\205\344\270\255.html" "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/\345\233\276\347\211\207\345\236\202\347\233\264\346\260\264\345\271\263\345\261\205\344\270\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b50db2d7d460db8c4e3995665a108f76e7b5ff4d
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/\345\233\276\347\211\207\345\236\202\347\233\264\346\260\264\345\271\263\345\261\205\344\270\255.html"
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>愿祖国繁荣昌盛</title>
+    <style>
+      #photo{
+        
+       height:800px; 
+       position: relative;
+      }
+      img {
+  position: absolute; /* 设置图片为绝对定位 */
+  top: 50%; /* 将图片向上偏移50% */
+  left: 50%; /* 将图片向左偏移50%，如果需要水平居中的话 */
+  transform: translate(-50%, -50%); /* 将图片向下和向右偏移自身高度和宽度的50%，以实现居中 */
+  width: auto; /* 根据需要设置宽度，auto可以保持图片原始宽度 */
+  height: auto; /* 根据需要设置高度，auto可以保持图片原始高度 */
+}
+
+    </style>
+</head>
+<body>
+    <div id="photo">
+        <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.2J08kVgkbdoDPu9RXOMBHwHaFA?w=289&h=195&c=7&r=0&o=5&pid=1.7" alt="天安门照片" /> 
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/\350\213\271\346\236\234\345\257\274\350\210\252.html" "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/\350\213\271\346\236\234\345\257\274\350\210\252.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d0136bcf3417b146ca4aaa793c28d726760da64b
--- /dev/null
+++ "b/\345\220\264\344\275\263\346\225\217/\344\271\213\345\211\215\344\275\234\344\270\232/\350\213\271\346\236\234\345\257\274\350\210\252.html"
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>iPhone</title>
+    <style>
+        #head{
+           
+            background-color: #161617CC;
+        }
+        ul{
+            list-style: none;
+           
+            
+        }
+        li{
+            float: left;
+            padding: 0 8PX;
+            margin:0 8px;
+            line-height: 44px;
+            color: white;
+           font-size: 12px;
+            
+
+         
+        }
+        #Navigation{
+            width: 996px;
+            height:44px;
+            margin:auto;
+            
+        }
+    </style>
+</head>
+<body>
+    <div id="head">
+    <div id="Navigation">
+    <ul>
+        <li>
+            <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">
+                </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">
+                </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">
+                </path>
+            </svg>
+        </li>
+     </ul>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file