今天写的一个页面的布局 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .a{
            height: 114px;
            border-bottom: 10px solid #176FBB;
            min-width: 1000px;
        }
        .b{
            background-color: #B20007;
            height: 114px;
            width: 1000px;
            margin: 0 auto;
        }
        .c{
            border: 1px solid red;
            width: 1000px;
            height: 53px;
            line-height: 53px;
            margin: 0 auto;
        }
        .d{
            background: url(bg.jpg) center no-repeat;
            width: 100%;
            height: 346px;
            min-width: 1000px;
        }
        .e{
            width: 1000px;
            height: 400px;
            border: 1px solid green;
            margin: 0 auto;
            background-color: green;
        }
        .f{
            width: 100%;
            height: 300px;
            background-color: #023C4D;
            min-width: 1000px;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
    <div>
        <p class="c">
            首页>伴手礼
        </p>
        <p class="d">
            
        </p>
        <p class="e">
            
        </p>
    </div>
    <div class="f"></div>
</body>
</html>

 

posted @ 2016-07-12 18:21  鹏芃  阅读(168)  评论(0)    收藏  举报