页面平均分成4部分

最新推荐文章于 2023-12-15 10:07:38 发布

伏特加的滋味

最新推荐文章于 2023-12-15 10:07:38 发布

阅读量1.2k

点赞数 1

本文介绍了一种使用HTML和CSS实现网页布局的方法，能够将页面平均划分为四个部分，并为每个部分分配不同的背景颜色以便于视觉区分。此布局方案适用于需要清晰区域划分的设计需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将页面平均分成四部分</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .quarter-div{
            width: 50%;
            height: 50%;
            float: left;
        }
        .blue{
            background-color: #5BC0DE;
        }
        .green{
            background-color: #5CB85C;
        }
        .orange{
            background-color: #F0AD4E;
        }
        .yellow{
            background-color: #FFC706;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="quarter-div blue"></div>
        <div class="quarter-div green"></div>
        <div class="quarter-div orange"></div>
        <div class="quarter-div yellow"></div>
    </div>
</body>
</html>