diff --git "a/\350\224\241\345\234\243\346\201\251/20241025\345\212\250\347\224\273.md" "b/\350\224\241\345\234\243\346\201\251/20241025\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..37968c45a97a0d49fde3339fd7031a99d61824d6
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/20241025\345\212\250\347\224\273.md"
@@ -0,0 +1,404 @@
+### 结构伪类选择器
+比如：:link,:visited,:hover,:active,:focus
+
+格式：1. E：first-child:匹配父元素的读一个子元素E。
+
+2. E:last-child:匹配父元素的最后一个子元素E。
+3. nth-child(n):第n个子元素。注意：是从1开始，不是从0开始。
+4. nth-child(odd):匹配基数
+5. nth-child(even):匹配偶数
+6. nth-last-child(n):匹配倒数第n个子元素
+理解：这里的父级元素指的是：以E元素的父级元素为参考。
+
+先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效。
+
+```html
+
+ - 1
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ - 7
+ - 8
+ - 9
+ - 10
+
+```
+1. 如果选择器写成li:nth-child(2)，则表示第2个 li
+2. 写成：li:nth-child(2n) 表示所有第偶数个li
+3. li-nth-child(2n+1) 表示所有奇数个li
+4. li:nth-child(-n+5) 表示前5个li
+5. 写成li:nth-last-child(-n+5)，则表示最后5个 li
+6. 写成li:nth-child(7n)，则表示选中7的倍数
+### 格式：（第二部分）
+E-first-of-type：匹配同类型中第一个同级兄弟元素E
+E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
+
+E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
+
+E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
+
+### 格式：（第三部分）
+E：empty：匹配没有任何子节点（包括空格等text节点）的元素E
+
+
+E:target:匹配关于URL指向的E元素，要配合锚点使用。
+
+
+### 伪元素选择器
+标识符是：：
+#### 1.格式（第一部分）
+E::before 设置在元素E前面
+E：：after 设置在元素E后面
+要配合content属性使用
+
+这两个属性添加的伪元素，是行内元素，需要装换成块状元素才能设置宽高。
+
+#### 2. 格式（第二部分）
+E：：first-letter 设置元素E里面第一个字符样式
+E：：first-line 设置元素E里面的第一行样式
+E::selection设置元素E里面被鼠标选中的区域样式（一般设置颜色和背景颜色）
+
+
+
+
+### 文本
+### text-shadow：设置文本的阴影
+
+格式举例： text-shadow:20px 23px 22px pink;
+
+解释：水平位移 垂直位移 模糊程度 阴影颜色
+
+#### 举例：凹凸文字效果
+text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开
+```css
+ .tu {
+ text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
+ }
+
+ .ao {
+ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
+ }
+```
+
+### 盒模型中的box-sizing属性
+#### 外加模式：（css默认方式）
+```
+box-sizing:content-box
+```
+设置的width和height 是内容区域的宽高。盒子的实际宽度=设置的width+padding+border，，改变padding ，boder大小不会改变内容的宽高，而是盒子的总宽度发生变化。
+
+#### 内减模式（注意）
+```
+box-sizing:border-box;
+```
+设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
+
+## 边框
+### 边框圆角：border-radius属性
+边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径：如果二者相等，就是圆；如果二者不等， 就是椭圆。
+
+//参数解释：水平半径 垂直半径
+```css
+ border-radius: 60px/120px; //参数：水平半径/垂直半径
+
+ border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
+
+ border-radius: 20px 60px;
+```
+四个角半径都相同时：
+```
+boder-radius:60px;
+```
+### 边框阴影：box-shadow属性
+格式举例：
+
+```
+ box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+
+ box-shadow: 15px 21px 48px -2px #666;
+```
+水平偏移：正值向右 负值向左。
+
+垂直偏移：正值向下 负值向上。
+
+模糊程度：不能为负值。
+
+
+
+
+
+### 过度：transition
+可以实现元素不同状态的平滑过度（补间动画），用来制作动画效果
+
+transition 包括以下属性：
+```css
+transistiom-property:all;希望所有的属性都过度，就使用all
+transition-duration：1s;过渡的持续时间
+transition-timing-function:linear:运动曲线.属性值可以是：
+linear：线性
+ease：减速
+ease-in；加速
+ease-out 减速
+ease-in-out先加速后减速
+
+transition-delay：1s;过渡延迟。延迟多长时间后再执行过渡动画，
+```
+
+上面的四个属性也可以写成综合属性：
+```css
+transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+
+ transition: all 3s linear 0s;
+```
+
+### 2D装换
+可以实现元素的位移、旋转、变形、缩放
+
+2D转换包括：缩放、移动、旋转。
+
+### 1.缩放:scale
+
+格式：
+```css
+transform:scale(x,y);
+transform:scale(2,0.5)
+```
+参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
+
+取值：大于1表示放大，小于1表示缩小。不能为百分比
+
+### 2.位移：translate
+格式：
+```css
+transform: translate(水平位移, 垂直位移);
+
+ transform: translate(-50%, -50%);
+```
+参数解释：
+
+参数为百分比，相对于自身移动。
+
+正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
+
+### 3.旋转：rotate
+格式：
+```css
+transform:rotate(角度);
+transform:rotate(45deg)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+# 效果
+
+
+
+# 代码
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ ddys
+
+
+
+
+
+```
+
+# 效果
+
+
+
+# 效果图
+```html
+
+
+
+
+
+ Document
+
+
+
+
+ 
+
+
+```
+
+# 效果图
+电子产品
+
+# 代码
+```html
+
+```
+# 效果图
+
+
+# 代码
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+