几周以来我一直在尝试制作这种布局,但我似乎根本无法做到这一点!
因此,如果问题不大,有人可以尝试给我一个链接或类似的东西,这样我就可以继续我的网站。
几周以来我一直在尝试制作这种布局,但我似乎根本无法做到这一点!
因此,如果问题不大,有人可以尝试给我一个链接或类似的东西,这样我就可以继续我的网站。
这是朝着(希望)正确方向迈出的一步。
这里要记住一些非常重要的事情:
将元素的位置设置为绝对可以让您根据像素坐标自由放置它,但通常最好将其放置在容器中以限制它。您可以通过创建具有相对位置(或默认静态以外的任何位置)的父元素来为绝对定位元素创建容器。
此外,您希望使用百分比定位元素,以便可以调整其大小并确保居中。您可以给元素一个 % 宽度或高度,它将是其第一个非静态父级的宽度或其他内容的 %。
然后,您可以使用 left 和 top 属性根据百分比值定位元素。Left for position:absolute 元素表示“来自第一个非静态父级的左边缘的某个值”。顶部、底部和右侧也是如此。
要将具有绝对定位的元素定位在其第一个非静态父元素的中间,您将其左值设置为 50%,将顶部值设置为 50%。(从父级左侧边缘算起父级宽度的 50%,从顶部算起其高度的 50%)。这会将元素的左上角定位在父元素的中间。要使元素完全居中,您需要将其偏移其宽度和高度的一半。您可以为此使用带有负值的 margin-left 和 margin-right。
从那里开始,您可以根据需要进行调整,就像我在提供的演示中所做的那样。研究代码(也粘贴在下面以供将来参考)并查看元素是如何定位的以及使用了哪些属性。
<div class="container">
<div class="block tl"></div>
<div class="block t"></div>
<div class="block tr"></div>
<div class="block l"></div>
<div class="center"></div>
<div class="block r"></div>
<div class="block bl"></div>
<div class="block b"></div>
<div class="block br"></div>
</div>
.container
{
width: 300px;
height: 300px;
position:relative;
margin:100px;
}
.block, .center
{
width:25%;
height:25%;
background:#5aa;
border-radius:10px;
position:absolute;
left:50%;
top:50%;
margin-left:-12%;
margin-top:-12%;
}
.center
{
width:30%;
height:30%;
margin-left:-15%;
margin-top:-15%;
}
.center
{
border-radius:100%;
}
.tl
{
left:20%;
top:20%;
}
.tr
{
left:80%;
top:20%;
}
.br
{
left:80%;
top:80%;
}
.bl
{
left:20%;
top:80%;
}
.t
{
top:10%;
}
.r
{
left:90%;
}
.b
{
top:90%;
}
.l
{
left:10%;
}