项目基本布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                width: 1519.2px;
                height: 30.8px;
                background-color: chartreuse;
            }
            .box1-1{
                width: 1200px;
                height: 31px;
                background-color: aqua;
                margin: 0 auto;
            }
            .box1-1-1{
                width: 540px;
                height: 31px;
                background-color: dimgray;
                float: left;
            }
            .box1-1-2{
                width: 600px;
                height: 31px;
                background-color: blueviolet;
                float: right;
            }
            .box2{
                width: 1200px;
                height: 150px;
                background-color: blueviolet;
                margin: 0 auto;
            }
            .box3{
                width: 1519.2px;
                height: 40px;
                background-color: blue;
            }
            .box4{
                width: 1200px;
                height: 520px;
                background-color: yellow;
                margin: 0 auto;
            }
            .box4-1{
                width: 219.6px;
                height: 487.8px;
                background-color: darkgoldenrod;
                float: left;
            }
            .box4-2{
                width: 760px;
                height: 479px;
                background-color: grey;
                float: left;
                margin-left: 10px ;
            }
            .box4-3{
                width: 201.6px;
                height: 478.6px;
                background-color: sandybrown;
                float: right;
            }
            .box5{
                width: 1200px;
                height: 6130.9px;
                background-color: red;
                margin: 0 auto;
            }
            .box5-1{
                width: 1200px;
                height: 31.6px;
                background-color: snow;
                margin: 0 auto ;
            }
            .box5-2{
                width: 1200px;
                height: 234.8px;
                background-color: steelblue;
                margin: 10px auto;
            }
            .box6{
                width: 1519.2px;
                height: 219.6px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="box1-1">
            <div class="box1-1-1"></div>
            <div class="box1-1-2"></div>
        </div>
    </div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
        <div class="box4-1"></div>    
        <div class="box4-2"></div>
        <div class="box4-3"></div>
    </div>
    <div class="box5">
        <div class="box5-1"></div>
        <div class="box5-2"></div>
    </div>
    <div class="box6"></div>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容