diff --git "a/\344\270\201\346\235\250\346\202\246/20241021 css\345\256\232\344\275\215.md" "b/\344\270\201\346\235\250\346\202\246/20241021 css\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ec8a8144ffd39573bafd36d4ab0956b676ae388d
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/20241021 css\345\256\232\344\275\215.md"
@@ -0,0 +1,219 @@
+### css定位
+1. 静态定位
+* 默认定位：所有元素在默认情况下都是静态定位的。
+* 特点：静态定位的元素不受 top、right、bottom、left 和 z-index 属性的影响。
+* 用途：通常用于不需要特殊定位的普通文档流元素。
+
+2. 相对定位
+* 相对自身定位：元素相对于其正常位置进行偏移。
+* 特点：使用 top、right、bottom、left 属性进行偏移，但元素仍占据原来的空间。
+* 用途：用于微调元素位置，同时保持元素在文档流中的原始位置。
+
+3. 绝对定位
+* 相对包含块定位：元素相对于其最近的已定位（非 static）祖先元素进行定位。
+* 特点：脱离文档流，不占据空间；可以使用 top、right、bottom、left 属性精确定位。
+* 用途：用于创建复杂的布局，如弹出菜单、工具提示等。
+
+4. 固定定位
+* 相对视口定位：元素相对于浏览器视口进行定位。
+* 特点：脱离文档流，不占据空间；即使页面滚动，元素也保持在固定位置。
+* 用途：用于创建固定在页面上的元素，如导航栏、返回顶部按钮等。
+
+5. 粘性定位
+* 相对和固定定位的结合：元素根据用户的滚动位置在相对定位和固定定位之间切换。
+* 特点：在 top、right、bottom、left 属性指定的阈值内，元素表现为相对定位；超出阈值后，表现为固定定位。
+* 用途：用于创建在滚动时保持可见的元素，如表头、侧边栏等。
+
+6. 包含块
+* 定义：定位元素的参考点或上下文。
+* 相对定位：包含块是元素的正常位置所在的块级框。
+* 绝对定位和固定定位：对于绝对定位，包含块是最近的已定位祖先元素；对于固定定位，包含块是视口。
+
+7. z-index 属性
+* 定义：控制定位元素在 z 轴上的堆叠顺序。
+* 特点：仅对定位元素（非 static）有效。
+* 用途：用于解决元素之间的重叠问题。
+
+8. position 属性值
+* static：默认值，元素按照正常的文档流进行布局。
+* relative：元素按照正常文档流进行布局，但会相对于其正常位置进行偏移。
+* absolute：元素从文档流中脱离，相对于其最近的非 static 定位祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）。
+* fixed：元素从文档流中脱离，相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在相同的屏幕位置。
+* sticky：元素根据用户的滚动位置进行定位。它的行为类似于 relative 定位，直到一个指定的滚动阈值被越过，然后它的行为类似于 fixed 定位。
+
+9. 偏移属性
+* top：定义了元素顶部边缘与其包含块顶部边缘的距离。
+* right：定义了元素右边边缘与其包含块右边边缘的距离。
+* bottom：定义了元素底部边缘与其包含块底部边缘的距离。
+* left：定义了元素左边边缘与其包含块左边边缘的距离。
+
+10. 定位上下文
+* 普通流：大多数元素默认的布局方式，元素按照HTML中的顺序，从上到下，从左到右排列。
+* 定位上下文：由 position 属性非 static 的元素创建的包含块，其子元素可以相对于这个新的包含块进行定位。
+
+11. 层叠上下文
+定位元素可以创建层叠上下文，这影响了元素在Z轴上的堆叠顺序。层叠上下文由以下条件之一触发：
+
+* position 属性非 static 且 z-index 属性非 auto。
+* 元素的 opacity 属性小于 1。
+* 元素的 transform 属性非 none。
+* 元素的 filter 属性非 none。
+* 元素的 perspective 属性非 none。
+* 元素的 clip-path 属性非 none。
+* 元素的 mask 或 -webkit-mask 属性非 none。
+* 元素的 isolation 属性为 isolate。
+
+12. 定位和尺寸
+* 当元素的 position 属性设置为 absolute 或 fixed 时，如果未指定宽度和高度，元素的尺寸可能会收缩以适应其内容。
+* 使用 margin、border 和 padding 可以调整定位元素的大小和位置。
+
+13. 实践技巧
+* 使用 transform 属性进行定位，因为它不会引起文档的重排，只会引起重绘。
+* 避免使用 position: absolute; 对多个子元素进行定位，因为它会将元素从文档流中脱离，可能导致布局复杂化。
+* 使用 position: sticky; 可以实现在某个滚动范围内保持相对定位的效果，超出范围后变为固定定位。
+* 使用 z-index 属性控制元素的堆叠顺序，但要注意它只对定位元素有效。
+
+示例代码
+````
+css
+/* 相对定位 */
+.relative-box {
+ position: relative;
+ top: 20px;
+ left: 30px;
+}
+
+/* 绝对定位 */
+.absolute-box {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+}
+
+/* 固定定位 */
+.fixed-box {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+}
+
+/* 粘性定位 */
+.sticky-box {
+ position: sticky;
+ top: 0;
+}
+````
+
+#### 作业
+27.1
+代码：
+````
+
+
+
+
+
+````
+图示：
+
+27.2
+代码：
+````
+
+
+
+
+ 8888
+
+
+
+
+````
+图示：
+
+27.3
+代码:
+````
+
+
+
+
+
+
+
+````
+图示：
\ No newline at end of file
diff --git "a/\344\270\201\346\235\250\346\202\246/20241023 css\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" "b/\344\270\201\346\235\250\346\202\246/20241023 css\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..52601ff2f9e2c27f7e513ec139a6283288297f3c
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/20241023 css\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md"
@@ -0,0 +1,81 @@
+### css选择器
+````
+ div 标签选择器
+
+ .box 类名选择器
+
+ #box id选择器
+
+ div p 后代选择器
+
+ div.box 交集选择器
+
+ div,p,span 并集选择器
+
+ div>p 子代选择器
+
+ * : 通配符
+
+ div+p: 选中div后面相邻的第一个p
+
+ div~p: 选中的div后面所有的p
+````
+
+### 属性选择器
+
+属性选择器的标志
+
+性符号是 `[]`。
+
+匹配含义：
+
+```
+^：开头 $：结尾 *：包含
+```
+
+格式：
+
+- `E[title]` 选中页面的E元素，并且E存在 title 属性即可。
+
+- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值**完全等于**abc。
+
+- `E[attr~=val]` 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
+
+- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
+
+- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
+
+- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
+
+- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
+
+### 结构伪类选择器
+
+伪类选择器的标志性符号是 `:`。
+
+CSS中有一些伪类选择器，比如`:link`、`:visited`、`:hover`、`:active`、`:focus`。
+
+CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的**结构伪类选择器**：即通过**结构**来进行筛选。
+
+
+**1、格式：（第一部分）**（重要）
+
+- `E:first-child` 匹配父元素的第一个子元素E。
+
+- `E:last-child` 匹配父元素的最后一个子元素E。
+
+- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
+
+- `E:nth-child(odd)` 匹配奇数
+
+- `E:nth-child(even)` 匹配偶数
+
+- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
+
+**2、格式：（第二部分）**
+
+- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。
+
+- `E::first-line` 设置元素 E 里面的**第一行**的样式。
+
+- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
\ No newline at end of file
diff --git "a/\344\270\201\346\235\250\346\202\246/20241024 css\350\277\207\346\270\241 2(3)D\350\275\254\346\215\242 \345\212\250\347\224\273.md" "b/\344\270\201\346\235\250\346\202\246/20241024 css\350\277\207\346\270\241 2(3)D\350\275\254\346\215\242 \345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ecfb3cc1fa5d5cc2d2d6389db9d6d2d806dda2ef
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/20241024 css\350\277\207\346\270\241 2(3)D\350\275\254\346\215\242 \345\212\250\347\224\273.md"
@@ -0,0 +1,356 @@
+### css动画
+
+##### 文本
+1. text-shadow：设置文本的阴影
+
+格式举例：
+
+```javascript
+ text-shadow: 20px 27px 22px pink;
+```
+
+参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
+
+2. 凹凸文字效果
+text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开
+格式举例：
+````
+.tu {
+ text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
+ }
+````
+
+##### 盒模型中的 box-sizing 属性
+这就需要用到 `box-sizing`属性。它的属性值可以是：`content-box`、`border-box`
+
+1. **外加模式：**
+
+```javascript
+ box-sizing: content-box;
+```
+
+解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
+
+
+2. **内减模式：**【需要注意】
+
+```javascript
+ box-sizing: border-box;
+```
+
+解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
+
+
+##### 私有前缀
+格式如下：
+
+```html
+ -webkit-: 谷歌 苹果
+ -moz-:火狐
+ -ms-：IE
+ -o-：欧朋
+```
+
+格式举例如下：
+
+```css
+ background: -webkit-linear-gradient(left, green, yellow);
+ background: -moz-linear-gradient(left, green, yellow);
+ background: -ms-linear-gradient(left, green, yellow);
+ background: -o-linear-gradient(left, green, yellow);
+ background: linear-gradient(left, green, yellow);
+```
+
+##### 边框
+1. 边框圆角：`border-radius` 属性
+单个属性的写法：
+
+```css
+ border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径
+
+ border-top-right-radius: 60px 120px;
+
+ border-bottom-left-radius: 60px 120px;
+
+ border-bottom-right-radius: 60px 120px;
+
+```
+
+复合写法：
+
+```
+ border-radius: 60px/120px; //参数：水平半径/垂直半径
+
+ border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
+
+ border-radius: 20px 60px;
+```
+
+最简洁的写法：（四个角的半径都相同时）
+
+```
+ border-radius: 60px;
+```
+
+
+2. 边框阴影：`box-shadow` 属性
+格式举例：
+
+```
+ box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+
+ box-shadow: 15px 21px 48px -2px #666;
+```
+
+参数解释：
+
+- 水平偏移：正值向右 负值向左。
+
+- 垂直偏移：正值向下 负值向上。
+
+- 模糊程度：不能为负值。
+
+另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：
+
+```
+ box-shadow:3px 3px 3px 3px #666 inset;
+```
+
+3.边框图片
+### 边框图片
+
+边框图片有以下属性：
+
+```javascript
+ /* 边框图片的路径*/
+ border-image-source: url("images/border.png");
+
+ /* 图片边框的裁剪*/
+ border-image-slice: 27;
+
+ /*图片边框的宽度*/
+ border-image-width: 27px;
+
+ /*边框图片的平铺*/
+ /* repeat :正常平铺 但是可能会显示不完整*/
+ /*round: 平铺 但是保证 图片完整*/
+ /*stretch: 拉伸显示*/
+ border-image-repeat: stretch;
+```
+
+我们也可以写成一个综合属性：
+
+```javascript
+ border-image: url("images/border.png") 27/20px round;
+```
+
+##### 过渡：transition
+
+transition 包括以下属性：
+
+- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。
+
+- `transition-duration: 1s;` 过渡的持续时间。
+
+- `transition-timing-function: linear;` 运动曲线。属性值可以是：
+ - `linear` 线性
+ - `ease` 减速
+ - `ease-in` 加速
+ - `ease-out` 减速
+ - `ease-in-out` 先加速后减速
+
+- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+上面的四个属性也可以写成**综合属性**：
+
+```javascript
+ transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+ transition: all 3s linear 0s;
+```
+
+ `transition-property: all`:意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡
+
+ `transition-property: width`：意思是只让盒子的宽度在变化时进行过渡
+
+ ##### 2D转换
+ 通过 `transform` 转换来实现 2D 转换或者 3D 转换。
+
+- 2D转换包括：缩放、移动、旋转。
+
+1. 缩放：`scale`
+格式：
+
+```javascript
+ transform: scale(x, y);
+
+ transform: scale(2, 0.5);
+```
+
+参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+2. 位移：translate
+
+格式：
+
+
+```javascript
+ transform: translate(水平位移, 垂直位移);
+
+ transform: translate(-50%, -50%);
+```
+
+参数解释：
+
+- 参数为百分比，相对于自身移动。
+
+- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+3. 旋转：rotate
+
+格式：
+
+```javascript
+ transform: rotate(角度);
+
+ transform: rotate(45deg);
+```
+
+参数解释：正值 顺时针；负值：逆时针。
+
+##### 3D 转换
+1. 旋转：rotateX、rotateY、rotateZ
+
+**3D坐标系（左手坐标系）**
+浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
+
+2. 移动：translateX、translateY、translateZ
+
+**格式：**
+
+```javascript
+ transform: translateX(100px); //沿着 X 轴移动
+
+ transform: translateY(360px); //沿着 Y 轴移动
+
+ transform: translateZ(360px); //沿着 Z 轴移动
+
+```
+
+3. 透视：perspective
+- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+
+- 作为 transform 属性的一个值，做用于元素自身。
+
+4. 3D呈现（transform-style）
+3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下：
+
+```css
+ transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */
+
+ transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
+
+```
+
+##### 动画
+1、定义动画的步骤
+
+（1）通过@keyframes定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+
+````
+定义动画：
+ @keyframes 动画名{
+ from{ 初始状态 }
+ to{ 结束状态 }
+ }
+
+ 调用：
+ animation: 动画名称 持续时间；
+````
+animation属性的格式如下：
+
+```javascript
+ animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
+
+ animation: move1 1s alternate linear 3;
+
+ animation: move2 4s;
+```
+
+### 2、动画属性
+
+我们刚刚在调用动画时，animation属性的格式如下：
+
+animation属性的格式如下：
+
+```javascript
+ animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
+
+ animation: move1 1s alternate linear 3;
+
+ animation: move2 4s;
+```
+
+
+可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。
+
+（1）动画名称：
+
+```javascript
+ animation-name: move;
+```
+
+（2）执行一次动画的持续时间：
+
+```javascript
+ animation-duration: 4s;
+```
+
+备注：上面两个属性，是必选项，且顺序固定。
+
+（3）动画的执行次数：
+
+```javascript
+ animation-iteration-count: 1; //iteration的含义表示迭代
+```
+
+属性值`infinite`表示无数次。
+
+（3）动画的方向：
+
+```javascript
+ animation-direction: alternate;
+```
+
+属性值：normal 正常，alternate 反向。
+
+（4）动画延迟执行：
+
+
+```javascript
+ animation-delay: 1s;
+```
+
+（5）设置动画结束时，盒子的状态：
+
+```javascript
+ animation-fill-mode: forwards;
+```
+
+属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
+
+（6）运动曲线：
+
+```
+ animation-timing-function: ease-in;
+```
+
+属性值可以是：linear ease-in-out steps()等。
+
+注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`。
diff --git "a/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/271.html" "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/271.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2153fd434da42329c05c461a46eb927dbbf70a88
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/271.html"
@@ -0,0 +1,74 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/272.html" "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/272.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ec0280632472f4749d66b61fe7a4c35930307960
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/272.html"
@@ -0,0 +1,45 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/273.html" "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/273.html"
new file mode 100644
index 0000000000000000000000000000000000000000..13500a872b64e45fb0ef54e6b2fab753fec451a5
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/273.html"
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/274.html" "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/274.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0927793ab3b3d5451c7afc0887dfe9c19a82abf4
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/\344\275\234\344\270\232/274.html"
@@ -0,0 +1,93 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落
+
+
+
+
《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落
+
+
+
+
《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落
+
+
+
+
《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落
+
+
+ 
+
+ 
+
+