今天我們來學習用 web 標準的方法來製作 google 首頁（中文）。google 首頁一直是用table布局的。我們把 google 首頁用 prtscr 截圖，作為製作時的設計稿參考，並且不開啟 google 首頁檢視其源**——就當它不存在。這樣和真實專案工作比較接近。
第一部分、html 的構建（基於xhtml transitional）
從設計稿上看到的內容，去揣摩結構。因為整個頁面內容較少，容易理解，但也碰到了我們的第乙個問題：是用標籤還是？各自代表著 paragraph 和 division，原則上說，這個頁面上沒有任何的段落存在，所以不應該用。但這裡涉及到乙個問題，拋開樣式表顯示的話，用更加的清晰，因為預設的margin和padding值都為零。好吧，用還是用是乙個個人喜好問題，但是原則上應當用後者。在本例中也使用後者。開始找個稱手的編輯器寫 html ：
[email protected]| 個性化主頁 | 我的帳戶 | 退出
這包括頭部的登陸狀態和中間的大 logo。我們先不增加任何樣式id和class。
網頁
資訊論壇
更多 »
或者：這兩種寫法各有什麼優缺點呢？這裡一共有 5 項，第一項是加粗的文字，其餘 4 項是鏈結。如果使用第一種寫法對於樣式的控制就顯得力不從心，比如控制這 5 項之間的間距；如果使用第二種寫法，那麼在脫離樣式的情況下，分了 5 行顯示。這裡我把缺點都寫出來，根據本例情況，我們還是選擇第一種寫法，這樣要控制樣式就需要在每一項前後增加無意義的。
注意給每一項radio button新增乙個label，具體的效果大家可以自行測試一下。另外這裡採用了label包含的寫法，也可以寫成針對 id 為 foo 的 label。怎麼寫這也是看個人喜好的
謝謝懌飛提醒，包含的寫法在 ie6 中不被支援。我測試時使用的環境是 ie7 + ff1.5，有些侷限了。
高階搜尋
使用偏好
語言工具
廣告計畫 - google 大全 - google.com in english
到這裡我們基本完成了 google 首頁的 html 構建，這裡是樣例檔案，待會兒我們還會再修整一部分**。
第二部分、樣式表
我們採用直接把樣式寫在head裡面的方式，較為簡單也方便演示。首先我們看到除了頭部的登陸狀態，其餘部分都是居中對齊的，並且發現字型是 arial，預設文字大小為 13 px。我們在head區域增加以下樣式：
body
a:link
a:visited
然後我們逐步增加其他樣式：
#login
#stype
#stype span
之後的搜尋表單，我們碰到了樣式化的難點，首先作為搜尋的 size 為 55 的輸入框從布局上來說是絕對居中的，而右側高階搜尋那三項的寬度加上輸入框在內並不是絕對居中。也就是說視覺上，高階搜尋那三項偏右了。如下圖所示：
這裡我們使用絕對定位的方法來處理它（在 html 中將高階搜尋這三項的內容放入form之內）：
#search
#more
#ft
在瀏覽器裡面預覽並且微調一下各個數值，這樣就完成了 google 首頁的製作。最終效果及原始檔
這在 firefox 1.5 下測試，與 google 首頁沒有任何畫素的差異。在 ie 下會有一些畫素上的差異，這就是各個瀏覽器的相容性問題，留給大家自行處理了。本系列以後會有專門的文章討論這些問題。
Web 標準實踐系列（一） Google 的首頁
今天我們來學習用 web 標準的方法來製作 google 首頁 中文 google 首頁一直是用table布局的。我們把 google 首頁用 prtscr 截圖，作為製作時的設計稿參考，並且不開啟 google 首頁檢視其源 就當它不存在。這樣和真實專案工作比較接近。第一部分 html 的構建 基...
WEB標準學習實踐（一）
首先說明，web標準即通俗意義上講的div css網頁布局。之所以學習web標準，沒有任何理由，完全是興趣。以前也有過學習的衝動，但總是限於時間和個人的原因沒有實際操作。換了東家之後，大把的時間咱可不能浪費了。利用每天上班的片段時間，零零散散的看了一些基礎知識，發現入門還是比較簡單的。但是要做出布局...
由淺入深實踐學習 Web 標準
如果你還不知道 web 標準是什麼，那麼我給乙個定義 從 05 年開始才在中國流行起來的一種做網頁的方式，並且現在保持著一定的熱度。新浪 網易這兩大門戶 的首頁都是標準的 或接近標準 我這麼定義，是說作程式設計客棧為乙個新銳的網頁設計師，如果你現在還不知道 web 標準，那麼你即將被歷史淘汰了。很多...