diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..52a50996010f636917b9866bf84d585081596eb8 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\200.html" @@ -0,0 +1,38 @@ + + + + + Document + + + + + + +
+
666
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\211.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\211.html" new file mode 100644 index 0000000000000000000000000000000000000000..7b6d24655b59335fde1e982a30f31baa9d2fe090 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\270\211.html" @@ -0,0 +1,45 @@ + + + + + Document + + + + + +

别打开 说了别打开

+ + + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\272\214.html" new file mode 100644 index 0000000000000000000000000000000000000000..ad848cbbf1655e42785def601f58987a6e4126ac --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1021-\345\256\232\344\275\215\344\272\214.html" @@ -0,0 +1,70 @@ + + + + + Document + + + + + +
+
+ +
+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+

666666666666666666666666666666

+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\270\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..2203b701000be07100d04c5959de3e17a944442d --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\270\200.html" @@ -0,0 +1,61 @@ + + + + + Document + + + + +

付款图标 +

存款图标 +

删除图标 +

粘贴图标 +

笑脸图标 +

编辑图标 + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\272\214.html" new file mode 100644 index 0000000000000000000000000000000000000000..8188316c3f6a75c657fa2f251dbcc3d379544b74 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1023-\347\262\276\347\201\265\345\233\276\344\272\214.html" @@ -0,0 +1,104 @@ + + + + + Document + + + + + +
+
+
+
广东深圳宝安区建安一路海雅缤纷城4楼
+
+
+
+

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

+

单人电影票，可观看2D

+
+
￥35 ￥80 +
+
已售225
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..c98339785335e92460ca8c1bb712d5e2fefdedad --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\200.html" @@ -0,0 +1,86 @@ + + + + + Document + + + + + +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\211.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\211.html" new file mode 100644 index 0000000000000000000000000000000000000000..0039f1d40ff6bbec2b860600ad83a2c32c33b4ff --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\270\211.html" @@ -0,0 +1,60 @@ + + + + + Document + + + + + +
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\272\214.html" new file mode 100644 index 0000000000000000000000000000000000000000..5928e264d879f2e45f1b87d9f4a123a433113442 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\345\212\250\347\224\273\344\272\214.html" @@ -0,0 +1,108 @@ + + + + + Document + + + + + +
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..8157e618cfb2ddb461001d46416b851e17e23bc2 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\200.html" @@ -0,0 +1,77 @@ + + + + + Document + + + + + +
+
+ +
+ +
+ + +
+
+ + +
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\211.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\211.html" new file mode 100644 index 0000000000000000000000000000000000000000..89185504f72ef582a50d087afe1ed6bfa200a368 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\270\211.html" @@ -0,0 +1,31 @@ + + + + + Document + + + + + + + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\214.html" new file mode 100644 index 0000000000000000000000000000000000000000..38bfce253aa6a23941bf5bd157f58a1bea409c03 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\214.html" @@ -0,0 +1,26 @@ + + + + + Document + + + + + +
遥遥领先
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\224.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\224.html" new file mode 100644 index 0000000000000000000000000000000000000000..deb37ddcc440f27ef896659d4a0874e27f1b3ce7 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\344\272\224.html" @@ -0,0 +1,54 @@ + + + + + Document + + + + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\345\233\233.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\345\233\233.html" new file mode 100644 index 0000000000000000000000000000000000000000..c8b8ac16868a512c6108c9519f051a0d9a3fe574 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/10.24\344\275\234\344\270\232/2024-1024-\350\277\207\346\270\241\345\233\233.html" @@ -0,0 +1,98 @@ + + + + + Document + + + + + + + +
+ + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1021-\345\256\232\344\275\215.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1021-\345\256\232\344\275\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..ec5b831f4f068565fa3c03342a86b7cdbeab426f --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1021-\345\256\232\344\275\215.md" @@ -0,0 +1,29 @@ +## 1.相对定位(position:relative) +自身原来的位置，并保留自身位置 +## 2.绝对定位（position:absolute） +对于祖先元素，没有父亲就以浏览器为准， 或者父亲无定位（不保留位置） +## 3.固定定位（position:fixed） +以浏览器可视窗口，不随滚动条滚动（不占有位置） + +常用“子绝父相” + +(小技巧)：固定在版心右侧位置 +1. 让固定定位的盒子left:50%,走到浏览器可视区（版心）的一半 +2. 让固定定位的盒子margin-left:版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐 + +## 4.粘性定位（不常用） +sticky 必须添加（top，bottom，left，right其中一个才有效） + +## 5.定位叠放顺序：（数值越大，越靠上） +z-index:1(只有定位的盒子才有用) + +### 加了绝对定位的盒子不能水平居中怎么办？ +方法：left:50%,top:50%,margin-left:-100px,margin-top:-100px + +#### 定位的特性： +1. 行内元素加了绝对或相对定位，可不设宽高（由内容决定） +2. 会完全压住盒子和内容，与浮动不同 +## 定位效果图 +![alt text](image.png) +![alt text](image-1.png) +![alt text](image-2.png) \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1023-\347\262\276\347\201\265\345\233\276.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1023-\347\262\276\347\201\265\345\233\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..f78c2da94c8dc7331dda22480ae5e1fe3e5502a4 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1023-\347\262\276\347\201\265\345\233\276.md" @@ -0,0 +1,119 @@ +## 精灵图 +精灵图（Sprite），也被称为雪碧图或CSS Sprite，是一种有效的网页图片应用处理方式。 + +1. 一、精灵图的介绍 +定义：精灵图通过将多个小图标或图片合并到一张大图中，然后通过CSS定位来显示需要显示的图片部分。 + +原理：利用CSS的background-position属性来定位并显示大图中的特定部分。 + +作用： +减少网页的HTTP请求数量，因为所有小图标或图片都整合在一张大图中，只需要一次HTTP请求就可以加载。 +提高网页的加载速度和性能。 +方便进行样式调整和图片裁剪，因为所有图片都在一张大图中。 + +2. 二、精灵图的使用方法 +制作精灵图： +使用专业的图像编辑软件（如Photoshop）或精灵图制作工具（如TexturePacker）来合并多个小图标或图片成一张大图。 +在合并时，要确保每个小图标或图片之间有足够的间隙，避免在显示时出现重叠或模糊。 + +在网页中使用精灵图： +首先，将制作好的精灵图上传到网站的服务器或静态资源文件夹中。 + +然后，在CSS中通过background-image属性设置元素的背景图片为精灵图。 + +使用background-position属性来定位并显示精灵图中的特定部分。例如，如果要知道小图片左上角相对于精灵图左上角的偏移量，可以使用工具（如PxCook）进行测量，并将测量得到的负数坐标值设置为background-position属性的值（向左上移动图片位置）。 + +注意事项： +精灵图的大小要大于所有图片中最大的那个，以确保所有图片都能完整地显示在精灵图中。 +不要将一个像素的背景图片放在精灵图上，因为这可能会导致显示问题。 +如果需要更新精灵图的内容，应该使用精灵图的源文件进行修改，而不是直接修改png图片或配置文件。 + +3. 三、实例演示 +假设有一个包含多个服务图标的精灵图，需要在网页上显示这些图标。可以使用以下CSS代码来实现： + +``` +css +.service { + /* 其他样式设置 */ +} + +.service ul { + display: flex; +} + +.service li { + display: flex; + /* 其他样式设置 */ +} + +.service li h5 { + width: 36px; + height: 42px; + background: url(./images/sprite.png) 0 -192px no-repeat; /* 精灵图路径和定位 */ +} + +.service li:nth-child(2) h5 { + background-position: -41px -192px; /* 第二个图标的定位 */ +} + +.service li:nth-child(3) h5 { + background-position: -82px -192px; /* 第三个图标的定位 */ +} + + +``` +## 属性选择器 +1. 存在选择器： + +语法：[attribute] + +选择所有具有指定属性的元素，不论其属性值为何。 +示例：[title]会选择所有具有title属性的元素。 + +2. 完全匹配选择器： + +语法：[attribute="value"] + +选择属性值完全等于指定值的元素。 + +示例：[href="https://www.example.com"]会选择href属性值完全等于https://www.example.com的元素。 + +3. 开始匹配选择器： + +语法：[attribute^="value"] + +选择属性值以指定值开始的元素。 + +示例：[href^="https://"]会选择href属性值以https://开始的元素。 + +4. 结束匹配选择器： + +语法：[attribute$="value"] + +选择属性值以指定值结束的元素。 + +示例：[href$=".pdf"]会选择href属性值以.pdf结束的元素。 + +5. 包含匹配选择器： + +语法：[attribute*="value"] + +选择属性值包含指定字符串的元素。 + +示例：[title*="hello"]会选择title属性值包含hello字符串的元素。 + +6. 词匹配选择器： + +语法：[attribute~="value"] + +选择属性值中包含指定单词的元素，单词由空格分隔。 +示例：[class~="active"]会选择class属性值中包含active单词的元素。 + +6. 前缀匹配选择器（主要用于语言代码或文档类型等属性）： + +语法：[attribute|="value"] + +选择属性值以指定值开始或者完全等于指定值的元素。 +## 效果图 +![alt text](image-3.png) +![alt text](image-4.png) diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1024-\345\212\250\347\224\273.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1024-\345\212\250\347\224\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..aff3d38bd971f94a27ec5445e148f960a9889d56 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/2024-1024-\345\212\250\347\224\273.md" @@ -0,0 +1,111 @@ +# 动画 +## 过渡：transition + 可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。 + + + transition 包括以下属性： + +1. transition-property: all; 如果希望所有的属性都发生过渡，就使用all。 +1. transition-duration: 1s; 过渡的持续时间。 +1. transition-timing-function: linear; 运动曲线。属性值可以是： +1. linear 线性 +1. ease 减速 +1. ease-in 加速 +1. ease-out 减速 +1. ease-in-out 先加速后减速 +1. transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。 + ++ 综合属性： +``` +transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; + transition: all 3s linear 0s; +``` +如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。 + +## 2D 转换transform +可以实现元素的位移、旋转、变形、缩放 + +属性: +1. 缩放：scale +```html +// x：表示水平方向的缩放倍数。y：表示垂直方向 +transform: scale(x, y); 的缩放倍数。 + +//取值：大于1表示放大，小于1表示缩小。不能为百分比。 +transform: scale(2, 0.5); +``` +2. 位移：translate +``` +transform: translate(水平位移, 垂直位移); + +//参数为百分比，相对于自身移动。 +//正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 +transform: translate(-50%, -50%); +``` + +这个属性还能用于水平垂直居中 +```html +div { + width: 600px; + height: 60px; + background-color: red; + position: absolute; // 绝对定位的盒子 + left: 50%; // 首先，让左边线居中 + top: 0; + transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半【推荐写法】 + } +``` +3. 旋转：rotate +``` +//transform: rotate(角度); +transform: rotate(角度); + +transform: rotate(45deg); +``` + +## 3D转换 +1. 旋转：rotateX、rotateY、rotateZ +``` + transform: rotateX(360deg); //绕 X 轴旋转360度 + + transform: rotateY(360deg); //绕 Y 轴旋转360度 + + transform: rotateZ(360deg); //绕 Z 轴旋转360度 +``` +2. 移动：translateX、translateY、translateZ +``` + + transform: translateX(100px); //沿着 X 轴移动 + + transform: translateY(360px); //沿着 Y 轴移动 + + transform: translateZ(360px); //沿着 Z 轴移动 +``` + +## 动画@keyframes +将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； + +定义动画 +```html +@keyframes animationName { + from { + /* 初始样式 */ + } + to { + /* 结束样式 */ + } + /* 或者使用百分比来定义中间的关键帧 */ + 50% { + /* 动画一半的样式 */ + } +} +``` +#### 动画属性 +animation属性： + + 1. animation: 定义的动画名称 持续时间 执行次数 是否反向 动曲线 延迟执行。(infinite 表示无限次) + 2. animation: move1 1s alternate linear 3; + 3. animation: move2 4s; +## 效果 +![alt text](image-5.png) +![alt text](image-6.png) +![alt text](image-7.png) \ No newline at end of file