diff --git "a/\346\235\216\346\200\235/20241021-\345\256\232\344\275\215\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md" "b/\346\235\216\346\200\235/20241021-\345\256\232\344\275\215\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..45593af1dd1a78c9a7a8ea85cf86420fd80125ed --- /dev/null +++ "b/\346\235\216\346\200\235/20241021-\345\256\232\344\275\215\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md" @@ -0,0 +1,203 @@ +## 定位 + +### 相对定位 +**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。 + + +相对定位属性，通过如下格式： + +``` + position: relative; + left: 50px; + top: 50px; +``` + +#### 相对定位的定位值 + +- left：盒子右移 + +- right：盒子左移 + +- top：盒子下移 + +- bottom：盒子上移 + +PS：负数表示相反的方向。 + +相对定位：相对于自己原来的位置 +横坐标：正值表示向右偏移，负值表示向左偏移 +纵坐标：正值表示向下偏移，负值表示向上偏移 + +相对定位：不脱标，别人不会把它的位置挤走 + +#### 相对定位的用途 + +如果想把一个div放到另一个div之上，一般不用相对定位来做。相对定位，就两个作用： + +- （1）微调元素 +- （2）做绝对定位的参考，子绝父相 + + +### 绝对定位 + +**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。 + +格式举例如下： + +``` + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ +``` + + **绝对定位脱标** + +绝对定位的盒子脱离了标准文档流。 + +所以，所有的标准文档流的性质，绝对定位之后都不遵守了。 + +绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。 + +#### 绝对定位的参考点 + +1. 如果用**top描述**，那么参考点就是页面的左上角，而不是浏览器的左上角 +2. 如果用**bottom描述**，那么参考点就是浏览器首屏窗口尺寸对应的页面的左下角 +3. 以盒子为参考点，一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 + （1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷 + （2）不一定是相对定位，任何定位，都可以作为儿子的参考点 + （3）绝对定位的儿子，无视参考的那个盒子的padding + +4. 固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。 + +5. 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也能在最上层。 + + z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。 + + +**层级：** + +（1）必须有定位（除去static） + +（2）用`z-index`来控制层级数。 + + +## 练习 +创建一个在其父级容器中水平、垂直居中的绝对定位元素 +[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-22%20224916.png) +``` + + + +
+
8888
+
+ + +``` + +在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容 +[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-22%20224941.png) +``` + + + +
+
8888
+
+
+ 123y781436666666666666666666666666666666666 + 44444444444444444444444444444444444444444444 + 444444444444444444444444444444444444444444444 + 44444444444444444444 + 4444444444444444444444444444444444444444 + 6666666666666666666666666666666666666666666666 + 66666666666666666666 +
+``` + +创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示 +[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-22%20225000.png) +``` + + + +
+ 我是提示文字 + 你来晚了哈 +
+ +``` \ No newline at end of file diff --git "a/\346\235\216\346\200\235/20241023-\351\200\211\346\213\251\345\231\250.md" "b/\346\235\216\346\200\235/20241023-\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..f9ebff444a724c164679b2991001e25e2e000833 --- /dev/null +++ "b/\346\235\216\346\200\235/20241023-\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,246 @@ +## 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中的**结构伪类选择器**：即通过**结构**来进行筛选。 + + +**格式** + +- `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。 + +- `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元素。要配合锚点使用。 + +### 伪元素选择器 + +伪元素选择器的标志性符号是 `::`。 + +**格式** + +- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 + +- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 + +`E:after`、`E:before `在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，`E:after`、`E:before`会被自动识别为`E::after`、`E::before`，按伪元素来对待，这样做的目的是用来做兼容处理。 + +- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。 + +- `E::first-line` 设置元素 E 里面的**第一行**的样式。 + +- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。 + + +## 练习 + +使用提供的素材，利用精灵图技术实现如下效果 +[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-23%20210051.png) +``` + + + +

付款图标 +

存款图标 +

删除图标 +

粘贴图标 +

笑脸图标 +

编辑图标 +``` + + +使用提供的素材，实现如下效果 +[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-23%20212606.png) + +``` + +``` \ No newline at end of file diff --git "a/\346\235\216\346\200\235/20241024-\345\261\236\346\200\247\345\212\250\347\224\273.md" "b/\346\235\216\346\200\235/20241024-\345\261\236\346\200\247\345\212\250\347\224\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..91cf9dd25924388aa731e769636e2343763f7d7e --- /dev/null +++ "b/\346\235\216\346\200\235/20241024-\345\261\236\346\200\247\345\212\250\347\224\273.md" @@ -0,0 +1,613 @@ +## 属性 + +### 文本 + +#### text-shadow：设置文本的阴影 + +格式举例： + +``` + text-shadow: 20px 27px 22px pink; +``` + +参数解释：水平位移 垂直位移 模糊程度 阴影颜色。 + +text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。 + +#### 盒模型中的 box-sizing + +box-sizing属性。它的属性值可以是：content-box、border-box。解释如下。 + +**外加模式：**（css的默认方式） +``` + box-sizing: content-box; +``` +此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。 + +**内减模式：** + +``` + box-sizing: border-box; +``` +此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。 + + +### 边框 + +### 边框圆角：`border-radius` 属性 + +边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。 + +单个属性的写法： + +``` + border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径 + +``` + +复合写法： + +``` + border-radius: 60px/120px; //参数：水平半径/垂直半径 + + border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值 + + border-radius: 20px 60px; +``` + +最简洁的写法：（四个角的半径都相同时） + +``` + border-radius: 60px; +``` + +### 边框阴影：`box-shadow` 属性 + +格式举例： + +``` + box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 +``` + +参数解释： + +- 水平偏移：正值向右 负值向左。 + +- 垂直偏移：正值向下 负值向上。 + +- 模糊程度：不能为负值。 + +设置边框阴影不会改变盒子的大小 + +## 动画 + +### 过渡：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;` 过渡延迟。多长时间后再执行这个过渡动画。 + +上面的四个属性也可以写成**综合属性**： + +``` + transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; + + transition: all 3s linear 0s; +``` + +### 2D转换 + +2D转换包括：缩放、移动、旋转。 +#### 缩放：`scale` + +格式： + +``` + transform: scale(x, y); + + transform: scale(2, 0.5); +``` + +参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 + +取值：大于1表示放大，小于1表示缩小。不能为百分比。 + +#### 位移：translate + +格式： +``` + transform: translate(水平位移, 垂直位移); +``` + +参数解释： + +- 参数为百分比，相对于自身移动。 + +- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 + +#### 旋转：rotate + +格式： + +``` + transform: rotate(角度); + + transform: rotate(45deg); +``` + +参数解释：正值 顺时针；负值：逆时针。 + +### 3D转换 + +旋转：rotateX、rotateY、rotateZ +格式： +``` + transform: rotateX(360deg); //绕 X 轴旋转360度 + + transform: rotateY(360deg); //绕 Y 轴旋转360度 + + transform: rotateZ(360deg); //绕 Z 轴旋转360度 +``` + +移动：translateX、translateY、translateZ +格式： +``` + transform: translateX(100px); //沿着 X 轴移动 + + transform: translateY(360px); //沿着 Y 轴移动 + + transform: translateZ(360px); //沿着 Z 轴移动 +``` + +透视：perspective +格式有两种写法： + +- 作为一个属性，设置给父元素，作用于所有3D转换的子元素 + +- 作为 transform 属性的一个值，做用于元素自身。 + +### 动画 + +#### 定义动画的步骤 + +（1）通过@keyframes定义动画； + +（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； + +（3）在指定元素里，通过 `animation` 属性调用动画。 + +定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； +animation动画属性 +（1）动画名称： + animation-name: move; +（2）执行一次动画的持续时间： + animation-duration: 4s; +备注：上面两个属性，是必选项，且顺序固定。 +（3）动画的执行次数： + animation-iteration-count: 1; //iteration的含义表示迭代 +属性值`infinite`表示无数次。 +（3）动画的方向： + animation-direction: alternate +属性值：normal 正常，alternate 反向。 +（4）动画延迟执行： + animation-delay: 1s; +（5）设置动画结束时，盒子的状态： + animation-fill-mode: forwards; +属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。 +（6）运动曲线： + animation-timing-function: ease-in; +属性值可以是：linear ease-in-out steps()等。 + +注意，如果把属性值写成steps()，则表示动画**不是连续执行**，而是间断地分成几步执行。 + + +## 练习 + +小米 +![alt text](image.png) +``` + + + +
+
+ +
+
+ + +
+
+ + +
+
+``` + +旋转 +![alt text](image-1.png) +``` + +``` +小火箭 +![alt text](image-2.png) +``` + + + +
+ +
+``` +纸牌 +![alt text](image-7.png) +``` + +``` +百度钱包旋转 +![alt text](image-4.png) +``` + + + +
+
+
+
+``` + +歌曲 +![alt text](image-8.png) +``` + +``` + +鱼 +![alt text](image-6.png) +``` + +``` +白熊 +![alt text](<屏幕截图 2024-10-27 012256.png>) +``` + +``` \ No newline at end of file