Web標(biāo)準(zhǔn)實戰(zhàn)CSS網(wǎng)頁布局Google首頁_DIV+CSS實例

　　今天我們來學(xué)習(xí)用 Web 標(biāo)準(zhǔn)的方法來制作 Google 首頁（中文）。Google 首頁一直是用 table 布局的。我們把 Google 首頁用 PrtScr 截屏，作為制作時的設(shè)計稿參考，并且不打開 Google 首頁查看其源代碼——就當(dāng)它不存在。這樣和真實項目工作比較接近。

第一部分、HTML 的構(gòu)建（基于XHTML Transitional）

　　從設(shè)計稿上看到的內(nèi)容，去揣摩結(jié)構(gòu)。因為整個頁面內(nèi)容較少，輕易理解，但也碰到了我們的第一個問題：是用 <p> 標(biāo)簽還是 <div>？各自代表著 paragraph 和 division，原則上說，這個頁面上沒有任何的段落存在，所以不應(yīng)該用 <p>。但這里涉及到一個問題，拋開樣式表顯示的話，用 <p> 更加的清楚，因為默認(rèn) <div> 的 margin 和 padding 值都為零。好吧，用 <p> 還是用 <div> 是一個個人喜好問題，但是原則上應(yīng)當(dāng)用后者。在本例中也使用后者。開始找個稱手的編輯器寫 HTML ：


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

　　然后我們看到中間有“網(wǎng)頁 圖片 資訊 論壇 更多 ?”這些鏈接。怎么做？一般就兩種寫法，看個人喜好。把這幾個鏈接寫一行里面或者寫在一個 ul 里面，如下：


或者：


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

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


　　注重給每一項 radio button 添加一個 label，具體的效果大家可以自行測試一下。另外這里采用了 label 包含的寫法，也可以寫成 <label for="foo"> 針對 id 為 foo 的 label </label>。怎么寫這也是看個人喜好的。

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


　　到這里我們基本完成了 Google 首頁的 HTML 構(gòu)建，這里是樣例文件，待會兒我們還會再修整一部分代碼。

第二部分、樣式表

　　我們采用直接把樣式寫在 head 里面的方式，較為簡單也方便演示。首先我們看到除了頭部的登陸狀態(tài)，其余部分都是居中對齊的，并且發(fā)現(xiàn)字體是 Arial，默認(rèn)文字大小為 13 px。我們在 head 區(qū)域增加以下樣式：


　　這里使用了 px 這個絕對單位。關(guān)于絕對單位和相對單位，網(wǎng)上相關(guān)文章很多，并且也一直是 Web 前臺的熱門話題，本文簡單起見，直接使用絕對單位。

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


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


　　這里我們使用絕對定位的方法來處理它（在 HTML 中將高級搜索這三項的內(nèi)容放入 form 之內(nèi)）：


　　最后我們加上底部鏈接和版權(quán)信息部分的樣式：


　　在瀏覽器里面預(yù)覽并且微調(diào)一下各個數(shù)值，這樣就完成了 Google 首頁的制作。最終效果及源文件：


　　這在 Firefox 1.5 下測試，與 Google 首頁沒有任何像素的差異。在 IE 下會有一些像素上的差異，這就是各個瀏覽器的兼容性問題，留給大家自行處理了。本系列以后會有專門的文章討論這些問題。

　　本例的最終代碼還能夠有進一步的優(yōu)化，做法每個人習(xí)慣不同，希望本文能夠幫助到大家。

懌飛補充：
　　1、對于“?”使用代碼“＆raquo;”來代替;
　　2、label寫法推薦寫成 <label for="foo"> 針對 id 為 foo 的 label </label>。因為<label><input />xxxxx</label>只有在FF等對標(biāo)準(zhǔn)支持很好的瀏覽器里才顯示正常，在IE6中無法顯示正常的效果。
　　3、對于strong，需要重點顯示出來的內(nèi)容，可以使用strong，而對于布局里需要區(qū)分主次點的部分，就寫到樣式里，比如分類的一級分類為粗體，二級分類為一般字體……，其實strong對于搜索引擎優(yōu)化也有一定的作用，搜索引擎會優(yōu)先strong的內(nèi)容，而寫在樣式里就不會有這樣的效果！