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

實現(xiàn)DedeCMS列表頁模版條目隔行換色的要領(lǐng)大抵有三種方案：

一 操作 配景圖片 實現(xiàn)改換列表條目配景致

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

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

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

二 操作 {dede:list} 輪回標(biāo)簽實現(xiàn)改換列表條目配景致

第二種要領(lǐng)我們必要操作DedeCMS體系的 [field:global.autoindex/]，這個DEDECMS標(biāo)簽是一個自增添標(biāo)簽，他的值是從1開始，隨著你的列表自動自增。在我們做網(wǎng)站計劃和建造DedeCMS模板時很是好用。在如下代碼中你可以將它領(lǐng)略為一個判定，當(dāng)火線表數(shù)是單數(shù)照舊偶數(shù)？假如是單數(shù)列就為 li 加 class=”color1″，假如是偶數(shù)列就為 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標(biāo)簽賦予差異的結(jié)果，信托認(rèn)識CSS樣式表的你能做出更多的差別結(jié)果，不光單是改變配景致那么簡樸！

三 操作 CSS選擇器 實現(xiàn)改換列表條目配景致

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

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

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

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