diff --git "a/\347\250\213\346\242\246/20241016_\346\265\256\345\212\250.md" "b/\347\250\213\346\242\246/20241016_\346\265\256\345\212\250.md" index 1bad31d9299d14f2d74fbc44ac7f539b923560c8..0c5ffa36c1394d678db98b6ea47f0919c2ccda72 100644 --- "a/\347\250\213\346\242\246/20241016_\346\265\256\345\212\250.md" +++ "b/\347\250\213\346\242\246/20241016_\346\265\256\345\212\250.md" @@ -73,7 +73,7 @@ > 双倍margin的bug:应该将浮动的方向和margin的`方向相反` # lesson16_任务 > 二十五、浮动 -## [浮动显示效果]![Alt text](image.png) +## [浮动显示效果](./images-练习显示/25浮动-1.png) ```html
diff --git "a/\347\250\213\346\242\246/20241018_\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\347\250\213\346\242\246/20241018_\345\256\232\344\275\215\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..d23ed813d42687ca8af40924f6d24961e816ce3e --- /dev/null +++ "b/\347\250\213\346\242\246/20241018_\345\256\232\344\275\215\345\261\236\346\200\247.md" @@ -0,0 +1,357 @@ +# 相对定位`position: relative;` +让元素相对于自己原来的位置，进行位置调整(可用于盒子的微调) +``` + background-position:向右偏移量 向下偏移量; +``` +## 相对定位不脱标 +**别人不会把它的位置挤走** +## 相对定位的用途 +**子绝父相** +## 相对定位的定位值 +- left：盒子右移 +- right：盒子左移 +- top：盒子下移 +- bottom：盒子上移 +PS：负数表示相反的方向 +# 绝对定位`position: absolute;` +定义横纵坐标;原点在父容器的左上角或左下角 +## 绝对定位脱标 +**绝对定位的盒子脱离了标准文档流。** +> 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了 +## 绝对定位的参考点（重要） +1. 如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角 +2. 如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角 +## 以盒子为参考点 +> 子绝父相 +1. 保证父亲没有脱标，儿子脱标在父亲的范围里面移动 +2. 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离 +3. 绝对定位的儿子，无视参考的那个盒子的padding；在border内侧为参考点 +## 让绝对定位中的盒子在父亲里居中 +让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性 +可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做： +``` + div { + width: 600px; + height: 60px; + position: absolute; 绝对定位的盒子 + left: 50%; 首先，让左边线居中 + top: 0; + margin-left: -300px; 然后，向左移动宽度（600px）的一半 + } +``` +> 如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了 +> left:50%; margin-left:负的宽度的一半 +# 固定定位 +就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变 +1. **用途1**：网页右下角的“返回到顶部” +2. **用途2：**顶部导航条 +# lesson17-任务 +> 二十六、定位 +# [定位练习显示效果] +## ![26-1-1](./images-练习显示/26-1-1.png)![26-1-2](./images-练习显示/26-1-2.png) +## ![26-2](./images-练习显示/26-2.gif)![26-3-1](./images-练习显示/26-3-1.gif)![26-3-2](./images-练习显示/26-3-2.gif) +## ![26-4](./images-练习显示/26-4.png)![26-5](./images-练习显示/26-5.png)![26-6](./images-练习显示/26-6.png) +1. 创建一个在其父级容器中水平、垂直居中的绝对定位元素 +```html + +
+
水平居中
+
垂直居中
+
+ +
框架水平居中
+
框架垂直居中
+``` +```css +/* 26-1-1 */ + #d1{ + width: 500px; + height: 300px; + border: 2px solid black; + position: relative; + } + #d1 .d1-1{ + position: absolute; + left: 50%; + margin-left: -32px; + } + #d1 .d1-2{ + position: absolute; + left: 50%; + margin-top: 127.5px; + margin-left: -32px; + } +/* 26-1-2 */ + #d2{ + width: 100px; + height: 100px; + border: 1px solid red; + position: absolute; + left: 50%; + margin-left: -50px; + } + #d3{ + width: 200px; + height: 100px; + border: 1px solid black; + position: absolute; + left: 50%; + margin-left: -100px; + top: 50%; + margin-top: -50px; + } +``` +2. 在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容 +```html + +
固定不动导航条
+
+ 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 + 人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干人生不就是白干加白干 +
+``` +```css +/* 26-2 */ + #d2{ + width: 100%; + height: 50px; + border: 1px solid black; + background-color: slategray; + position: fixed; + } + .d2-content{ + height: 1200px; + padding-top: 52px; + } +``` +3. 创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示 +```html + + 啊，你来晚了哈 + +
+ 啊，你来晚了哈 +
+ 我是提示文字的 +
+
+``` +```css +/* 26-3-1 */ + #d3{ + position: relative; + } + #d3::after{ + content: "我是提示文字的"; + position: absolute; + top: 100%; + background-color: black; + color: white; + border-radius: 5px; + display: none; + width: 100%; + } + #d3:hover::after{ + display: block; + } +/* 26-3-2 */ + .id-float{ + display: none; + } + #d3:hover div{ + display: initial; + background-color: black; + color: white; + border-radius: 5px; + position: relative; + bottom: -25px; + left: -110px; + } +``` +4. 使用提供的素材，利用精灵图技术实现 +```html + +
+
付款图标
+
存款图标
+
删除图标
+
粘贴图标
+
笑脸图标
+
编辑图标
+
+``` +```css +/* 26-4 */ + #box div{ + margin: 5px; + } + #box span{ + float: left; + width: 20px; + height: 20px; + background-image: url(./精灵图技术.png); + background-size: 60px 40px; + } + .a{ + background-position: 0 0; + } + .b{ + background-position: -20px 0; + } + .c{ + background-position: 0 -20px; + } + .d{ + background-position: -20px -20px; + } + .e{ + background-position: -40px 0; + } + .f{ + background-position: -40px -20px; + } +``` +5. 使用提供的素材，实现电影票 +```html + +
+
+
+
广东深圳宝安区建安一路海雅缤纷城4楼
+
+
【海雅缤纷城】万达影城（深圳海雅广场…

单人电影票，可观看2D

+
+
￥ 35
+
￥80
+
已售225
+
+
+``` +```css +/* 26-5 */ + .contain{ + width: 320px; + height: 370px; + border: 2px solid orange; + margin-top: 10px; + position: relative; + right: -100px; + } + #box{ + width: 320px; + height: 250px; + background-image: url(./万达影城.png); + background-position: center; + } + #box .top{ + background-image: url(./万达影城精灵图.png); + width: 52px; + height: 28px; + background-position: -108px 0; + margin-left: 20px; + position: relative; + top: -10px; + } + .center-wenzi{ + background-color: black; + color: white; + height: 40px; + position: relative; + top: 180px; + font-size: 15px; + padding-left: 10px; + line-height: 40px; + } + .bottom-wenzi{ + font-weight: bolder; + margin-top: 12px; + } + .wenzi-1{ + font-weight: lighter; + margin-left: 10px; + } + .a{ + color: red; + font-size: 30px; + margin-top: 10px; + margin-left: 10px; + float: left; + } + .a-1{ + font-size: 20px; + } + .b{ + font-size: 16px; + float: left; + color: silver; + position: relative; + top: 27px; + left: 10px; + } + .b-1{ + text-decoration: line-through; + } + .c{ + float: right; + color: red; + position: relative; + top: 27px; + right: 20px; + } + .c-1{ + color: silver; + } +``` +6. +```html +
+ +
+
+``` +```css + body { + height: 100%; + margin: 0; + overflow: hidden; + } + .container { + position: relative; + height: 600px; + border: 2px solid red; + } + #div { + width: 100px; + height: 100px; + border: 1px solid black; + position: absolute; + bottom: 200px; + left: 200px; + background-color: red; + } +``` diff --git "a/\347\250\213\346\242\246/image.png" "b/\347\250\213\346\242\246/image.png" deleted file mode 100644 index 156fcdcdcbc93821c23d1cde611593249029ccac..0000000000000000000000000000000000000000 Binary files "a/\347\250\213\346\242\246/image.png" and /dev/null differ diff --git "a/\347\250\213\346\242\246/25\346\265\256\345\212\250-1.png" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/25\346\265\256\345\212\250-1.png" similarity index 100% rename from "\347\250\213\346\242\246/25\346\265\256\345\212\250-1.png" rename to "\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/25\346\265\256\345\212\250-1.png" diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-1-1.png" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-1-1.png" new file mode 100644 index 0000000000000000000000000000000000000000..0674affd0d8c55daba31a249a5daea2f499ea8bc Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-1-1.png" differ diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-1-2.png" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-1-2.png" new file mode 100644 index 0000000000000000000000000000000000000000..eea6415bb33a42ccfb95ff87314e65b29c87bfb1 Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-1-2.png" differ diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-2.gif" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-2.gif" new file mode 100644 index 0000000000000000000000000000000000000000..4d94b829be05116f1b59f6c66e9c2418fe1b3835 Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-2.gif" differ diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-3-1.gif" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-3-1.gif" new file mode 100644 index 0000000000000000000000000000000000000000..0064b106f7f800e01179d126ef498aa13b365b8a Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-3-1.gif" differ diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-3-2.gif" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-3-2.gif" new file mode 100644 index 0000000000000000000000000000000000000000..0b3225ad4c873b495c29714a73518afba70e19b8 Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-3-2.gif" differ diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-4.png" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-4.png" new file mode 100644 index 0000000000000000000000000000000000000000..67972fdbb1dea339f7ce2f112e2502cd57601863 Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-4.png" differ diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-5.png" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-5.png" new file mode 100644 index 0000000000000000000000000000000000000000..5745b73239a6ae1102b67b400fe0c44168e9b555 Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-5.png" differ diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-6.png" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-6.png" new file mode 100644 index 0000000000000000000000000000000000000000..984ecb348d74cf4897d1adb91cc83d8f8d714e0e Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/26-6.png" differ