From 50fba0c9af2f6cda912bdc989370f8c56f99fb5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=AD=9F=E5=BD=A4?= <3436235697@qq.com> Date: Tue, 22 Oct 2024 16:47:36 +0800 Subject: [PATCH 1/3] =?UTF-8?q?20241021=E5=AE=9A=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20241021-\345\256\232\344\275\215.md" | 342 ++++++++++++++++++ 1 file changed, 342 insertions(+) create mode 100644 "\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" diff --git "a/\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" "b/\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" new file mode 100644 index 0000000..faa0632 --- /dev/null +++ "b/\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" @@ -0,0 +1,342 @@ +## 定位 position +### static定位-静态定位 +1. HTML元素的默认值--没有定位，遵循正常的文档流对象 +2. 不会受到top bottom left right 影响 +3. 默认布局：从上到下，从左到右 +### fixed定位--固定定位 +1. 元素的位置相对于浏览器的窗口是固定位置，不会移动 +2. 用途 + - 网页右下角的返回顶部 + - 顶部导航条 +### relative定位--相对定位 +1. 相对定位的元素的定位是相对其正常位置 +2. 移动相对定位元素，它原本的所占空间不变 +3. 在确定元素的默认位置之后，通过 `top bottom left right `设置偏移量 +4. 相对定位的元素经常被用来作为绝对定位元素的容器块 +5. 不脱标，老家留坑--别人不会把它的位置挤走 +6. 用途 + - 微调元素 + - 做绝对定位的参考,`子绝父相` +### absolute定位--绝对定位 +1. 定义横纵坐标。原点在父容器的左上角或者左下角，纵坐标用`top`或者`bottom`表示，横坐标用`left`表示 +2. 绝对定位的盒子脱离标准文档流 +3. 参考点 + - 如果用top描述，那么参考点就在页面的左上角，不是浏览器的左上角 + - 如果用bottom描述，那么参考点就是`浏览器首屏`的窗口尺寸，对应的页面的左下角 + - 以盒子为参考点 + + 一个绝对定位的元素，如果父辈的元素中出现了定位，那么以这个父辈的元素为参考点 + + ***子绝父相***：可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。父亲浮动，设置相对定位(零偏移)，然后让儿子绝对定位一定的距离 + + 要听最近的已经定位的祖先元素，不一定是父亲，可能是爷爷 + + 不一定是相对定位，任何定位，都可以作为儿子的参考点 + + 绝对定位的儿子，无视参考的那个盒子的padding +### sticky定位--粘性定位 +1. `position: sticky;` 基于用户的滚动位置来定位 +2. 粘性定位的元素是依赖于用户的滚动，在 `position:relative` 与`position:fixed` 定位之间切换 +3. 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置 +### 让绝对定位中的盒子在父亲里居中 +``` + div { + width: 600px; + height: 60px; + position: absolute; 绝对定位的盒子 + left: 50%; 首先，让左边线居中 + top: 0; + margin-left: -300px; 然后，向左移动宽度（600px）的一半 + } +``` +1. `left:50%; margin-left:负的宽度的一半` +2. `top:50%; margin-top:负的高度的一半` +### z-index属性 +1. z-index属性：表示谁压着谁。数值大的压盖住数值小的 +2. 属性值大的位于上层，属性值小的位于下层 +3. z-index值没有单位，就是一个正整数。默认的z-index值是0 +4. 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素 +5. 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用** +6. 从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层 +### 层级 +1. 必须有定位（除去static） +2. 用`z-index`来控制层级数 + +##### 作业 +1. +``` + + + + + + Document + + + +
+
8888
+
+ + + +``` +2. +``` + + + + + + Document + + + +
+
8888
+
+ 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + 888888888888888888888888888888888 + +
+
+ + +``` +3. +``` + + + + + + Document + + + +
昂，你来晚啦
+ + +``` +4. +``` + + + + + + Document + + + +
+
付款图标
+
存款图标
+
删除图标
+
粘粘图标
+
笑脸图标
+
编辑图标
+
+ + +``` +5. +``` + + + + + + Document + + + +
+

+
+ +
+

广东深圳宝安区建安一路海雅缤纷城4楼

+
+

【海雅缤纷城】万达影城（深圳海雅广场...

+

单人电影票，可观看2D

+
+

￥35

+

￥80

+

已售225

+
+ +
+ +
+ + +``` \ No newline at end of file -- Gitee From 2c8e0bed1f003f16c7c83d102835bf7c1f92aa3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=AD=9F=E5=BD=A4?= <3436235697@qq.com> Date: Wed, 23 Oct 2024 12:31:49 +0800 Subject: [PATCH 2/3] =?UTF-8?q?20241023css=E9=80=89=E6=8B=A9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20241021-\345\256\232\344\275\215.md" | 26 +++++---- ...51\345\231\250\350\257\246\350\247\243.md" | 54 +++++++++++++++++++ 2 files changed, 70 insertions(+), 10 deletions(-) create mode 100644 "\345\220\264\345\255\237\345\275\244/20241023-css\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" diff --git "a/\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" "b/\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" index faa0632..a94ab6e 100644 --- "a/\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" +++ "b/\345\220\264\345\255\237\345\275\244/20241021-\345\256\232\344\275\215.md" @@ -56,8 +56,7 @@ ### 层级 1. 必须有定位（除去static） 2. 用`z-index`来控制层级数 - -##### 作业 +## 作业 1. ``` @@ -199,6 +198,9 @@ height: 20px; background-image: url(../image/jlt.png); background-size: 60px 40px; + /* 设置图片大小为60px 三个图标都为20px大小 + 高为40px，图标高也为20px + */ } .sp1{ background-position: 0 0; @@ -261,18 +263,22 @@ height: 28px; background-image: url(../image/dtc.png); background-position: -108px 0; - position: absolute; - top: -9px; - left: 13px; + position: absolute;/* 子绝父相 */ + top: -8px; + left: 14px; } h4{ background-color: black; color: white; width: 308px; - height: 40px; - line-height: 40px; - position: absolute; - top: 156px; + height: 38px; + font-size: 14px; + line-height: 38px; + position: absolute;/* 子绝父相 */ + top: 158px; + } + h4 span{ + margin-left: 15px; } .hy{ margin-top: 5px; @@ -324,7 +330,7 @@
-

广东深圳宝安区建安一路海雅缤纷城4楼

+

广东深圳宝安区建安一路海雅缤纷城4楼

【海雅缤纷城】万达影城（深圳海雅广场...

单人电影票，可观看2D

diff --git "a/\345\220\264\345\255\237\345\275\244/20241023-css\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" "b/\345\220\264\345\255\237\345\275\244/20241023-css\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" new file mode 100644 index 0000000..a51f959 --- /dev/null +++ "b/\345\220\264\345\255\237\345\275\244/20241023-css\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" @@ -0,0 +1,54 @@ +### css3现状 +1. 移动端支持优于pc端 +2. 不断改进中 +3. 应用相对广泛 +### 符号 +* `[]`表示可选项 +* `||`表示或者 +* `|` 表示多选一 +* `?`0个或1个 +* `*`0个或多个 +* `{}`范围 +### css3选择器 +1. div 标签选择器 +2. .box 类选择器 +3. #box id选择器 +4. div p 后代选择器 +5. div.box 交集选择器 +6. div,p,span 并集选择器 +7. div>p 子代选择器 +8. div+p 选中的div后面相邻的第一个p +9. div~p 选中的div后面所有的p +10. `*` 通配符 +### 属性选择器 +1. 标志性符号`[]` +2. `E[title]` 选中页面的E元素，并且E存在 title 属性 +3. `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc +4. `E[attr~=val]`选择具有 attr 属性且属性值为：用空格分隔的字词列表，其中一个等于val的E元素.如`
` +5. `E[attr|=val]`表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的 +6. `E[title^="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头 +7. `E[title$="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾 +8. `E[title*="abc"]`选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc +### 结构伪类选择器 +1. 格式（第一部分） + + `E:first-child`匹配父元素的第一个子元素E + + `E:last-child`匹配父元素的最后一个子元素E + + `E:nth-child(n)`匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起 + + `E:nth-child(2n+1)`匹配奇数 + + `E:nth-child(2n)`匹配偶数 + + `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元素。要配合锚点使用 +### 伪元素选择器 + + 块级元素才起作用 + + `E::before` 设置在元素E的前面的内容，配合content属性（撑高）一起使用 + + `E::after` 设置在元素E的后面的内容，配合content属性一起使用 + + `E::first-letter`设置元素 E 里面的第一个字符的样式 + + `E::first-line`设置元素 E 里面的第一行的样式 + + `E::selection`设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色） \ No newline at end of file -- Gitee From 28e97bb741c8eca9427d42f9f57687af4c0d51f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=AD=9F=E5=BD=A4?= <3436235697@qq.com> Date: Sun, 27 Oct 2024 13:14:15 +0800 Subject: [PATCH 3/3] =?UTF-8?q?20241024=E5=B1=9E=E6=80=A7=E4=BD=9C?= =?UTF-8?q?=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...36\346\200\247\350\257\246\350\247\243.md" | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 "\345\220\264\345\255\237\345\275\244/20241024-css\345\261\236\346\200\247\350\257\246\350\247\243.md" diff --git "a/\345\220\264\345\255\237\345\275\244/20241024-css\345\261\236\346\200\247\350\257\246\350\247\243.md" "b/\345\220\264\345\255\237\345\275\244/20241024-css\345\261\236\346\200\247\350\257\246\350\247\243.md" new file mode 100644 index 0000000..73625c7 --- /dev/null +++ "b/\345\220\264\345\255\237\345\275\244/20241024-css\345\261\236\346\200\247\350\257\246\350\247\243.md" @@ -0,0 +1,102 @@ +## 文本 +### `text-shadow`设置文本阴影 +1. text-shadow：20px 20px 20px red; +2. text-shadow：水平位移，垂直位移，模糊程度，阴影颜色 +3. 凹凸文字效果：给左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果 + + .tu { + text-shadow: -1px -1px 1px black, 1px 1px 1px white; + } + + .ao { + text-shadow: -1px -1px 1px white, 1px 1px 1px black; + } +### 盒模型中的box-sizing属性 +1. 属性值可以是content-box，border-box +2. box-sizing: content-box; + + 此时设置的width和height是内容区域的宽高，盒子的实际高度=设置的宽+padding+border。改变border和padding的大小，不会影响到内容的宽高，盒子的总宽高变化了 +3. box-sizing:border-box; + + 此时设置的width和height是盒子的宽高，盒子的实际高度=设置的宽，改变border和padding的大小，会改变内容的宽高，盒子的总宽高不变 +## 边框 +### 边框圆角`border-radius`属性 +1. border-radius：20px 20px; 水平半径 垂直半径 +2. border-radius：20px 20px 60px 90px; 从左上开始，顺时针。如果当前角没有值，取对角的值 +3. border-radius：20px; 四个角半径都相同 +### 边框阴影`box-shadow`属性 +1. box-shadow：水平阴影，垂直阴影，模糊程度，阴影大小，阴影颜色 +2. 内阴影`inset` +### 边框图片 +1. 边框图片路径:border-image-source:url(''); +2. 边框图片裁剪：border-image-slice:20; +3. 边框图片平铺：border-image-repeat:stretch; + + repeat:正常平铺，但是可能会显示不完整 + + round：平铺，但是保证图片完整 + + stretch：拉伸显示 +4. 边框图片宽度：border-image-width:27px; +## 过渡：transition +1. 所有属性都发生过渡：transition-property:all; +2. 过渡持续时间：transition-duraton:1s; +3. 运动曲线：transition-timing-function:linear; + + linear:线性 + + ease:减速 + + ease-in:加速 + + ease-out:减速 + + ease-in-out:先加速再减速 +4. 过渡延迟：transition-delay:1s; +5. 语法：transition：让哪些属性进行过渡 过渡持续时间 运动曲线 延迟时间; +## 2D转换 +### 缩放`scale` +1. transform:scale(x,y);水平，垂直 大于1是放大，小于1是缩小 +### 位移`translate` +1.transform：translate(水平位移，垂直位移); + + 参数可以百分比 + + 正值：向右和向下。负值：向左和向上。如果只有一个值，表示水平 +2. 盒子居中 + ``` + position:absolute; + left:50%; + transform:translate(-50%); + ``` +### 旋转`rotate` +1. transform:rotate(角度); + + 正值：顺时针 + + 负值：逆时针 +2. 旋转时默认以盒子的正中心为坐标原点，如果想要改变坐标原点使用`transform-origin` + ``` + transform-origin:水平坐标 垂直坐标; + transform-origin:50px 50px; + transform-origin:center bottom;以盒子底部的中心为坐标原点 + ``` +## 3D转换 +1. 旋转：rotateX rotateY rotateZ +2. 移动：translateX translateY translateZ +3. 透视：perspective + + 作为一个属性，设置给父元素，作用于所有的3D转换子元素 + + 作为transform属性的一个值，作用于元素自身 +4. 3D呈现(transform-style)`transform-style: preserve-3d;` +## 动画 +### 步骤 +1. 通过@keyframes定义动画 +2. 将这段动画通过百分比，分隔成多个节点，然后再哥节点中分别设置属性 +3. 在指定元素中，通过animation属性调用动画 +#### **先定义再调用** +``` +定义动画： +@keyframes 动画名{ + from{初始状态} + to{结束状态} +} +调用：animation:动画名 持续时间; +``` +#### 格式 +1. animation:定义的动画名 持续时间 执行次数 是否反向 运动曲线 延迟执行 +2. infinite表示无限次 +3. 属性 + + 动画名称：animation-name:Lars; + + 执行一次动画持续时间：animation-duration:4s; + + 动画执行次数：animation-iteration-count:1;infinite无限次 + + 动画方向：animation-direction:alternate; alternate:反向；normal：正常 + + 动画延迟执行：animation-delay:1s; + + 动画结束时，盒子状态：animation-fill-mode:forwards;forwards:保持动画结束后的状态(默认)，backwards：动画结束后回到最初的状态 + + 运动曲线：animation-timing-function: ease-in;属性值可以是：linear ease-in-out steps() +3. steps()效果 + + animation: move2 4s steps(2); + + steps()：是间断地分成几步执行 \ No newline at end of file -- Gitee