在做DedeCMS模版計劃時文章列表頁很不輕易做出彩，這時辰我們就籌備做些改變，在列表節拍上整點“幺蛾子”！之前我們先容了讓列表頁面中的條目分組表現，這算一種體積地區的分別改變，本日先容另一種讓列表頁變大度的要領：實現列表條目隔行換配景致。

實現DedeCMS列表頁模版條目隔行換色的要領大抵有三種方案：

一 操作 配景圖片 實現改換列表條目配景致

起首別笑，我知道這要領很傻，但這也是最最……最簡樸的要領（在N年前剛打仗CSS時的我就是用這種要領……），一言以蔽之：配景圖片！譬喻列表行高20px，那么我們就做一張40px高度的配景圖片，每20px高一個顏色——上下兩種均高顏色的圖片。配置配景圖片平鋪在列表外層容器上。

哈哈，有點彪。云云列表弱點是行高必需牢靠，否則行高不均等配景圖片就露餡了。甜頭是超不變的賞識器兼容（相對第三種要領），以及很薄弱很薄弱的鐫汰了處事器壓力（相對第二種要領）。

so，雖傻也不容小覷 =。=!

二 操作 {dede:list} 輪回標簽實現改換列表條目配景致

第二種要領我們必要操作DedeCMS體系的 [field:global.autoindex/]，這個DEDECMS標簽是一個自增添標簽，他的值是從1開始，隨著你的列表自動自增。在我們做網站計劃和建造DedeCMS模板時很是好用。在如下代碼中你可以將它領略為一個判定，當火線表數是單數照舊偶數？假如是單數列就為 li 加 class=”color1″，假如是偶數列就為 li 加 class=”color2″。

<ul> {dede:list pagesize='20' titlelen='80'} [field:global.autoindex runphp='yes'] if((@me % 2) == 0){ @me ='<li class="color2">'; } else{ @me = '<li class="color1">'; } [/field:global.autoindex] <a href="[field:arcurl/]">[field:title/]</a></li> {/dede:list} </ul>

通過這樣我們就可以通過差異的CLASS標簽賦予差異的結果，信托認識CSS樣式表的你能做出更多的差別結果，不光單是改變配景致那么簡樸！

三 操作 CSS選擇器 實現改換列表條目配景致

第三種要領行使起來最簡樸，看過 20個常用CSS選擇器吧 這篇文章的伴侶們應該有些印象，我們可以操作 :nth-child(n) 序號選擇器來直接對CSS樣式表舉辦界說。

X:nth-child(n) 這個偽類用于設定一個序列元素（好比li、tr）中的第n個元素（從1開始算起）的樣式。

譬喻我們的列表條目 css 標簽為 ul.article-list li {} 那么我們可以在CSS樣式內外這樣界說：

ul.article-list li { background-color:white; } ul.article-list li:nth-child(2n) { background-color:gray; } 樣式中的 ul.article-list li:nth-child(2n) 就意味著偶數行，以是操作CSS選擇器就可以實現列表隔行換配景致這個簡樸的界說。不外這個要領在IE6中失效，以是你必要對你面臨的用戶有所判定來詳細思量用哪種要領。