采用大量的DIV和CSS样式设置进行页面布局及优化，html没什么难度就那些常用的标签以及div、div嵌套使用，掌握了这些东西技术上就没什么大的难度，CSS样式设置里面有一些设置要记住。写下此文留作笔记供以后参考。
body{
margin:0px;
padding:0px;
font:12px arial,宋体;
text-align:center;/*所有放在body体里的都居中解决浏览器带来的不居中问题*/
}
#container{
/*该设置谷歌浏览器可以实现居中但是IE浏览器不能居中
margin-left:auto;
margin-right:auto;
*/
width:960px; /* tem 临时用主要是看效果 */
height:800; /* tem 临时用 */
/* background:green; tem 临时用 */
text-align:left;/*body体中居中的部分再拿回来*/
}
#head{
width:100%;
height:80px;
/*background:red; tem 临时用 */
}
#head #logo{
width:200px;
height:80px;
background:black;
float:left;/*脱离文档流重新按照要求排列*/
margin-right:10px;/*右边有10个像素边距这样才能把多余的20px均分掉*/
}
#head #banner{
width:600px;
height:80px;
background:pink;
float:left;/*脱离文档流重新按照要求排列*/
}
#head #tool{
width:140px;/*中间两个10px宽度的分割条*/
height:80px;
background:green;
float:right;/*脱离文档流重新按照要求排列*/
}
#head #menu{
width:100%;/**/
height:28px;/*ie浏览器高度不够时会自动撑开而火狐等浏览器不会只会在设定的高度内显示*/
background:#aaa;
float:left;/*脱离文档流重新按照要求排列*/
}
ul{
margin:0px;
padding:0px;
list-style:none;/*让列表没有样式，ul通常用这三条设置即可*/
}
#menu li{
width:185px;
float:left;
padding-top:5px;/*以下设置让链接有居中效果*/ /*1.还有一种居中的办法height:28px line-height:28px利用固定值居中因为文字都在行的中间显示下一步见2 */
padding-bottom:5px;
text-align:center;
}
#menu a{
color:white;
}
#head #menu .tiao{
float:left;
width:1px;
height:12px;
background:black;
overflow:hidden;/*超出部分要隐藏*/
margin-top:5px; /*2. 28-12=16/2=8px*/
}
#main{
width:100%;
height:600px;
background:blue;/* tem 临时用 */
}
#main .leftbox{
float:left;
width:750px;
height:400px;
/*background:red;*/
}
#main .rightbox{
float:right;
width:200px;
height:400px;
background:black;
}
.leftbox .left{
float:left;
width:300px;
height:200px;
background:yellow;
}
.title{
float:left;
width:100%;
height:26px;
background:url(../image/title.png) no-repeat right;/*相对于样式表所在的目录;1.不重复靠右边放解决图片圆角问题（下一步见2）*/
}
.content{
float:left;
width:100%;
height:174px;
border:1px solid black;/*IE边框+内容宽度，FF是边框另算*/
}
.content li{
width:100%;
line-height:18px;
text-align:left;
background:url(../image/dot.gif) repeat-x bottom;/*水平排列靠底部 注意括号后面一定要空格*/
}
a:hover{
position:relative;/*相对位置*/
top:1px;
left:1px;
color:red;
}
li a{
text-decoration:none;/*去掉链接的下划线*/
}
.content li a{
background:url(../image/li_icon.gif) no-repeat 0 center;/*不重复 居中 注意括号后面加上空格否则样式不能显示*/
padding-left:15px;/*让内容与边框之间有15px空间让出图片位置这样文字就不会被图片遮挡 */
}
.title h3{
margin:0px;/*次设置解决文字和图片不对称问题*/
padding:0px;
padding-left:10px;
width:100px;/*只要显示‘强烈推荐’四个字的宽度即可否则会覆盖掉1的右圆角*/
line-height:26px;
font-size:14px;
background:url(../image/title.png) no-repeat left;/*2.h3背景图片即左圆角但是有宽度限制否则会覆盖右圆角*/
}
.leftbox .right{
float:right;
width:440px;
height:200px;
background:yellow;
}
#foot{
width:100%;
height:80px;
background:yellow;/* tem 临时用 */
}
.nav{
width:100%;
height:10px;/*IE指定的最小高度是18px 小于18px都按18px算*/
clear:both; /*防止有空就钻进去*/
overflow:hidden;/*超出部分隐藏 scroll超出部分有滚动条解决最小高度18px问题*/
}
原文：http://10846995.blog.51cto.com/10836995/1716318