<1>页面布局
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标准的页面的布局首页</title>
<style type="text/css">
body {
font-family: Arial;
margin: 0px; /*很多标签它们默认是有样式的，比如body就有外边距和内边距，我们一般会把body的外边距和内边距先清空，这样的话我们的内容就可以挨着边放了*/
padding: 0px;
/*第一个兼容性问题：对于老的IE浏览器，margin：0 auto 并去起作用于是我们得在body里设置text-align:center 让它居中，让它居中后，里面的所有内容都会居中，因为是层叠的样式表关系*/
text-align: center;
}
#container {
margin: 0px auto; /*将容器左右居中*/
width: 960px; /**/
/*height:800px;最外面的容器我们一般都不设置高度，高度都是按内容给它撑开*/
/*background-color:red;*/
text-align: left; /*因为为了解决老旧的IE浏览器不识别margin 0 auto的兼容性问题，我们在body里设置了text-align:center，所以我们这里需要给它调回来，因为我们需要容器里的内容是默认向左，所以需要调回来*/
}
#header {
float: left;
width: 100%; /*因为最外面的这个#container容器已经指定了一个960px的宽度了，我们里面的盒子最好是按照百分比来设置盒子的宽度，因为如果外面的盒子如果调宽，或者调窄的时候，我们就不需要在改这里的宽度了。假如这里我们直接指定960px，它现在虽然和100%一样，但是如果#container容器改变宽度大小的时候，我们也就需要在这里进行改动；一个两个无所谓，十个，八个的就很麻烦了，所以我们指定好外面的#container容器的宽度后，里面的小盒子就尽量用百分比来设置宽度*/
/*height:150px; 第三个兼容性问题：标准的盒子，如果外层指定了高度了，它是不会被内容撑开的，而比较老旧的IE（即不标准的盒子）如果外层指定了高度，它是会被内容撑开的，为了解决这个兼容性问题，我们只能不设置外层的高度*/
/*background-color: red;*/
}
#logo {
float: left;
width: 180px;
background-color: #F0F;
height: 100px;
}
#banner {
float: left;
width: 600px;
background-color: yellow;
height: 100px;
margin-left: 10px;
}
#tool {
float: left;
width: 160px;
background-color: #aaFF00;
height: 100px;
margin-left: 10px;
}
#nav {
float: left;
background-color: #00BBFF;
height: 30px;
width: 100%;
}
#content {
float:left;
width: 100%;
/*height: 500px;*/ /*tmp*/
/*background-color: green;*/
}
#main {
float:left;
width:750px;
/*height:600px;*/
/*background-color:yellow;*/
}
#main .leftBox {
float:left;
width:300px;
height:200px;
background-color:#ccc;
}
#main .rightBox {
float: right; /*.leftBox往左边浮动，.rightBox往右边浮动 300px+440px=740px 因为main的宽度是750px 所以它们两个中间就会有一个10px的间距了。相当于外边距的效果*/
width: 440px;
height: 200px;
background-color: #ccc;
}
#barside {
float: right;
width: 200px;
height:620px;
background-color:yellow;
}
.guanggao {
float:left;
width:100%;
height:100px;
background-color:red;
clear:both;
}
#footer {
float:left;
width: 100%;
height: 100px; /*tmp*/
background-color: blue;
}
.t {
/*我们在设置页面的时候想将页面做的好看一些，几个区块直接一般都用空白分割,一般情况下我们会用 margin-bottom:10px来设置，将div之间用空白隔开；但是我们在一个页面布局当中，这个隔开的空白到处都是，如果老板说，10px太宽了，5px就行，那我们就需要将所有有空白的地方该一下 margin-bottom:5px，工作量非常大，可维护性就非常差； 那能不能做到改一个值，所有的值都改掉呢? 答案是可以的，我们可以通过加塞的方发实现；比如两个div直接我想用空白隔开，平常的做法是设置外边距，现在我们不这样做了，我直接在两个div之间放一个div，将这个div的设置成白色的，宽度和高度设置成我们需要的就可以了*/
width: 100%;
height: 10px;
color: #fff;
/*第二个兼容性问题：比较老旧的IE浏览器值指定高度小于18px的时候，是按18px算的，超过18px，才按我们指定的像素算；也就是说，我们指定了一个div的高度为10px，但是它却将这个div的高度渲染成18px了；为了解决这个兼容问题，我们可以这样设置overflow:hidden;即：超过指定的高度，就隐藏掉超过的部分*/
overflow: hidden;
clear: both;
}
</style>
<!--其实CSS文件并不是只加载一个，比如说这个是跟布局有关的我们可以定义一个layout.css，跟字体有关的我们也可以定义个font.css,跟文章的内容或其他有关的，我们再定义一个其他的css文件，等等；这样做的好处就是一看就知道哪个CSS文件是干嘛用的，这样我们找东西就方便一些。所以说CSS文件可以拆成几个，并不一定非要写在一个CSS文件中，只是我们偷懒，所以只写在一个CSS文件里-->
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<a href="http://www.hao123.com"><img src="images/logo.png" /></a>
</div>
<div id="banner">
什么是banner？一个网站中最主要的广告位
</div>
<div id="tool">
工具栏
</div>
<div class="t"></div>
<div id="nav">
导航，菜单，应用
</div>
</div>
<div class="t"></div>
<div id="content">
<div id="main">
<div class="leftBox">
左主体
</div>
<div class="rightBox">
右主体
</div>
<div class="t"></div>
<div class="leftBox">
左主体
</div>
<div class="rightBox">
右主体
</div>
<div class="t"></div>
<div class="leftBox">
左主体
</div>
<div class="rightBox">
右主体
</div>
</div>
<div id="barside">
边栏
</div>
</div>
<div class="t"></div>
<div class="guanggao">
广告位
</div>
<div class="t"></div>
<div id="footer"></div>
</div>
</body>
</html>
原文：http://blog.csdn.net/fanbin168/article/details/46319073