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

由于標(biāo)準(zhǔn)后我們都用UL來代替了表格，代碼雖然少了很多，但是好像效果也隨之少了。隔行換色也遇到了瓶頸。我采用過CLASS方式來進行隔行換色：

  <li class="one"></li>
  <li class="two"></li>
  <li class="one"></li> 
  <li class="two"></li>
</ul>

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

當(dāng)然抱怨歸抱怨，問題總是需要解決的，之后有朋友想過用JS來實現(xiàn)隔行換色，這種設(shè)想在網(wǎng)頁標(biāo)準(zhǔn)研究聯(lián)盟中得到了反駁，認(rèn)為樣式的事沒必要用行為去實理，并且用JS來實現(xiàn)的效果并不一定有CSS來解決的好。我同意這樣的見解，并且我主張的是大背景實現(xiàn)。什么叫大背景實現(xiàn)呢，意思就是說通過在父級設(shè)定背景從而使得當(dāng)前級得到隔行換色或是隔N行換N色。

 <h3><span>領(lǐng)導(dǎo)講話</span><em><a href="" title="">點擊這里</a></em></h3> 
 <ul> 
  <li><a href="" alt="">假字以數(shù)十字為基礎(chǔ)假字?jǐn)?shù)…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以數(shù)十字為基礎(chǔ)假字?jǐn)?shù)…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以數(shù)十字為基礎(chǔ)假字?jǐn)?shù)…</a><em>(2006-12-18)</em></li>
  <li><a href="" alt="">假字以數(shù)十字為基礎(chǔ)假字?jǐn)?shù)…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以數(shù)十字為基礎(chǔ)假字?jǐn)?shù)…</a><em>(2006-12-18)</em></li> 
 </ul> 
</div>

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