|
第二部分、樣式表
我們采用直接把樣式寫在 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{ /*此處增加了無(wú)意義的 span*/
padding: 0 6px;
}
之后的搜索表單，我們碰到了樣式化的難點(diǎn)，首先作為搜索的 size 為 55 的輸入框從布局上來(lái)說(shuō)是絕對(duì)居中的，而右側(cè)高級(jí)搜索那三項(xiàng)的寬度加上輸入框在內(nèi)并不是絕對(duì)居中。也就是說(shuō)視覺上，高級(jí)搜索那三項(xiàng)偏右了。如下圖所示：
這里我們使用絕對(duì)定位的方法來(lái)處理它（在 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è)的制作。最終效果及源文件：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
提示：您可以先修改部分代碼再運(yùn)行
這在 Firefox 1.5 下測(cè)試，與 Google 首頁(yè)沒有任何像素的差異。在 IE 下會(huì)有一些像素上的差異，這就是各個(gè)瀏覽器的兼容性問題，留給大家自行處理了。本系列以后會(huì)有專門的文章討論這些問題。
本例的最終代碼還能夠有進(jìn)一步的優(yōu)化，做法每個(gè)人習(xí)慣不同，希望本文能夠幫助到大家。
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁(yè) Web 標(biāo)準(zhǔn)實(shí)踐——Google 的首頁(yè) [1] 下一頁(yè) Web 標(biāo)準(zhǔn)實(shí)踐——Google 的首頁(yè) [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) Web 標(biāo)準(zhǔn)實(shí)踐——Google 的首頁(yè) [2]
