DIV CSS 佈局教程網

第二部分、DIV CSS網頁布局之樣式表

我們采用直接把樣式寫在head裡面的方式，較為簡單也方便演示。首先我們看到除了頭部的登陸狀態，其余部分都是居中對齊的，並且發現字體是Arial，默認文字大小為13px。我們在head區域增加以下樣式：

body{  
font-family:Arial,sans-serif;  
font-size:13px;  
text-align:center;  
margin-top:3px;  
}  
a:link{  
color:#00C;  
}  
a:visited{  
color:#551a8b;  
} 

這裡使用了px這個絕對單位。關於絕對單位和相對單位，網上相關文章很多，並且也一直是Web前台的熱門話題，本文簡單起見，直接使用絕對單位。

然後我們逐步增加其他樣式：

#login{/*這是頭部的登陸狀態*/  
text-align:right;  
}  
#stype{/*這就是上文提到的那5項搜索類型*/  
margin-bottom:4px;  
}  
#stypespan{/*此處增加了無意義的span*/  
padding:06px;  
} 

之後的搜索表單，我們碰到了樣式化的難點，首先作為搜索的size為55的輸入框從布局上來說是絕對居中的，而右側高級搜索那三項的寬度加上輸入框在內並不是絕對居中。也就是說視覺上，高級搜索那三項偏右了。如下圖所示：

這裡我們使用絕對定位的方法來處理它（在Html中將高級搜索這三項的內容放入form之內）：

 
#search{/*這是搜索表單*/  
margin:0auto;  
width:400px;  
position:relative;  
}  
#more{  
width:4em;/*4個漢字寬，這樣可以形成類似列表的效果*/  
position:absolute;  
top:0;  
right:-4.5em;  
} 

最後我們加上底部鏈接和版權信息部分的樣式：

 
#ft{  
margin:54pxauto16px;  
} 

在浏覽器裡面預覽並且微調一下各個數值，這樣就完成了Google首頁的制作。