美文网首页
项目布局

项目布局

作者: 小胡123 | 来源:发表于2018-11-05 08:52 被阅读0次

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>唯品会</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
    </head>
    <body>
    <div class='a'>
    <div class='b'>
    <div class='c'></div>
    <div class='d'></div>
    </div>
    </div>
    <div class='e'>
    <div class='f'>
    <div class='g'>
    <img src="img/123.png" alt='logo' width='160px' />
    <img src="img/345.png" alt='bao' width='302.97px'/>
    </div>
    <div class='h'></div>
    </div>
    </div>
    <div class='i'>
    <div class='j'></div>
    </div>
    <div class='k'>
    <div class='l'>
    <div class='m'></div>
    <div class='n'></div>
    </div>
    </div>
    <div class='bikanqu'>
    <img src="img/678.jpg" alt='bikan' width='1170px' />
    <div class='zhong'>
    <div class='tpp'>
    <img src="img/789.jpg" alt='tpp' width='240px' />
    <img src="img/789.jpg" alt='tpp' width='240px' />
    <img src="img/789.jpg" alt='tpp' width='240px' />
    <div class='shu'>
    <div class='o'>
    <img src="img/112.jpg" alt='weipin' width='360px' />
    </div>
    <div class='p'>
    <img src="img/112.jpg" alt='weipin' width='360px' />
    </div>
    </div>
    </div>
    </div>
    <img src="img/223.jpg" alt="huawei" width='1170px' />
    </div>
    </body>
    </html>
    样式:
    .a{
    width: 100%;
    height: 28px;
    background-color: #f5f5f5;
    }
    .b{
    width: 1000px;
    height: 28px;
    background-color: white;
    margin:0 auto;
    }
    .c{
    width: 86px;
    height: 28px;
    background-color: green;
    float:left;
    }
    .d{
    width: 771px;
    height: 28px;
    background-color: yellow;
    float:right;
    }
    .e{
    width: 100%;
    height: 100px;
    background-color: #fff;
    }

    .f{
    width: 1000px;
    height: 100%;
    background-color: orange;
    margin:0 auto;
    }
    .g{
    float:left;
    }
    .h{
    width: 480px;
    height: 33.97px;
    background-color: blue;
    /display:inline-block;/
    float:right;
    margin-top: 33px;
    /vertical-align: top;/
    }
    .i{
    width: 100%;
    height: 42.99px;
    background-color: #fff;
    }
    .j{
    width: 1000px;
    height: 100%;
    background-color: red;
    margin:0 auto;
    }
    .k{
    width: 100%;
    height: 501.99px;
    background-color: purple;
    border-top: 1px red solid;
    }
    .l{
    width: 1167.97px;
    height: 451.99px;
    background-color: green;
    margin:0 auto;
    }
    .m{
    width: 1145.99px;
    height: 400px;
    background-color: black;
    margin:0 auto;
    border:10px white solid;
    border-bottom: none;
    margin-top: 30px;
    }
    .n{
    width: 1145.99px;
    height: 40px;
    background-color: yellow;
    margin:0 auto;
    border:10px white solid;
    border-top: none;
    border-bottom: none;
    }
    .bikanqu{
    width: 1579.17px;
    height: 540px;
    background-color: white;
    margin-top: 20px;
    margin:0 auto;
    }
    .zhong{
    width: 1400px;
    margin:0 auto;
    }
    .bikan{
    margin:0 auto;
    }
    .tpp{
    margin-top: 20px;
    float:left;
    }
    .shu{
    float:right;
    }
    .p{
    margin-top: 27px;
    }
    /.sousuo{
    width: 448.997px;
    height: 31.992px;
    background-color: black;
    float:right;
    /
    margin-top: 34px;
    /display:inline-block;/
    /vertical-align: top;/

    /.sousuo input{
    width: 335px;
    height: 26px;
    }
    /

    .content{
    width: 100%;
    height: 400px;
    background-color:yellow;
    }
    .footer{
    width: 200px;
    height: 100px;
    background-color:blue;
    }*/

    相关文章

      网友评论

          本文标题:项目布局

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