美文网首页
CSS页面布局

CSS页面布局

作者: Citrus柑橘味气息 | 来源:发表于2018-11-21 15:43 被阅读0次
    image.png
    image.png

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
    .zhu{
    display: block;
    width: 1349px;
    height: 4725px;
    /background-color: green;/
    }
    .S1{
    width: 1349px;
    height: 180px;
    background-color: red;
    margin: 0 auto;
    }
    .s1{
    width: 1200px;
    height: 130px;
    background-color: blue;
    margin-left: 25px;
    margin-right: 25px;
    margin: 0 auto;
    }
    .s2{
    width: 1349px;
    height: 50px;
    background-color: orange;

        }
        .S2{
            width: 1200px;
            height: 980px;
            background-color: red;
            margin: 0 auto;
        }
        .z1{
            width: 530px;
            height: 900px;
            background-color: yellow;
            float: left;
        }
        .z2{
            width: 650px;
            height: 410px;
            background-color: blue;
            float: right;
        }
        .z3{
            width: 650px;
            height: 550px;
            float: right;
            background-color: skyblue;
        }
        .S3{
            width: 1200px;
            height: 565px;
            background-color: #faf;
            margin: 0 auto;
        }
        .title{
            width: 1200px;
            height: 38px;
            margin-bottom: 40px;
        }
        .sh1{
            width: 1200px;
            height: 400px;
            background-color: red;
        }
        .d1{
            width: 1200px;
            height: 57px;
            margin-top: 30px;
            background-color: blue;
        }
        .S4{
            width: 1200px;
            height: 630px;
            background-color: yellow;
            margin: 0 auto;
        }
        .S5{
            width: 1200px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
        }
        .S6{
            width: 1200px;
            height: 600px;
            margin-bottom: 40px;
            background-color: skyblue;
            margin: 0 auto;
        }
        .S7{
            width: 1349px;
            height: 724px;
            background-color: yellow;
            margin: 0 auto;
        }
        .S8{
            width: 1349px;
            height: 530px;
            background-color: #ffb81c;
            padding-top: 40px;
            margin: 0 auto;
        }
    </style>
    

    </head>
    <body class="zhu">
    <div class="S1">
    <div class="s1"></div>
    <div class="s2"></div>
    </div>
    <div class="S2">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    </div>
    <div class="S3">
    <h3 class="title"></h3>
    <div class="sh1"></div>
    <div class="d1"></div>
    </div>
    <div class="S4">
    </div>
    <div class="S5"></div>
    <ul class="S6"></ul>
    <div class="S7"></div>
    <div class="S8"></div>
    </body>
    </html>

    相关文章

      网友评论

          本文标题:CSS页面布局

          本文链接:https://www.haomeiwen.com/subject/isscqqtx.html