DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS:標准下的隔行換色方法
CSS:標准下的隔行換色方法
編輯:CSS進階教程     

我們以前在DW中用表格布局著我們的網頁的時候常常用到一種設計手法--隔行換色。也就是新聞列表或是列表類的每隔一行就換另一個色彩這樣顯得很漂亮也很合適閱讀。所以這種手法被廣大的設計師們收入囊中作為自己的又一把工具刀。但是隨著網頁標准浪潮的來襲,這種設計效果慢慢變得沒有了,原因主要是來自於標准化後的這種效果的實現上。

由於標准後我們都用UL來代替了表格,代碼雖然少了很多,但是好像效果也隨之少了。隔行換色也遇到了瓶頸。我采用過CLASS方式來進行隔行換色:

以下是引用片段:
<ul>
  <li class="one"></li>
  <li class="two"></li>
  <li class="one"></li> 
  <li class="two"></li>
</ul>

我們看到上面的代碼所表現出來的是每行的CLASS都不一樣,通過這樣的方式的確可以解決隔行換色的問題,但是一直來我都被程序員告知這樣寫法程序沒辦法寫。我一直很郁悶:用表格時他們是怎麼寫的?

當然抱怨歸抱怨,問題總是需要解決的,之後有朋友想過用JS來實現隔行換色,這種設想在網頁標准研究聯盟中得到了反駁,認為樣式的事沒必要用行為去實理,並且用JS來實現的效果並不一定有CSS來解決的好。我同意這樣的見解,並且我主張的是大背景實現。什麼叫大背景實現呢,意思就是說通過在父級設定背景從而使得當前級得到隔行換色或是隔N行換N色。

上圖是我前幾天剛完成的一個項目中的一個實例應用,大家可以看到我采用的是兩行背景重復。而這個背景圖是定義在UL上的而不定義在LI上。這樣又使得我們少寫一點代碼,讓代碼顯得更加的干淨。同時這樣技巧通過舉一反三的思考就能做出更多很好玩的樣式來,比如我們讓每一行都不一樣,或是讓每一行都像是紙頁腳卷起來一樣,或是其它的什麼花樣,那就要看你能想出什麼樣的花招來了!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved