WonderCSS

制作DedeCMS模版如何实现列表隔行换背景色

在做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中失效,所以你需要对你面对的用户有所判断来具体考虑用哪种方法。

By 于湛 发布于 2013.04.10 17,352 次浏览

制作DedeCMS模版如何实现列表隔行换背景色》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注