在做DedeCMS模版計劃時文章列表頁很不輕易做出彩,這時辰我們就籌備做些改變,在列表節(jié)拍上整點“幺蛾子”!之前我們先容了讓列表頁面中的條目分組表現(xiàn),這算一種體積地區(qū)的分別改變,本日先容另一種讓列表頁變大度的要領(lǐng):實現(xiàn)列表條目隔行換配景致。
實現(xiàn)DedeCMS列表頁模版條目隔行換色的要領(lǐng)大抵有三種方案:
起首別笑,我知道這要領(lǐng)很傻,但這也是最最……最簡樸的要領(lǐng)(在N年前剛打仗CSS時的我就是用這種要領(lǐng)……),一言以蔽之:配景圖片!譬喻列表行高20px,那么我們就做一張40px高度的配景圖片,每20px高一個顏色——上下兩種均高顏色的圖片。配置配景圖片平鋪在列表外層容器上。
哈哈,有點彪。云云列表弱點是行高必需牢靠,否則行高不均等配景圖片就露餡了。甜頭是超不變的賞識器兼容(相對第三種要領(lǐng)),以及很薄弱很薄弱的鐫汰了處事器壓力(相對第二種要領(lǐng))。
so,雖傻也不容小覷 =。=!
第二種要領(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é)果,不光單是改變配景致那么簡樸!
第三種要領(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)。
版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!
轉(zhuǎn)載請注明: 建造DedeCMS模版怎樣實現(xiàn)列表隔行換配景致