各美其美的布局思路
本帖最后由 马黑黑 于 2023-7-14 07:21 编辑 <br /><br /><p>有时候，可能需要使用好多元素在帖子中，这些元素，可能是东拼西凑的，若它们分别用于帖子的不同位置，更改相关算法一是复杂、麻烦，二是不一定成功。怎么办？<br><br></p><p>看下面的示意效果，也许你能明白什么：<br><br></p>
<style>
#papa {
margin: 20px auto 0;
width: 740px;
height: 500px;
background: rgb(0,100,120);
position: relative;
}
.wrapper {
position: absolute;
/* 下面三句演示用 */
border: 1px solid gray;
display: grid;
place-items: center;
overflow: hidden;
}
.wrapper:nth-of-type(1) {
width: 300px;
height:260px;
right: 10px;
top: 50px;
border-radius: 50%;
}
.wrapper:nth-of-type(2) {
width: 200px;
height: 200px;
left: 40px;
top: 20px;
}
.wrapper:nth-of-type(3) {
width: 240px;
height: 200px;
left: 180px;
bottom: 20px;
}
</style>
<div id="papa">
<div class="wrapper">区域一</div>
<div class="wrapper">区域二</div>
<div class="wrapper">区域三</div>
</div> 本帖最后由 马黑黑 于 2023-7-14 12:51 编辑
将准备好的特效元素，用三个 class="wrapper" 的 div 约束起来，置于帖子需要的位置。每一个 wrapper 的位置不同，或还有其他属性不同，均可再添加对应选择器，用以重新规定，比如针对第二个 wrapper：
.wrapper:nth-of-type(2) { ... }
nth-of-type(n) 是前面选择器 .wrapper 的伪类，用于设定 class="wrapper" 的元素群第n个元素。
一楼效果的代码我放在下一楼，有兴趣的朋友可以琢磨一下。 一楼效果的代码
<style>
#papa {
margin: 20px auto 0;
width: 740px;
height: 500px;
background: rgb(0,100,120);
position: relative;
}
.wrapper {
position: absolute;
/* 下面三句演示用 */
border: 1px solid gray;
display: grid;
place-items: center;
overflow: hidden;
}
.wrapper:nth-of-type(1) {
width: 300px;
height:260px;
right: 10px;
top: 50px;
border-radius: 50%;
}
.wrapper:nth-of-type(2) {
width: 200px;
height: 200px;
left: 40px;
top: 20px;
}
.wrapper:nth-of-type(3) {
width: 240px;
height: 200px;
left: 180px;
bottom: 20px;
}
</style>
<div id="papa">
<div class="wrapper">区域一</div>
<div class="wrapper">区域二</div>
<div class="wrapper">区域三</div>
</div>
三个袋子装不同的东西放到不同的位置。。
难道许愿树的粒子、歌词，月亮，蝴蝶可以分别这么装？
不太理解，不用这个装好象也摆得开。。
应用到实例得试试才知道{:4_173:} 这个好，可以用nth-of-type(n) 伪类把有相同边线和居中设置的内容都弄好，然后把第n个元素的选择器里重新规定，在html按顺序调用，就能一个个显示出来了。学习了{:4_187:} 南无月 发表于 2023-7-14 08:58
三个袋子装不同的东西放到不同的位置。。
难道许愿树的粒子、歌词，月亮，蝴蝶可以分别这么装？
不太理解 ...
能摆得开、摆得好就不用给它们找干爹 红影 发表于 2023-7-14 10:11
这个好，可以用nth-of-type(n) 伪类把有相同边线和居中设置的内容都弄好，然后把第n个元素的选择器里重新规 ...
用得上将就用用 马黑黑 发表于 2023-7-14 12:53
用得上将就用用
这个肯定有用的，虽然还没想到怎么去用它{:4_173:} 马黑黑 发表于 2023-7-14 12:52
能摆得开、摆得好就不用给它们找干爹
{:4_170:}我，我，等下试试去。。 南无月 发表于 2023-7-14 18:10
我，我，等下试试去。。
需要收拢一些东东时，比方说粒子在树那里，可以试试本帖介绍的方法，省事得很 红影 发表于 2023-7-14 14:49
这个肯定有用的，虽然还没想到怎么去用它
先懂得可以这么做。将来用得上，试下 马黑黑 发表于 2023-7-15 08:13
先懂得可以这么做。将来用得上，试下
嗯嗯，把一个元素弄出很多孩子来{:4_173:} 红影 发表于 2023-7-15 08:33
嗯嗯，把一个元素弄出很多孩子来
记住，是孩子们去找干爹 马黑黑 发表于 2023-7-15 09:19
记住，是孩子们去找干爹
嗯嗯，也受干爹限制。 红影 发表于 2023-7-15 09:57
嗯嗯，也受干爹限制。
就像这样说的吧，孩子不喜欢你家的环境，他们去认个新的干爹，搬去他那里住了，那里靠近游乐园。 马黑黑 发表于 2023-7-15 08:09
需要收拢一些东东时，比方说粒子在树那里，可以试试本帖介绍的方法，省事得很
昨天试了试，看来我得需要点时间想通它{:4_173:} 南无月 发表于 2023-7-15 10:54
昨天试了试，看来我得需要点时间想通它
还没想通吗 马黑黑 发表于 2023-7-15 10:16
就像这样说的吧，孩子不喜欢你家的环境，他们去认个新的干爹，搬去他那里住了，那里靠近游乐园。
去去，这什么乱例子啊，虽然可以解释代码却伤害了人世间的感情。{:4_173:} 红影 发表于 2023-7-15 14:59
去去，这什么乱例子啊，虽然可以解释代码却伤害了人世间的感情。
有干爹多好 马黑黑 发表于 2023-7-15 16:48
有干爹多好
现在这个词汇已经变得很烂了。