午夜怨曲（to 红影） - 第2页 - 音乐沙龙 - 花潮论坛

绿叶清舟 发表于 2022-1-27 15:50

想定位的，其他的跟着跑了，还有二根不一起走啊

马黑黑 发表于 2022-1-27 17:44

绿叶清舟发表于 2022-1-27 15:50
想定位的，其他的跟着跑了，还有二根不一起走啊

父元素定位，子元素的定位才会有效

绿叶清舟 发表于 2022-1-27 19:33

父元素一加定位整个贴都跟着走了

马黑黑 发表于 2022-1-27 19:34

绿叶清舟发表于 2022-1-27 19:33
父元素一加定位整个贴都跟着走了

代码给我

绿叶清舟 发表于 2022-1-27 19:48

马黑黑发表于 2022-1-27 19:34
代码给我

在作业贴里试了还试不出来了

<style type="text/css">

.paBox { /* 父框 */
   margin: 10px auto;
   width: 1024px;
   height: 640px;
   position: relative;
   background: #000 url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fb0e43ff3-d4fe-5587-d469-3f61fb61d5d8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645875587&t=8d45061370adce4d1cd89cc08e128971') no-repeat;
   left: -210px;
}

/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
   content: "";
   position: absolute;
   width: 600px; height: 2px;
   background: silver;
   left: 200px; top: 300px;
   opacity: 0.1;
   transform-origin: center center;
}

<div id="paBox" class="paBox">
   <divstyle="position: relative; LEFT: -280px;TOP: 180px" class="soBox"></div>
   </div>

马黑黑 发表于 2022-1-27 20:00

绿叶清舟发表于 2022-1-27 19:48
在作业贴里试了还试不出来了

css代码有缺漏，也没有收尾符 </style>。另，定位不准。我修改了一下，红色部分是定位，军蓝色是你缺失的，绿色部分也修改过：

<style type="text/css">

.paBox { /* 父框 */
   margin: 10px auto;
   width: 1024px;
   height: 640px;
   position: relative;
   background: #000 url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fb0e43ff3-d4fe-5587-d469-3f61fb61d5d8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645875587&t=8d45061370adce4d1cd89cc08e128971') no-repeat;
   left: -210px;
}

/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
   content: "";
   position: absolute;
   width: 600px; height: 2px;
   background: silver;
   left: 60px; top: 230px;
   opacity: 0.1;
   transform-origin: center center;
}

/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
</style>

<div id="paBox" class="paBox">
   <div class="soBox"></div>
</div>

马黑黑 发表于 2022-1-27 20:01

马黑黑 发表于 2022-1-27 20:02

看看上楼的效果，是不是你想要的 @绿叶清舟

绿叶清舟 发表于 2022-1-27 20:03

马黑黑发表于 2022-1-27 20:00
css代码有缺漏，也没有收尾符。另，定位不准。我修改了一下，红色部分是定位，军蓝色是你缺失的，绿色部 ...

定位必须得放在上面的啊

马黑黑 发表于 2022-1-27 20:10

代码的缩进写法很重要，你基本保持。

缩进，代表代码的层次。比如：

<div id="a">
<div id="b">
<p>Hello</p>
<p>hi</p>
</div>
</div>
id 为 a 的 div，它是父层，可以顶格；
id 为 b 的div，它是直系子层，退一个 tab 位置或4个空格；
<p> 标签是 id="b" 的 div 的子层（a 的孙层），也在其父的缩进基础上再缩进一个tab单位或四个空格；
收尾时，遵循上述原则。

这样，代码很直观，能一眼看出父子孙孙孙关系，便于阅读与修改。

@绿叶清舟 @红影 @小辣椒 @加林森

马黑黑 发表于 2022-1-27 20:14

绿叶清舟发表于 2022-1-27 20:03
定位必须得放在上面的啊

放下面也行，准确就可以的。问题是人家好几个元素是统一定位的，你拆开了不啰嗦呀

绿叶清舟 发表于 2022-1-27 20:27

马黑黑发表于 2022-1-27 20:02
看看上楼的效果，是不是你想要的 @绿叶清舟

是啊就是想放到那个上面的

绿叶清舟 发表于 2022-1-27 20:28

马黑黑发表于 2022-1-27 20:14
放下面也行，准确就可以的。问题是人家好几个元素是统一定位的，你拆开了不啰嗦呀

所以昨天试的时候二根跟着跑了，还有二根还是在原地的

小辣椒 发表于 2022-1-27 20:33

马黑黑发表于 2022-1-27 20:10
代码的缩进写法很重要，你基本保持。

缩进，代表代码的层次。比如：

黑黑许多教程我都没有看的，现在不敢多看，等人恢复以后再学习了，现在看多代码人晕的厉害{:5_102:}

马黑黑 发表于 2022-1-27 20:42

小辣椒发表于 2022-1-27 20:33
黑黑许多教程我都没有看的，现在不敢多看，等人恢复以后再学习了，现在看多代码人晕的厉害

嗯嗯，不急

加林森 发表于 2022-1-27 21:11

马黑黑发表于 2022-1-27 20:10
代码的缩进写法很重要，你基本保持。

缩进，代表代码的层次。比如：

谢谢老黑！{:4_191:}

加林森 发表于 2022-1-27 21:21

我得学学了，谢谢老黑！

红影发表于 2022-1-27 21:28

马黑黑发表于 2022-1-27 20:10
代码的缩进写法很重要，你基本保持。

缩进，代表代码的层次。比如：

原来书写也很有讲究的。嗯嗯，这样写很清晰。{:4_199:}

红影发表于 2022-1-27 21:33

马黑黑发表于 2022-1-27 20:10
代码的缩进写法很重要，你基本保持。

缩进，代表代码的层次。比如：

这样如果少写了div 可以从最里层查起，实际上缩进多少，最后反向闭合多少。
对齐真的挺重要的。

马黑黑 发表于 2022-1-27 21:59

红影发表于 2022-1-27 21:33
这样如果少写了div 可以从最里层查起，实际上缩进多少，最后反向闭合多少。
对齐真的挺重要的。

嗯，容易看得出来

页: 1 [2] 3 4

花潮论坛's Archiver