CSS實現網頁中的隔行換色代碼

2024-07-11 08:43:28

字體：大中小

來源：轉載

供稿：網友

　　以前在Dreamweaver中用表格布局網頁的時候常常用到一種設計手法--隔行換色。也就是新聞列表或是列表類的每隔一行就換另一個色彩這樣顯得很漂亮也很合適閱讀。所以這種手法被廣大的設計師們收入囊中作為自己的又一把工具刀。但是隨著網頁標準浪潮的來襲，這種設計效果慢慢變得沒有了，原因主要是來自于標準化后的這種效果的實現上。
　　由于標準后我們都用UL來代替了表格，代碼雖然少了很多，但是好像效果也隨之少了。隔行換色也遇到了瓶頸。曾采用過CLASS方式來進行隔行換色：
<ul>
<liclass="one"></li>
<liclass="two"></li>
<liclass="one"></li>
<liclass="two"></li>
</ul>
　　我們看到上面的代碼所表現出來的是每行的CLASS都不一樣，通過這樣的方式的確可以解決隔行換色的問題，但是都被程序員告知這樣寫法程序沒辦法寫。
　　這種設想在網頁標準研究聯盟中得到了反駁，認為樣式的事沒必要用行為去實現，并且用JS來實現的效果并不一定有CSS來解決的好。但這種效果實踐后發現，可以用大背景實現。什么叫大景實現呢，意思就是說通過在父級設定背景從而使得當前級得到隔行換色或是隔N行換N色。
　　上圖是一個實例應用，大家可以看到采用的是兩行背景重復。而這個背景圖是定義在UL上的而不定義在LI上。這樣又使得我們少寫一點代碼，讓代碼顯得更加的干凈。同時這樣技巧通過舉一反三的思考就能做出更多很好玩的樣式來，比如我們讓每一行都不一樣，或是讓每一行都像是紙頁腳卷起來一樣，或是其它的什么花樣，那就要看你能想出什么樣的花招來了!

上一篇：調整CSS類型的順序改變鏈接翻滾

下一篇：巧妙運用CSS立刻改變鼠標的樣式