简单布局

作者: 派克_i | 来源:发表于2018-12-25 20:14 被阅读0次

Android 性能优化方法
简单布局
简单布局
简单布局
简单布局
简单布局
简单布局
简单布局
Flutter学习记录-布局
总结随笔

<!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