4

几周以来我一直在尝试制作这种布局,但我似乎根本无法做到这一点!

布局示例

因此,如果问题不大,有人可以尝试给我一个链接或类似的东西,这样我就可以继续我的网站。

4

1 回答 1

11

这是朝着(希望)正确方向迈出的一步。

演示

这里要记住一些非常重要的事情:

定位基础

将元素的位置设置为绝对可以让您根据像素坐标自由放置它,但通常最好将其放置在容器中以限制它。您可以通过创建具有相对位置(或默认静态以外的任何位置)的父元素来为绝对定位元素创建容器。

使用变量值(百分比)

此外,您希望使用百分比定位元素,以便可以调整其大小并确保居中。您可以给元素一个 % 宽度或高度,它将是其第一个非静态父级的宽度或其他内容的 %。

定位元素

然后,您可以使用 left 和 top 属性根据百分比值定位元素。Left for position:absolute 元素表示“来自第一个非静态父级的左边缘的某个值”。顶部、底部和右侧也是如此。

使元素居中

要将具有绝对定位的元素定位在其第一个非静态父元素的中间,您将其左值设置为 50%,将顶部值设置为 50%。(从父级左侧边缘算起父级宽度的 50%,从顶部算起其高度的 50%)。这会将元素的左上角定位在父元素的中间。要使元素完全居中,您需要将其偏移其宽度和高度的一半。您可以为此使用带有负值的 margin-left 和 margin-right。

从那里开始,您可以根据需要进行调整,就像我在提供的演示中所做的那样。研究代码(也粘贴在下面以供将来参考)并查看元素是如何定位的以及使用了哪些属性。

HTML

<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>

CSS

.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%;
}
于 2011-11-08T23:18:00.237 回答