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

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

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

<div><strong>junchenwu@gmail.com</strong> | <a href="ig">個(gè)性化主頁(yè)</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>

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

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

<div><strong>網(wǎng)頁(yè)</strong> <a href="pic">圖片</a> <a href="info">資訊</a> <a href="group">論壇</a> <a href="more"><strong>更多 ?</strong></a></div>

或者：

<ul>

<li><strong>網(wǎng)頁(yè)</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>

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

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

<form action="" method="post">

<div><input type="text" size="55" title="Google 搜索" /></div>

<div><button type="submit">Google 搜索</button><button>手氣不錯(cuò)</button></div>

<div><label><input type="radio" name="t" checked="checked" /> 搜索所有網(wǎng)頁(yè)</label> <label><input type="radio" name="t" /> 中文網(wǎng)頁(yè)</label> <label><input type="radio" name="t" /> 簡(jiǎn)體中文網(wǎng)頁(yè)</label></div>

</form>

注意給每一項(xiàng) radio button 添加一個(gè) label，具體的效果大家可以自行測(cè)試一下。另外這里采用了 label 包含的寫法，也可以寫成 <label for="foo"> 針對(duì) id 為 foo 的 label </label>。怎么寫這也是看個(gè)人喜好的謝謝懌飛提醒，包含的寫法在 IE6 中不被支持。我測(cè)試時(shí)使用的環(huán)境是 IE7 + FF1.5，有些局限了。

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

<div><a href="advanced_search">高級(jí)搜索</a> <a href="pref">使用偏好</a> <a href="lang">語(yǔ)言工具</a></div>

<div><a href="ad">廣告計(jì)劃</a> - <a href="all">Google 大全</a> - <a href="en">Google.com in English</a></div>

<div>?2007 Google</div>

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

第二部分、樣式表

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

body{

font-family: Arial, sans-serif;

font-size: 13px;

text-align: center;

margin-top: 3px;

}

a:link{

color: #00C;

}

a:visited{

color: #551a8b;

}

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

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

#login{ /*這是頭部的登陸狀態(tài)*/

text-align: right;

}

#stype{ /*這就是上文提到的那 5 項(xiàng)搜索類型*/

margin-bottom: 4px;

}

#stype span{ /*此處增加了無意義的 span*/

padding: 0 6px;

}

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

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

#search{ /*這是搜索表單*/

margin: 0 auto;

width: 400px;

position: relative;

}

#more{

width: 4em; /*4個(gè)漢字寬，這樣可以形成類似列表的效果*/

position: absolute;

top: 0;

right: -4.5em;

}

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

#ft{

margin: 54px auto 16px;

}

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/wengjinbao/archive/2007/03/30/693922.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。