diff --git "a/\345\217\266\345\255\220\350\241\241/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\345\217\266\345\255\220\350\241\241/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..497cb7b562a7f94b2fd5646442325c175508c5f0
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247.md"
@@ -0,0 +1,172 @@
+CSS属性：定位属性
+===
+
+CSS的定位属性有三种，分别是绝对定位、相对定位和固定定位。
+
+## 相对定位
+
+**相对定位**是指元素相对于自己原来的位置进行位置调整。使用相对定位时，元素仍然占据其原始位置，但可以通过设置`left`、`top`、`right`、`bottom`属性来微调元素的位置。
+
+### 语法
+
+```css
+position: relative; /* 相对定位 */
+left: 50px; /* 横坐标：正值表示向右偏移，负值表示向左偏移 */
+top: 50px; /* 纵坐标：正值表示向下偏移，负值表示向上偏移 */
+```
+
+### 举例
+
+```html
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+ 有生之年
+ 狭路相逢
+
+
+```
+
+### 特性
+
+- **不脱标**：相对定位的元素仍然占据原来的空间，其他元素不会因为它的移动而重新排列。
+- **用途**：
+ - 微调元素位置。
+ - 作为绝对定位子元素的参考。
+
+### 定位属性总结
+
+- `left`：盒子向右移动。
+- `right`：盒子向左移动。
+- `top`：盒子向下移动。
+- `bottom`：盒子向上移动。
+
+## 绝对定位
+
+**绝对定位**是指元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是页面的``或``元素）。
+
+### 语法
+
+```css
+position: absolute; /* 绝对定位 */
+left: 10px; /* 横坐标 */
+top: 20px; /* 纵坐标 */
+```
+
+### 特性
+
+- **脱标**：绝对定位的元素脱离了标准文档流，其他元素不会因为它的存在而重新排列。
+- **参考点**：
+ 1. 如果使用`top`，参考点是页面的左上角。
+ 2. 如果使用`bottom`，参考点是浏览器窗口的左下角。
+
+### 举例
+
+```html
+
+```
+
+### 注意事项
+
+- 绝对定位的元素不受父元素的`padding`影响。
+- 用于制作“压盖”效果时非常有效。
+
+## 固定定位
+
+**固定定位**是指元素相对于浏览器窗口进行定位，无论页面如何滚动，该元素的位置始终保持不变。
+
+### 语法
+
+```css
+position: fixed; /* 固定定位 */
+bottom: 10px; /* 距离窗口底部10像素 */
+right: 10px; /* 距离窗口右边10像素 */
+```
+
+### 用途
+
+1. **返回顶部按钮**：通常用于网页右下角的“返回顶部”按钮。
+2. **固定导航条**：常用于网页顶部的导航条，保持在页面顶部。
+
+### 举例
+
+```html
+
+
+返回顶部
+```
+
+## z-index属性
+
+**z-index**属性用于控制元素的堆叠顺序，数值大的元素会覆盖数值小的元素。需要注意的是：
+
+- 只有具有定位属性（相对、绝对、固定定位）的元素才能使用`z-index`。
+- 默认的`z-index`值是0，如果元素没有设置，按照文档顺序叠加。
+
+### 注意事项
+
+- `z-index`值越大，元素在层叠上下文中的位置越高。
+- 具有相同`z-index`值的元素，后出现的元素会覆盖先出现的元素。
+
+### 举例
+
+```html
+
+
+下层元素
+上层元素
+```
diff --git "a/\345\217\266\345\255\220\350\241\241/20241023-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\237\272\347\241\200.md" "b/\345\217\266\345\255\220\350\241\241/20241023-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..faceea57f3066417ea31c44c61f4a02a37bbcf28
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241023-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\237\272\347\241\200.md"
@@ -0,0 +1,143 @@
+# CSS3属性详解基础
+
+## 文本属性
+
+### 文本阴影 (`text-shadow`)
+
+`text-shadow`属性可以为文本设置阴影，从而增强视觉效果，特别是用于突出显示标题或强调文本。其基本格式如下：
+
+```css
+text-shadow: [水平位移] [垂直位移] [模糊半径] [阴影颜色];
+```
+
+#### 示例
+
+```css
+text-shadow: 20px 27px 22px pink;
+```
+
+- **水平位移**：控制阴影的水平偏移量，正值向右，负值向左。
+- **垂直位移**：控制阴影的垂直偏移量，正值向下，负值向上。
+- **模糊半径**：定义阴影的模糊程度，数值越大阴影越模糊。
+- **阴影颜色**：阴影的颜色。
+
+#### 举例：凹凸文字效果
+
+可以利用`text-shadow`设置多个阴影，以实现凹凸文字的效果。此方法通过设置不同方向的阴影色彩来模拟立体感。
+
+```html
+
+
+立体效果
+```
+
+## 盒模型属性
+
+### `box-sizing` 属性
+
+在CSS3中，盒模型的计算方式可以通过`box-sizing`属性进行定义。这一属性决定了元素的宽度和高度是否包含内边距（padding）和边框（border）。
+
+- **外加模式**：`box-sizing: content-box;`（默认值）
+ - 宽度和高度指的是内容区域。
+ - 总宽度 = 设置的`width` + `padding` + `border`。
+
+- **内减模式**：`box-sizing: border-box;`
+ - 宽度和高度指的是盒子的总宽度。
+ - 总宽度 = 设置的`width`，即边框和内边距的改变不会影响盒子总宽度。
+
+#### 示例
+
+```css
+box-sizing: border-box;
+```
+
+使用`border-box`能够更容易控制元素的总宽度和高度，特别是在响应式布局中。
+
+## 边框属性
+
+CSS3提供了更丰富的边框样式选择，例如边框圆角和阴影效果，可以让边框更具层次感和视觉吸引力。
+
+### 边框圆角 (`border-radius`)
+
+`border-radius`可以让元素的边角呈现圆形或椭圆形，适用于按钮、图片等。
+
+#### 属性详解
+
+- **单角设置**：指定各个角的弧度。
+ ```css
+ border-top-left-radius: 60px 120px;
+ ```
+- **整体设置**：同时指定四个角的弧度。
+
+ ```css
+ border-radius: 20px 60px 100px 140px;
+ ```
+
+#### 示例代码
+
+```html
+
+
+
+```
+
+### 效果展示
+
+
+
+### 边框阴影 (`box-shadow`)
+
+边框阴影增加了盒子的立体效果，常用于强调按钮、图片、卡片等元素。
+
+#### 属性语法
+
+```css
+box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [阴影颜色] [inset];
+```
+
+- `inset`用于创建内阴影，默认是外阴影。
+
+#### 示例代码
+
+```css
+box-shadow: 15px 21px 48px -2px #666;
+```
+
+## 其他高级边框样式
+
+CSS3还引入了边框图片的设置，可以为边框使用图案或图像，适合实现个性化设计。
+
+### 边框图片属性
+
+- `border-image-source`: 图片路径。
+- `border-image-slice`: 图片裁剪。
+- `border-image-width`: 图片宽度。
+- `border-image-repeat`: 图片平铺方式（`repeat`、`round`、`stretch`）。
+
+#### 综合写法
+
+```css
+border-image: url("border.png") 27 / 20px round;
+```
+
+在实际应用中，可以将一个图片裁剪成九宫格，使用图片的边缘来设置边框。
+
+
+
diff --git "a/\345\217\266\345\255\220\350\241\241/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\212\250\347\224\273.md" "b/\345\217\266\345\255\220\350\241\241/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ba2a05a4d39ea19446f69c2f31a866cb8f16c0b2
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\212\250\347\224\273.md"
@@ -0,0 +1,126 @@
+
+# CSS属性详解动画
+
+## 过渡：transition
+### 基本概念
+过渡是一种在特定时间内平滑地改变一个或多个CSS属性值的效果。
+
+### 主要属性
+- **transition-property**：
+ - 定义需要进行过渡的CSS属性，可以是具体属性或`all`（所有可过渡的属性）。
+
+- **transition-duration**：
+ - 定义过渡效果持续的时间，通常以秒（s）或毫秒（ms）为单位。
+
+- **transition-timing-function**：
+ - 定义过渡的速度曲线。
+ - 常用值：
+ - `linear`：匀速变化。
+ - `ease`：开始和结束慢，中间快。
+ - `ease-in`：开始慢。
+ - `ease-out`：结束慢。
+ - `ease-in-out`：开始和结束都慢。
+
+- **transition-delay**：
+ - 定义过渡效果开始之前的延迟时间。
+
+### 用法
+通过添加或修改CSS属性，可以触发过渡效果。常用于鼠标悬停、焦点等状态变化。
+
+---
+
+## 2D 转换：transform
+### 基本概念
+2D转换用于对元素进行旋转、缩放、平移和倾斜等操作，能够创建复杂的视觉效果。
+
+### 主要属性
+- **transform**：
+ - 定义需要应用的2D转换效果。
+
+### 常用函数
+- `translate(x, y)`：移动元素。
+- `scale(x, y)`：缩放元素。
+- `rotate(angle)`：旋转元素。
+- `skew(x-angle, y-angle)`：倾斜元素。
+
+---
+
+## 3D 转换：transform
+### 基本概念
+3D转换是对元素进行3D效果的处理，能够让元素在三维空间中旋转和移动。
+
+### 主要属性
+- **transform**：
+ - 结合`perspective`和3D转换函数来创建3D效果。
+
+### 常用函数
+- `translateZ(z)`：在Z轴上移动元素。
+- `rotateX(angle)`：绕X轴旋转元素。
+- `rotateY(angle)`：绕Y轴旋转元素。
+- `rotateZ(angle)`：绕Z轴旋转元素。
+- `scaleZ(z)`：沿Z轴缩放元素。
+
+---
+
+## 动画：animation
+### 基本概念
+动画通过改变元素的样式来创建动态效果，能够实现更复杂的视觉表现。
+
+### 主要属性
+- **animation-name**：
+ - 定义动画的名称，对应于`@keyframes`中的名称。
+
+- **animation-duration**：
+ - 定义动画完成一个周期所需的时间，通常以秒（s）或毫秒（ms）为单位。
+
+- **animation-timing-function**：
+ - 定义动画在不同时间点的速度变化。
+ - 常用值：
+ - `linear`：匀速变化。
+ - `ease`：开始慢，结束慢，中间快。
+ - `ease-in`：开始慢。
+ - `ease-out`：结束慢。
+ - `ease-in-out`：开始和结束都慢。
+
+- **animation-delay**：
+ - 定义动画开始之前的延迟时间。
+
+- **animation-iteration-count**：
+ - 定义动画的重复次数，可以是整数或`infinite`（无限次）。
+
+- **animation-direction**：
+ - 定义动画的播放方向。
+ - 可选值：
+ - `normal`：正常播放。
+ - `reverse`：反向播放。
+ - `alternate`：交替播放（正向和反向）。
+ - `alternate-reverse`：交替反向播放。
+
+- **animation-fill-mode**：
+ - 定义在动画播放之前或之后元素的样式。
+ - 可选值：
+ - `none`：默认值，不影响元素样式。
+ - `forwards`：保持动画结束时的样式。
+ - `backwards`：保持动画开始时的样式。
+ - `both`：同时应用`forwards`和`backwards`。
+
+- **animation-play-state**：
+ - 控制动画的播放状态。
+ - 可选值：
+ - `running`：动画运行中。
+ - `paused`：动画暂停。
+
+### 关键帧规则
+- **@keyframes**：定义动画的关键帧。
+- 语法：
+ ```css
+ @keyframes animation-name {
+ from {
+ /* 起始状态 */
+ }
+ to {
+ /* 结束状态 */
+ }
+ }
+ ```
+ - 可以使用百分比定义中间状态，如 `0%`、`50%`、`100%`。
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.html"
new file mode 100644
index 0000000000000000000000000000000000000000..49f8da9a1a1d52fd4abdf8d844ebe06745fd9ab1
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.html"
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ 固定导航条
+
+
+
+
+
+
你好
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\256\232\344\275\215\344\275\234\344\270\232.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\256\232\344\275\215\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b37f0a6babace2918b6c918e691b868378002abb
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\256\232\344\275\215\344\275\234\344\270\232.md"
@@ -0,0 +1,447 @@
+### 二十六、定位
+
+1. 创建一个在其父级容器中水平、垂直居中的绝对定位元素，如下效果：
+
+
+源码：
+
+```html
+
+
+
+
+
+
+ 绝对定位与居中对齐示例
+
+
+
+
+
+
在其父级容器中水平、垂直居中的绝对定位的DIV
+
+
你好
+
+
+
+
+
+
+```
+
+效果图：
+
+3. 创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示
+
+
+源码：
+
+```html
+
+
+
+
+
+
+ 提示框示例
+
+
+
+
+ 你好我是杨成豪，想听我说马普吗
+ 老板，能不能再相应些？
+
+
+
+
+
+```
+
+效果图：
+
+4. 使用提供的素材，利用精灵图技术实现如下效果
+
+素材：
+
+
+
+效果：
+
+
+源码：
+
+```html
+
+
+
+
+
+
+ 精灵图技术六图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+效果图：
+
+5. 使用提供的素材，实现如下效果
+
+素材：
+
+
+
+
+
+```
+文字素材：广东深圳宝安区建安一路海雅缤纷城4楼
+```
+
+效果：
+
+
+
+源码：
+
+```html
+
+
+
+
+
+
+ 精灵图技术万达影城
+
+
+
+
+
+
+
+
+
+ 广东深圳宝安区建安一路海雅缤纷城4楼
+
+
+
+
【海雅缤纷城】万达影城（深圳海雅广场...
+
单人电影票，可观看2D
+
+
+
+
+
+
+ 广东深圳宝安区建安一路海雅缤纷城4楼
+
+
+
+
【海雅缤纷城】万达影城（深圳海雅广场...
+
单人电影票，可观看2D
+
+
+
+
在其父级容器中水平、垂直居中的绝对定位的DIV
+
遥遥领先
+
+
+
+
+
+```
+
+---
+
+**作答效果图：**
+
+
+
+---
+
+#### 3. 实现如下效果-小火箭
+
+**素材：**
+
+
+
+**题目演示图：**
+
+
+
+---
+
+**源代码：**
+
+```html
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+```
+
+---
+
+**作答效果图：**
+
+
+
+---
+
+#### 4. 实现如下效果-纸牌
+
+**素材：**
+
+- 
+- 
+
+**题目演示图：**
+
+
+
+---
+
+**源代码：**
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
《大鱼》
+
演唱：周深
+
海浪无声将夜幕深深淹没，漫过天空尽头的角落
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
遥遥领先
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\231\275\347\206\212.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\231\275\347\206\212.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b16e7c83bcfaba413e71d6065d58d377a4cf0b65
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\231\275\347\206\212.html"
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\277\273\350\275\254.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\277\273\350\275\254.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7d1e587ae35931961da93dfd307bab4a3003c7ef
--- /dev/null
+++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\277\273\350\275\254.html"
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+