商院官网：首页的布局
来自CloudWiki
盒子的布局
嵌套元素竖直排列
- 子盒子的宽度等于父盒子的宽度、
- 子盒子的高度之和等于父盒子
嵌套元素水平排列
- 子盒子的宽度之和小于父盒子
- 子盒子的高度等于父盒子、
- 子盒子添加 float:left属性
- 子盒子后面增加一个空白盒子，将其属性设置为clear:both，来清除浮动。
源代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.header{
width:100%;height:300px;background:red;
}
.a{width:100%;height:200px;background:#39C;}
.b{width:100%;height:100px;background:#3CF;}
.main{
width:100%;height:auto;background:blue;
}
.c{width:100%;height:300px;background:#CF6;}
.c1{width:50%;height:300px;background:#C39;float:left;}
.c2{width:50%;height:300px;background:#C63;float:left;}
.d{width:100%;height:300px;background:#F30;}
.d1{width:33%;height:300px;background:#C90;float:left;}
.d2{width:33%;height:300px;background:#33F;float:left;}
.d3{width:33%;height:300px;background:#F90;float:left;}
.e{width:100%;height:150px;background:#CF6;}
.clear{clear:both;}
.footer{
width:100%;height:300px;background:green;
}
</style>
</head>
<body>
<div class="header">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="main">
<div class="c">
<div class="c1"></div>
<div class="c2"></div>
<div class="clear"></div>
</div>
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="clear"></div>
</div>
<div class="e"> </div>
</div>
<div class="footer">
</div>
</body>
</html>
