美文网首页
简单布局

简单布局

作者: 派克_i | 来源:发表于2018-12-25 20:14 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尚品网_全球时尚轻奢购物网站_|海量新品官网</title>
        <style type="text/css">
            /* 盒子1*/
            .box-1{
                width: 1309px;
                height: 118px;
                background-color: deeppink;
            }
            /*大盒子1*/
            .Dbox1{
                width: 382px;
                height: 30px;
                background-color:darkolivegreen;
                float: right;
                margin: 0 auto;
            }
            /*大盒子2*/
            .Dbox2{
                width: 1309px;
                height: 40px;
                background-color: #bbffaa;
            }
            /*大盒子*/
            .Dbox{
                width: 1200px;
                height: 77.61px;
                background-color: #bbffaa;
            }
            /*小盒子1*/
            .box1{
                width: 78px;
                height: 78px;
                background-color: chartreuse;
                float: left;
            }
            /*小盒子2*/
            .box2{
                width: 78px;
                height: 78px;
                background-color: darkred;
                float: left;
            }
            /*小盒子3*/
            .box3{
                width: 78px;
                height: 78px;
                background-color: #2548;
                float: left;
            }
            /*全图*/
            .header {
                width: 1309px;
                height: 5449.31px;
                background-color: dodgerblue;
            }
            /*盒子2*/
            .box-2{
                width: 1230px;
                height: 765px;
                background-color: darkgoldenrod;
                margin: 0 auto;
            }
            /*盒子3*/
            .box-3{
                width: 1230px;
                height: 859px;
                background-color: cadetblue;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box-1">
            <div class="Dbox">
                <div class="box1"></div>
                <div class="box2"></div>
                <div class="box3"></div>
            </div>
            <div class="Dbox1"></div>
            <div class="Dbox2">
                <span>
                    &nbsp;&nbsp;&nbsp;<a href="#">单季新品</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">服装</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">鞋靴</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">箱包</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">配件</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">品牌</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">特卖</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
            </div>
        </div>
        <div class="header">
            <div class="box-2"></div>
            <div class="box-3">
                <span>ALBERTA FERRETTI</span></p>
                <span>马卡龙色针织裙</span>
            </div>
        </div>
    </body>
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:简单布局

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