DIV CSS 佈局教程網

本文和大家重點討論一下用DIV CSS網頁布局之Google首頁實現，Google首頁一直是用table布局的。我們把Google首頁用PrtScr截屏，作為制作時的設計稿參考，並且不打開Google首頁查看其源代碼——就當它不存在。這樣和真實項目工作比較接近。

用DIV CSS網頁布局之Google首頁實現

今天我們來學習用Web標准的方法來制作Google首頁（中文）。Google首頁一直是用table布局的。我們把Google首頁用PrtScr截屏，作為制作時的設計稿參考，並且不打開Google首頁查看其源代碼——就當它不存在。這樣和真實項目工作比較接近。

第一部分、DIV CSS網頁布局之HTML的構建（基於XHtmlTransitional）

從設計稿上看到的內容，去揣摩結構。因為整個頁面內容較少，容易理解，但也碰到了我們的第一個問題：是用

標簽還是 ？各自代表著paragraph和division，原則上說，這個頁面上沒有任何的段落存在，所以不應該用

。但這裡涉及到一個問題，拋開樣式表顯示的話，用

更加的清晰，因為默認 的margin和padding值都為零。好吧，用

還是用 是一個個人喜好問題，但是原則上應當用後者。在本例中也使用後者。開始找個稱手的編輯器寫Html：

<div><strong>junchenwu@gmail.comstrong>|<ahrefahref="ig">個性化主頁  
 
a>|<ahrefahref="MyAccount">我的帳戶a>|<ahrefahref="logout">退出a>div> 
<div><imgsrcimgsrc="/School/UploadFiles_7810/201202/20120226182624466.gif"alt="Google"/>div> 

這包括頭部的登陸狀態和中間的大Logo。我們先不增加任何樣式id和class。

然後我們看到中間有“網頁圖片資訊論壇更多»”這些鏈接。怎麼做？一般就兩種寫法，看個人喜好。把這幾個鏈接寫一行裡面或者寫在一個ul裡面，如下：

<div><strong>網頁strong><ahrefahref="pic">圖片a><ahrefahref="info"> 
 
資訊a><ahrefahref="group">論壇a><ahrefahref="more"> 
 
<strong>更多»strong>a>div> 

或者：

<ul> 
<li><strong>網頁strong>li> 
<li><ahrefahref="pic">圖片a>li> 
<li><ahrefahref="info">資訊a>li> 
<li><ahrefahref="group">論壇a>li> 
<li><ahrefahref="more"><strong>更多»strong>a>li> 
ul> 

這兩種寫法各有什麼優缺點呢？這裡一共有5項，第一項是加粗的文字，其余4項是鏈接。如果使用第一種寫法對於樣式的控制就顯得力不從心，比如控制這5項之間的間距；如果使用第二種寫法，那麼在脫離樣式的情況下，分了5行顯示。這裡我把缺點都寫出來，根據本例情況，我們還是選擇第一種寫法，這樣要控制樣式就需要在每一項前後增加無意義的。

我們先繼續往下寫，遇到了搜索表單以及邊上的高級搜索等三個鏈接。先寫哪一個？看上去是平級的啊。這個時候最好問一下產品設計師的本意。我們在這裡先寫表單。如下：

<forMactionforMaction=""method="post"> 
<div><inputtypeinputtype="text"size="55"title="Google搜索"/>div> 
<div><buttontypebuttontype="submit">Google搜索button><button>手氣不錯button>div> 
<div><label><inputtypeinputtype="radio"name="t"checked="checked"/> 
 
搜索所有網頁label><label><inputtypeinputtype="radio"name="t"/> 
 
中文網頁label><label><inputtypeinputtype="radio"name="t"/>簡體中文網頁label>div> 
form> 

注意給每一項radiobutton添加一個label，具體的效果大家可以自行測試一下。另外這裡采用了label包含的寫法，也可以寫成針對id為foo的label。怎麼寫這也是看個人喜好的。

接下來是高級搜索等三個鏈接，以及底部的版權信息等，代碼如下：

<div><ahrefahref="advanced_search">高級搜索a><ahrefahref="pref">使用偏好a><ahrefahref="lang">語言工具a>div> 
<div><ahrefahref="ad">廣告計劃a>-<ahrefahref="all">Google大全a>-<ahrefahref="en">Google.cominEnglisha>div> 
<div>©2007Googlediv> 

到這裡我們基本完成了Google首頁的Html構建，這裡是樣例文件，待會兒我們還會再修整一部分代碼。