美文网首页
项目的基本布局

项目的基本布局

作者: 浮_屠 | 来源:发表于2018-11-21 21:42 被阅读0次
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /*下面是头部*/
            .head{
                width: 100%;
                height: 187px;
                background-color: #f12;
            }
            .ha1{
                width: 100%;
                height: 28px;
                background-color: yellow;
            }
            .ha2-1{
                width: 1200px;
                height: 28px;
                background-color: gold;
                margin: 0 auto;
            }
            .ha3-1{
                width: 160px;
                height: 28px;
                background-color: #f90;
                float: left;
            }
            .ha3-2{
                width: 504px;
                height: 28px;
                background-color: #f50;
                float: right;
            }
            .ha4-1{
                width: 199px;
                height: 28px;
                background-color: #f20;
                float: left;
            }
            .ha4-2{
                width: 304px;
                height: 28px;
                background-color: #f70;
                float: right;
            }
            .he1{
                width: 100%;
                height: 115px;
                background-color: #fca;
            }
            .he2-1{
                width: 1200px;
                height: 115px;
                background-color: #ff9706;
                margin: 0 auto;
            }
            .he3-1{
            width: 404px;
                height: 93px;
                background-color: #f12;
                float: left;
            }
            .he3-2{
                width: 392px;
                height: 40px;
                background-color: #f50;
                float: left;
                margin-top: 53px;
            }
            .he3-3{
                width: 200px;
                height: 115px;
                background-color: gold;
                float: right;
            }
            .hd1{
                width: 100%;
                height: 44px;
                background-color: #fce;
            }
            .hd2-1{
                width: 1200px;
                height: 44px;
                background-color: #f39;
                margin: 0 auto;
            }
            .hd3-1{
                width: 202px;
                height: 44px;
                background-color: rgb(188,75,75);
                float: left;
            }
            .hd3-2{
                width: 622px;
                height: 44px;
                background-color: #ecb;
                float: left;
            }
            /*下面是身体*/
            .conter{
                width: 100%;
                height: 13478px;
                background-color: #a24;
            }
            .conters{
                width: 1519px;
                height: 13446px;
                background-color: #f00;
                margin: 0 auto;
            }
            .con1-1{
                width: 1519px;
                height: 500px;
                background-color: #fff;
            }
            .con1-2{
                width: 1519px;
                height: 300px;
                background-color: #ff5031;
            }
            .con1-3{
                width: 1519px;
                height: 290px;
                background-color: #d30423;
            }
            .con1-4{
                width: 1519px;
                height: 373px;
                background-color: #a02834;
            }
            .con1-5{
                width: 1519px;
                height: 156px;
                background-color: #b49503;
            }
            .con1-6{
                width: 1519px;
                height: 398px;
                background-color: #c23123;
            }
            .list1-1{
                width: 1200px;
                height: 932px;
                background-color: green;
                margin: 0 auto;
            }
            .con1-7{
                width: 1519px;
                height: 171px;
                background-color: yellow;
            }
            .con1-8{
                width: 1519px;
                height: 382px;
                background-color: gold;
            }
            .con1-9{
                width: 1519px;
                height: 399px;
                background-color: green;
            }
            .cont1-1{
                width: 1519px;
                height: 444px;
                background-color: blue;
            }
            .cont1-2{
                width: 1519px;
                height: 542px;
                background-color: #acd;
            }
            .cont1-3{
                width: 1519px;
                height: 337px;
                background-color: yellow;
            }
            .cont1-4{
                width: 1519px;
                height: 501px;
                background-color: gold;
            }
            .cont1-5{
                width: 1519px;
                height: 594px;
                background-color: #dec;
            }
            .cont1-6{
                width: 1519px;
                height: 335px;
                background-color: yellow;
            }
            .cont1-7{
                width: 1519px;
                height: 502px;
                background-color: #eef;
            }
        .cont1-8{
                width: 1519px;
                height: 593px;
                background-color: #fac;
            }
            .cont1-9{
                width: 1519px;
                height: 593px;
                background-color: gold;
            }
            .conte1-1{
                width: 1519px;
                height: 497px;
                background-color: green;
            }
            .conte1-2{
                width: 1519px;
                height: 178px;
                background-color: blue;
            }
            .conte1-3{
                width: 1519px;
                height: 174px;
                background-color: yellow;
            }
            .conte1-4{
                width: 1519px;
                height: 249px;
                background-color: #fed;
            }
            .conte1-5{
                width: 1519px;
                height: 739px;
                background-color: yellow;
            }
            .conte1-6{
                width: 1519px;
                height: 499px;
                background-color: green;
            }
            .conte1-7{
                width: 1519px;
                height: 602px;
                background-color: gold;
            }
            .conte1-8{
                width: 1519px;
                height: 556px;
                background-color: #acd;
            }
            /*下面是脚*/
            .foot{
                width: 100%;
                height: 614px;
                background-color: #a90; 
            }
            .f{
                width: 1519px;
                height: 71px;
                background-color: gold;
            }
            .o1{
                width: 1200px;
                height: 263px;
                background-color: green;
                margin: 0 auto;
            }
            .o2{
                width: 1519px;
                height: 280px;
                background-color: blue;
            }
    </style>
    </head>
    <body>
        <!-- 头 -->
        <div class="head">
            <div class="ha1">
                <div class="ha2-1">
                    <div class="ha3-1"></div>
                    <div class="ha3-2">
                        <div class="ha4-1"></div>
                        <div class="ha4-2"></div>
                    </div>
                </div>
            </div>
            <div class="he1">
                <div class="he2-1">
                    <div class="he3-1"></div>
                    <div class="he3-2"></div>
                    <div class="he3-3"></div>
                </div>
            </div>
            <div class="hd1">
                <div class="hd2-1">
                    <div class="hd3-1"></div>
                    <div class="hd3-2"></div>
                </div>
            </div>
        </div>
        <!-- 身 -->
        <div class="conter">
            <div class="conters">
                <div class="con1-1"></div>
                <div class="con1-2"></div>
                <div class="con1-3"></div>
                <div class="con1-4"></div>
                <div class="con1-5"></div>
                <div class="con1-6"></div>
                <div class="list1-1"></div>
                <div class="con1-7"></div>
                <div class="con1-8"></div>
                <div class="con1-9"></div>
                <div class="cont1-1"></div>
                <div class="cont1-2"></div>
                <div class="cont1-3"></div>
                <div class="cont1-4"></div>
                <div class="cont1-5"></div>
                <div class="cont1-6"></div>
                <div class="cont1-7"></div>
                <div class="cont1-8"></div>
                <div class="cont1-9"></div>
                <div class="conte1-1"></div>
                <div class="conte1-2"></div>
                <div class="list1-1"></div>
                <div class="conte1-3"></div>
                <div class="list1-1"></div>
                <div class="conte1-4"></div>
                <div class="conte1-5"></div>
                <div class="conte1-6"></div>
                <div class="conte1-7"></div>
                <div class="conte1-8"></div>
            </div>
        </div>
        <!-- 脚 -->
        <div class="foot">
            <div class="f"></div>
            <div class="o1"></div>
            <div class="o2"></div>
            <div class="t"></div>
        </div>
    </body>
    </html>

    相关文章

      网友评论

          本文标题:项目的基本布局

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