css|google|網頁 今天我們來學慣用 Web 標準的方法來製作 Google 首頁（中文）。Google 首頁一直是用 table 布局的。我們把 Google 首頁用 PrtScr 截屏，作為製作時的設計稿參考，並且不開啟 Google 首頁查看其原始碼——就當它不存在。這樣和真實項目工作比較接近。
第一部分、HTML 的構建（基於XHTML Transitional）
從設計稿上看到的內容，去揣摩結構。因為整個頁面內容較少，容易理解，但也碰到了我們的第一個問題：是用 <p> 標籤還是 <div>？各自代表著 paragraph 和 division，原則上說，這個頁面上沒有任何的段落存在，所以不應該用 <p>。但這裡涉及到一個問題，拋開樣式表顯示的話，用 <p> 更加的清晰，因為預設 <div> 的 margin 和 padding 值都為零。好吧，用 <p> 還是用 <div> 是一個個人喜好問題，但是原則上應當用後者。在本例中也使用後者。開始找個稱手的編輯器寫 HTML ：
<div><strong>junchenwu@gmail.com</strong> | <a href="ig">個人化首頁</a> | <a href="MyAccount">我的帳戶</a> | <a href="logout">退出</a></div>
<div><img src="/UploadPic/2007-7/200777203254259.gif" alt="Google" /></div>
這包括頭部的登陸狀態和中間的大 Logo。我們先不增加任何樣式 id 和 class。
然後我們看到中間有“網頁 圖片 資訊 論壇 更多 »”這些連結。怎麼做？一般就兩種寫法，看個人喜好。把這幾個連結寫一行裡面或者寫在一個 ul 裡面，如下：
<div><strong>網頁</strong> <a href="pic">圖片</a> <a href="info">資訊</a> <a href="group">論壇</a> <a href="more"><strong>更多 »</strong></a></div>
或者：
<ul>
<li><strong>網頁</strong></li>
<li><a href="pic">圖片</a></li>
<li><a href="info">資訊</a></li>
<li><a href="group">論壇</a></li>
<li><a href="more"><strong>更多 »</strong></a></li>
</ul>
這兩種寫法各有什麼優缺點呢？這裡一共有 5 項，第一項是加粗的文字，其餘 4 項是連結。如果使用第一種寫法對於樣式的控制就顯得力不從心，比如控制這 5 項之間的間距；如果使用第二種寫法，那麼在脫離樣式的情況下，分了 5 行顯示。這裡我把缺點都寫出來，根據本例情況，我們還是選擇第一種寫法，這樣要控制樣式就需要在每一項前後增加無意義的 <span>。
我們先繼續往下寫，遇到了搜尋表單以及邊上的進階搜尋等三個連結。先寫哪一個？看上去是平級的啊。這個時候最好問一下產品設計師的本意。我們在這裡先寫表單。如下：
<form action="" method="post">
<div><input type="text" size="55" title="Google 搜尋" /></div>
<div><button type="submit">Google 搜尋</button><button>手氣不錯</button></div>
<div><label><input type="radio" name="t" checked="checked" /> 搜尋所有網頁</label> <label><input type="radio" name="t" /> 中文網頁</label> <label><input type="radio" name="t" /> 簡體中文網頁</label></div>
</form>
注意給每一項 radio button 添加一個 label，具體的效果大家可以自行測試一下。另外這裡採用了 label 包含的寫法，也可以寫成 <label for="foo"> 針對 id 為 foo 的 label </label>。怎麼寫這也是看個人喜好的。
接下來是進階搜尋等三個連結，以及底部的著作權資訊等，代碼如下：
<div><a href="advanced_search">進階搜尋</a> <a href="pref">使用偏好</a> <a href="lang">語言工具</a></div>
<div><a href="ad">廣告計劃</a> - <a href="all">Google 大全</a> - <a href="en">Google.com in English</a></div>
<div>©2007 Google</div>
到這裡我們基本完成了 Google 首頁的 HTML 構建，這裡是範例檔案，待會兒我們還會再修整一部分代碼。
第二部分、樣式表
我們採用直接把樣式寫在 head 裡面的方式，較為簡單也方便示範。首先我們看到除了頭部的登陸狀態，其餘部分都是置中對齊的，並且發現字型是 Arial，預設文字大小為 13 px。我們在 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;
}
#stype span{ /*此處增加了無意義的 span*/
padding: 0 6px;
}
之後的搜尋表單，我們碰到了樣式化的痛點，首先作為搜尋的 size 為 55 的輸入框從布局上來說是絕對置中的，而右側進階搜尋那三項的寬度加上輸入框在內並不是絕對置中。也就是說視覺上，進階搜尋那三項偏右了。如下圖所示：
這裡我們使用絕對位置的方法來處理它（在 HTML 中將進階搜尋這三項的內容放入 form 之內）：
#search{ /*這是搜尋表單*/
margin: 0 auto;
width: 400px;
position: relative;
}
#more{
width: 4em; /*4個漢字寬，這樣可以形成類似列表的效果*/
position: absolute;
top: 0;
right: -4.5em;
}
最後我們加上底部連結和著作權資訊部分的樣式：
#ft{
margin: 54px auto 16px;
}
在瀏覽器裡面預覽並且微調一下各個數值，這樣就完成了 Google 首頁的製作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Google</title><style type="text/css">body{ background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 13px; text-align: center; margin-top: 3px;}a:link{ color: #00C;}a:visited{ color: #551a8b;}#login{ text-align: right;}#stype{ margin-bottom: 4px;}#stype span{ padding: 0 6px;}#search{ margin: 0 auto; width: 400px; position: relative;}#more{ width: 4em; position: absolute; top: 0; right: -4.5em;}#ft{ margin: 54px auto 16px;}</style></head><body><div style="text-align: right"><a href="ig">個人化首頁</a> | <a href="MyAccount">我的帳戶</a> | <a href="logout">退出</a></div><div style="margin: 4px auto 19px;"><img src="/UploadPic/2007-7/200777203254259.gif" alt="Google" /></div><div id="stype"><span><strong>網頁</strong></span> <span><a href="pic">圖片</a></span> <span><a href="info">資訊</a></span> <span><a href="group">論壇</a></span> <span><a href="more"><strong>更多 »</strong></a></span></div><form id="search" action="" method="post"><div><input type="text" size="55" title="Google 搜尋" /></div><div><button type="submit">Google 搜尋</button><button>手氣不錯</button></div><div style="margin-top: 6px;"><label><input type="radio" name="t" checked="checked" />搜尋所有網頁</label><label><input type="radio" name="t" />中文網頁</label><label><input type="radio" name="t" />簡體中文網頁</label></div><div id="more"><a href="advanced_search">進階搜尋</a> <a href="pref">使用偏好</a> <a href="lang">語言工具</a></div></form><div id="ft"><a href="ad">廣告計劃</a> - <a href="all">Google 大全</a> - <a href="en">Google.com in English</a></div><div>©2007 Google</div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
