仔細(xì)分析他們的代碼，全站背景圖片其實(shí)就是2個(gè)，1個(gè)是1象素700長(zhǎng)的，另外一個(gè)是4象素4300長(zhǎng)度的。grd-4px.gif跟grd-1px.gif（因?yàn)楦叨忍L(zhǎng)，我就不在這里貼出來(lái)了）。全站通用一個(gè)背景圖片，是提高速度的很大因素。這一個(gè)背景，可能是不同的位置不同的顏色樣子，合成的一個(gè)但是可以在不同的位置調(diào)用。
以動(dòng)易來(lái)說(shuō)，如果要仿yahoo的頁(yè)面非常容易。通用css可以這樣分類(lèi)：
1、標(biāo)題背景
2、css表格通用背景
3、內(nèi)容背景
4、站內(nèi)外搜索背景
那么，如何定義呢？使用以下CSS定義即可：
| background-image:url(/Lectures/UploadFiles_3793/200612/20061210101340854.gif); background-repeat:repeat-x; background-position:0 -530px; |
注意最后一個(gè)定義，這個(gè)是通用一個(gè)背景圖片的關(guān)鍵，就是調(diào)用背景圖片的不同位置作為背景……
比如：定義“background-position:0 -530px;”，調(diào)用這個(gè)背景圖片530px高度部分作為背景，從最左邊開(kāi)始鋪墊。
| 附：背景(Backgrounds)的屬性： background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; 可以縮寫(xiě)為一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 語(yǔ)法是background:color image repeat attachment position; 您可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為： color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% |
這就是yahoo頁(yè)面上面最與眾不同的地方，縱觀國(guó)內(nèi)門(mén)戶(hù)網(wǎng)站、網(wǎng)易、qq新郎搜狐都沒(méi)有如此大膽的嘗試。yahoo的頁(yè)面代碼很負(fù)責(zé)，并且通用了一個(gè)css，還有部分css定義是放在頁(yè)面上面的，不知道是為了防止 css 偷學(xué)還是其他含義。的確，全部分析下來(lái)很難，因?yàn)橥粋€(gè).ht的定義，居然分了8個(gè)部分才定義完所有屬性。css里面幾部分，頁(yè)面里面居然還有……
湘公網(wǎng)安備 44010402000311號(hào)