布局

作者: 苗_a | 来源:发表于2018-11-21 20:32 被阅读7次

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>有货</title>
    <style>
    /清除默认样式/
    *{
    margin: 0px;
    padding: 0px;
    }
    .header{
    width: 1920px;
    height:50px;
    background-color: green;
    margin: 0 auto;
    }
    .content{
    width:1900px;
    height: 100px;
    background-color:orange;
    margin: 10px auto;
    }
    .footer{
    width:1900px;
    height: 50px;
    background-color:skyblue;
    margin: 0 auto;
    }
    .content1{
    width:1000px;
    height: 400px;
    background-color:blue;
    margin: 10px auto;
    }
    .content2{
    width:1000px;
    height: 50px;
    background-color:blue;
    margin: 10px auto;
    }
    .content3{
    width:300px;
    height: 50px;
    background-color:blue;
    margin: 10px auto;
    }
    .content4{
    width:1000px;
    height: 251px;
    background-color:blue;
    margin: 10px auto;
    }
    .content5{
    width:1000px;
    height: 251px;
    background-color:blue;
    margin: 10px auto;
    }
    .content6{
    width:1000px;
    height: 128px;
    background-color:red;
    margin: 10px auto;
    }
    .content7{
    width:300px;
    height: 50px;
    background-color:purple;
    margin: 10px auto;
    }
    .content8{
    width:1000px;
    height: 175px;
    background-color:red;
    margin: 10px auto;
    }
    .content9{
    width:1000px;
    height: 90px;
    background-color:black;
    margin: 10px auto;
    }
    .content10{
    width:1000px;
    height: 90px;
    background-color:black;
    margin: 10px auto;
    }
    .content11{
    width:1000px;
    height: 90px;
    background-color:black;
    margin: 10px auto;
    }
    .content12{
    width:300px;
    height: 50px;
    background-color:purple;
    margin: 10px auto;
    }
    .content13{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content14{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content15{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content16{
    width:300px;
    height: 50px;
    background-color:pink;
    margin: 10px auto;
    }
    .content17{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content18{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content19{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content20{
    width:300px;
    height: 50px;
    background-color:black;
    margin: 10px auto;
    }
    .content21{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content22{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content23{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content24{
    width:300px;
    height: 50px;
    background-color:black;
    margin: 10px auto;
    }
    .content25{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content26{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content27{
    width:1000px;
    height: 150px;
    background-color:purple;
    margin: 10px auto;
    }
    .content28{
    width:300px;
    height: 50px;
    background-color:black;
    margin: 10px auto;
    }
    .content29{
    width:1000px;
    height: 360px;
    background-color:blue;
    margin: 10px auto;
    }
    .content30{
    width:1000px;
    height: 360px;
    background-color:blue;
    margin: 10px auto;
    }
    .content31{
    width:1000px;
    height: 360px;
    background-color:blue;
    margin: 10px auto;
    }
    .content32{
    width:1000px;
    height: 360px;
    background-color:blue;
    margin: 10px auto;
    }
    .content33{
    width:1000px;
    height: 360px;
    background-color:red;
    margin: 10px auto;
    }
    .content34{
    width:1000px;
    height: 360px;
    background-color:purple;
    margin: 10px auto;
    }
    .content35{
    width:1000px;
    height: 360px;
    background-color:red;
    margin: 10px auto;
    }
    .content36{
    width:1000px;
    height: 360px;
    background-color:black;
    margin: 10px auto;
    }
    .content37{
    width:1000px;
    height: 360px;
    background-color:black;
    margin: 10px auto;
    }
    .content38{
    width:1000px;
    height: 360px;
    background-color:black;
    margin: 10px auto;
    }
    .content39{
    width:1000px;
    height: 360px;
    background-color:purple;
    margin: 10px auto;
    }
    .content40{
    width:1000px;
    height: 360px;
    background-color:purple;
    margin: 10px auto;
    }
    </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="content3"></div>
    <div class="content4"></div>
    <div class="content5"></div>
    <div class="content6"></div>
    <div class="content7"></div>
    <div class="content8"></div>
    <div class="content9"></div>
    <div class="content10"></div>
    <div class="content11"></div>
    <div class="content12"></div>
    <div class="content13"></div>
    <div class="content14"></div>
    <div class="content15"></div>
    <div class="content16"></div>
    <div class="content17"></div>
    <div class="content18"></div>
    <div class="content19"></div>
    <div class="content20"></div>
    <div class="content21"></div>
    <div class="content22"></div>
    <div class="content23"></div>
    <div class="content24"></div>
    <div class="content25"></div>
    <div class="content26"></div>
    <div class="content27"></div>
    <div class="content28"></div>
    <div class="content29"></div>
    <div class="content30"></div>
    <div class="content31"></div>
    <div class="content32"></div>
    <div class="content33"></div>
    <div class="content34"></div>
    <div class="content35"></div>
    <div class="content36"></div>
    <div class="content37"></div>
    <div class="content38"></div>
    <div class="content39"></div>
    <div class="content40"></div>

    </body>
    </html>


    图片.png
    图片.png
    图片.png

    相关文章

      网友评论

          本文标题:布局

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