Php 基本CSS问题

很抱歉在这件事上浪费时间。我一直在尝试让一个页面在css中堆叠背景颜色，我只是不知道如何询问如何做到这一点。例如，我希望有一个白色页眉部分，其高度可以是150像素，然后直接在该部分下方有一个特定的颜色，该颜色的高度可以是20像素，并延伸页面的宽度，然后用其他颜色重复该部分两到三次，然后以另一个大的白色页脚结束。很难知道这叫什么。我想我不需要任何东西来漂浮，就像美国国旗上的白色和红色一样堆叠。有什么想法吗？

你试过什么吗

<div style="height: 150px; background: #fff;"></div>
<div style="height: 20px; background: red;"></div>
<div style="height: 20px; background: blue;"></div>
<div style="height: 150px; background: #fff;"></div>

---

要在页面上展开，可以使用位置：绝对

CSS

#container {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}
.white {
    background:white;
    height: //height;
}
.blue {
    background:blue;
    height: //height;
}
.red {
    background:red;
    height: //height;
}

HTML

<div id="container">
    <div class="white"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="white"></div>
</div>

---

如果您想重复红白和蓝色，您可以使用一个背景图像，其中一个“重复”为红白和蓝色，背景：repeat-y。如果不想重复整个页面的高度，可以将其放在div中并控制高度

<div style="height:80%; background:url('flag.png') repeat-y;></div>