From 2bed0f6fd0aeecd26a6771e5e3c1f23e30b077dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E9=9B=AA=E8=8A=AC?= <2878756581@qq.com>
Date: Sat, 26 Oct 2024 12:42:55 +0800
Subject: [PATCH] =?UTF-8?q?1025=E7=AC=94=E8=AE=B0=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...47\351\200\211\346\213\251\345\231\250.md" | 428 ++++++++++++++++++
1 file changed, 428 insertions(+)
create mode 100644 "\351\273\204\351\233\252\350\212\254/20241025-\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.md"
diff --git "a/\351\273\204\351\233\252\350\212\254/20241025-\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.md" "b/\351\273\204\351\233\252\350\212\254/20241025-\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000..00142d4
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\254/20241025-\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,428 @@
+## CSS3选择器
+### 结构伪类选择器:
+1. 格式：（第一部分）
+ - `E:first-child`：匹配父元素的第一个子元素E
+ - `E:last-child`：匹配父元素的最后一个子元素E
+ - `E:nth-child(n)`：匹配父元素的第一个子元素E，n从1开始算起
+ - `E:nth-child(odd)`：匹配奇数
+ - `E:nth-child(even)`：匹配偶数
+ - `E:nth-last-child(n)`：匹配父元素的倒数第n个子元素E
+
+2. 格式：（第二部分）
+ - `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。
+
+3. 格式：（第三部分）
+ - `E:empty`：匹配没有任何子节点（包括空格等text节点）的元素E。
+ - `E:target`：匹配相关URL指向的E元素。要配合锚点使用。
+
+### 伪元素选择器::
+1. 格式：（第一部分）
+ - `E::before`：设置在元素E前面的内容，配合content属性一起使用。
+ - `E::after`：设置在元素E后面的内容，配合content属性一起使用。
+ ```css
+ span::before{
+ content:"好好学习";
+ color:red;
+ }
+ ```
+
+2. 格式：（第二部分）
+ - `E::first-letter`：设置元素 E 里面的第一个字符的样式。
+ - `E::first-line`：设置元素 E 里面的第一行的样式。
+ - `E::selection`：设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
+
+## CSS3的属性
+### 文本
+1. text-shadow：设置文本阴影
+
+ text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开
+
+ 语法：
+ ```css
+ text-shadow: 水平位移 垂直位移 模糊程度 阴影颜色;
+ ```
+2. 设置文字凹凸效果
+ ```css
+ .tu {
+ text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
+ /* 左上角放白色的阴影，右下角放黑色的阴影，就达到了凸上来的效果。 */
+ }
+ .ao {
+ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
+ /* 左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果。 */
+ }
+ ```
+ ```html
+ 生命壹号
+ 生命壹号
+ ```
+
+### box-sizing属性
+指定盒子宽度和高度的计算方式。它的属性值可以是：`content-box`、`border-box`
+
+**外加模式**（css的默认方式）：box-sizing: content-box;
+- 盒子的实际宽度 = 设置的 width + padding + border
+
+**内减模式**：box-sizing: border-box;
+- 盒子的实际宽度 = 设置的 width
+
+### 边框
+1. border-radius：边框圆角
+
+圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。
+
+- 单个属性的写法：border-top-left-radius: 水平半径 垂直半径;
+- 复合写法：border-radius: 水平半径/垂直半径;
+
+2. box-shadow：边框阴影
+```css
+box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 (inset);
+```
+- 水平偏移：正值向右 负值向左。
+- 垂直偏移：正值向下 负值向上。
+- 模糊程度：不能为负值。
+- 最后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影
+
+### 过渡 `transition`
+实现元素不同状态间的平滑过渡（补间动画）
+- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+transition属性：
+1) `transition-property: all;`：如果希望所有的属性都发生过渡，就使用all。
+2) `transition-duration: 1s;`：过渡的持续时间。
+3) `transition-timing-function: linear;`：运动曲线。属性值可以是：
+ - `linear` 线性
+ - `ease` 减速
+ - `ease-in` 加速
+ - `ease-out` 减速
+ - `ease-in-out` 先加速后减速
+4) `transition-delay: 1s;`：过渡延迟。多长时间后再执行这个过渡动画。
+
+可以写成综合属性：
+```
+transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+```
+
+### 2D转换 transform
+转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
+
+2D转换包括：缩放、移动、旋转。
+
+缩放 `scale`
+ 格式：
+ ```css
+ transform: scale(x, y);
+ ```
+ - x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。
+ - 如果只写一个值就是等比例缩放。
+ - 取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+位移 `translate`
+ 格式：
+ ```css
+ transform: translate(水平位移, 垂直位移);
+ ```
+ - 参数为百分比，相对于自身移动。
+ - 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+ 使用位移让盒子居中：
+ ```css
+ div {
+ width: 600px;
+ height: 60px;
+ background-color: red;
+ position: absolute; /* 绝对定位的盒子 */
+ left: 50%; /* 首先，让左边线居中 */
+ top: 0;
+ transform: translate(-50%); /* 然后，利用translate，往左走自己宽度的一半*/
+ }
+ ```
+
+旋转 `rotate`
+ 格式：
+ ```css
+ transform: rotate(角度);
+ /* 正值 顺时针；负值：逆时针。 */
+ ```
+ 设置旋转之后，同时还要给盒子设置 transition 过渡。如果没有过渡的代码，旋转会直接一步到位，没有旋转的过程
+
+### 3D转换 transform
+
+旋转：rotateX、rotateY、rotateZ
+ 浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
+ 格式：
+ ```css
+ transform: rotateX(360deg); /* 绕 X 轴旋转360度 */
+ transform: rotateY(360deg); /* 绕 Y 轴旋转360度 */
+ transform: rotateZ(360deg); /* 绕 Z 轴旋转360度 */
+ ```
+
+移动：translateX、translateY、translateZ
+ 格式：
+ ```css
+ transform: translateX(100px); /* 沿着 X 轴移动 */
+ transform: translateY(360px); /* 沿着 Y 轴移动 */
+ transform: translateZ(360px); /* 沿着 Z 轴移动 */
+ ```
+
+# 作业
+## 1
+### 效果图
+
+### 代码
+```
+css
+body {
+ background-color: #eee;
+}
+.d {
+ width: 800px;
+ height: 300px;
+ padding-left: 20px;
+ margin: 80px auto;
+}
+
+.d1 {
+ width: 230px;
+ height: 300px;
+ text-align: center;
+ margin-right: 20px;
+ background-color: white;
+ float: left;
+ position: relative;
+ top: 0;
+ overflow: hidden;
+}
+
+.d1:hover {
+ box-shadow: 0 0 15px gray;
+ top: -5px;
+}
+.d1 .dd {
+ position: absolute;
+ left: 0;
+ bottom: -80px;
+ width: 100%;
+ height: 80px;
+ background-color: chocolate;
+ transition: all 1s;
+}
+
+img {
+ margin-top: 30px;
+}
+
+.d1:hover .dd {
+ bottom: 0;
+}
+
+html
+
+```
+## 2
+### 效果图
+
+### 代码
+```
+css
+div {
+ width: 200px;
+ height: 200px;
+ margin: 50px;
+}
+
+.d1 {
+ background-color: red;
+ color: white;
+ font-size: 50px;
+ transition: all 1s;
+}
+
+.d1:hover {
+ transform: rotate(-405deg);
+}
+
+html
+
+ 遥遥领先
+
+```
+## 3
+### 效果图
+
+### 代码
+```
+css
+div {
+ width: 1000px;
+ height: 800px;
+ background-color: chocolate;
+}
+
+img {
+ margin-top: 600px;
+ transition: all 2s;
+ transform: rotate(45deg);
+}
+
+div:hover img {
+ transform: translate(900%, -350%) rotate(45deg);
+}
+
+html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+