码迷,mamicode.com
首页 > Web开发 > 详细

Css盒子模型的应用

时间:2016-05-13 04:44:34      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:css盒子模型的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型的应用</title>
    <link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>

    <div class="body">
        <div class="body_img"></div>
        <div class="body_content">
            <div class="body_no"></div>
        </div>
    </div>

    <div class="footing">
        <div class="footing_content"></div>
        <div class="footing_subSav"></div>
    </div>
</body>
</html>


*{
    margin: 0px;
    padding: 0px;
}

.top{
    width: 100%;
    height: 50px;
    background-color: black;
}

.top_content{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background-color: blue;
}

.body{
    margin: 20px auto;
    width: 75%;
    height: 1500px;
    background-color: blanchedalmond;
}

.body_img{
    width:100%;
    height: 400px;
    background-color: darkorange;
}

.body_content{
    width: 100%;
    height: 1100px;
    background-color: blueviolet;
}

.body_no{
    width: 100%;
    height: 50px;
    background-color: aqua;
}

.footing{
    width: 75%;
    height: 400px;
    background-color: indigo;
    margin: 0px auto;
}

.footing_content{
    width: 100%;
    height: 300px;
    background-color: darkseagreen;
}

.footing_subSav{
    width: 100%;
    height: 100px;
    background-color: black;
}


Css盒子模型的应用

标签:css盒子模型的应用

原文地址:http://11317783.blog.51cto.com/11307783/1772826

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!