午夜怨曲（to 红影）

绿叶清舟 · 发表于 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">
      <div  style="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单位或四个空格；
收尾时，遵循上述原则。

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

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