採用大量的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問題*/
}