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

2.3 CSS盒子模型

时间:2015-02-10 22:52:50      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

1. 盒子模型

  技术分享

 

2. CSS边框

  border-radius 圆角边框

  box-shadow 边框阴影

 

3. CSS外边距合并

  技术分享

  遵循 选取两个margin较大的 的原则

 

4. 基本应用

  技术分享

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content"></div>
    </div>
    <div class="footing"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content"></div>
    </div>
    <div class="footing"></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: 10px auto;
    width: 75%;
    height: 500px;
    background-color: blanchedalmond;
}
.body_img{
    width: 100%;
    height: 200px;
    background-color: darkorange;
}
.body_content{
    width: 100%;
    height: 300px;
    background-color: blueviolet;
}
.footing{
    width: 75%;
    height: 110px;
    background-color: indigo;
    margin: 0px auto;
}

 

2.3 CSS盒子模型

标签:

原文地址:http://www.cnblogs.com/iMirror/p/4284973.html

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