如何制作具有这种结构的网站？

Question

请帮我提供一个结构如图所示的站点的示例代码。它应该由 4 个块组成。红色和绿色块应占页面宽度的一半，蓝色和紫色块应占红色块宽度的一半

我不是特别了解网站的布局，所以我尝试在额头上做，但没有成功，一切都缩小了

Answer 1

尝试使用网格或弹性盒

这是一个轻松生成网格的工具：https://cssgrid-generator.netlify.app/

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    height: 400px;
    background-color: black;
    padding: 4px;
}

.div1 {
    background-color: red;
}

.div2 {
    background-color: green;
}

.div3 {
    background-color: blue;
}

.div4 {
    background-color: orange;
}

.div1 { grid-area: 1 / 1 / 3 / 3; }
.div2 { grid-area: 3 / 1 / 4 / 2; }
.div3 { grid-area: 3 / 2 / 4 / 3; }
.div4 { grid-area: 1 / 3 / 4 / 5; }

<div class="parent">
    <div class="div1"> </div>
    <div class="div2"> </div>
    <div class="div3"> </div>
    <div class="div4"> </div>
</div>

Answer 2

查看我上传的图片，我想这就是你要找的