8 使用盒子模型设计页面布局
区块居中设计
设置两列浮动的布局
设置三列浮动的布局
设置多列浮动的布局
demo.html
<html>
<head>
<title>浮动的设计</title>
<style>
body {
text-align:center;
}
#container {
width:960px;
height:800px;
background:#CCC;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
text-align:left;
}
#content {
float:left;
width:750px;
height:400px;
background:green;
}
#barside {
float:right;
width:200px;
height:400px;
background:green;
}
.one {
float:left;
width:200px;
height:400px;
background:blue;
}
.two {
margin-left:10px;
float:left;
width:330px;
height:400px;
background:blue;
}
.three {
float:right;
width:200px;
height:400px;
background:blue;
}
.box {
width:180px;
height:200px;
background:red;
float:left;
margin-left:10px;
margin-top:10px;
}
</style>
</head>
</html>
<body>
<div id="container">
<div id="content">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
<div id="barside">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
