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