今天我們來學習用 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="http://www.google.com/intl/zh-CN_ALL/images/logo.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>。怎么寫這也是看個人喜好的謝謝懌飛提醒，包含的寫法在 IE6 中不被支持。我測試時使用的環境是 IE7 + FF1.5，有些局限了。

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

<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 首頁的制作。最終效果及源文件

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

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

轉載于:https://www.cnblogs.com/wengjinbao/archive/2007/03/30/693922.html

總結

以上是生活随笔為你收集整理的Web 标准实践系列（一）——Google 的首页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。