何为 > DIV+CSS > 正文

标准下隔行换色的思考

我们以前在DW中用表格布局着我们的网页的时候常常用到一种设计手法--隔行换色。也就是新闻列表或是列表类的每隔一行就换另一个色彩这样显得很漂亮也很合适阅读。所以这种手法被广大的设计师们收入囊中作为自己的又一把工具刀。但是随着网页标准浪潮的来袭，这种设计效果慢慢变得没有了，原因主要是来自于标准化后的这种效果的实现上。

由于标准后我们都用UL来代替了表格，代码虽然少了很多，但是好像效果也随之少了。隔行换色也遇到了瓶颈。我采用过CLASS方式来进行隔行换色：

我们看到上面的代码所表现出来的是每行的CLASS都不一样，通过这样的方式的确可以解决隔行换色的问题，但是一直来我都被程序员告知这样写法程序没办法写。我一直很郁闷：用表格时他们是怎么写的？

当然抱怨归抱怨，问题总是需要解决的，之后有朋友想过用JS来实现隔行换色，这种设想在网页标准研究联盟中得到了反驳，认为样式的事没必要用行为去实理，并且用JS来实现的效果并不一定有CSS来解决的好。我同意这样的见解，并且我主张的是大背景实现。什么叫大背景实现呢，意思就是说通过在父级设定背景从而使得当前级得到隔行换色或是隔N行换N色。

<div class="list">
<h3><span>领导讲话</span><em><a href="" title="">点击这里</a></em></h3>
<ul>
<li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li>
<li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li>
<li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li>
<li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li>
<li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li>
</ul>
</div>

上图是我前几天刚完成的一个项目中的一个实例应用，大家可以看到我采用的是两行背景重复。而这个背景图是定义在UL上的而不定义在LI上。这样又使得我们少写一点代码，让代码显得更加的干净。同时这样技巧通过举一反三的思考就能做出更多很好玩的样式来，比如我们让每一行都不一样，或是让每一行都像是纸页脚卷起来一样，或是其它的什么花样，那就要看你能想出什么样的花招来了！

41.yyy

直接对UL指定一个class就可以实现隔行换色是最简单的,并且颜色的事情不应该由图片来处理.现在我想要隔行换色,直接<ul class="myul1">,完了.如果要每隔两行换色,只需要<ul class="myul2">.更复杂的,每隔两行,然后是隔一行换色<ul class="myul3">.用css expression应该是目前最接近"标准做法"的,但不是所谓的"标准",有时候"标准"就是一堆委员会的人吃饱了饭凭空想象出来的.
2006-7-21 10:09:13
40.lycey

程序员说不行？用背景也不错，学到了，不过要是背景哪次没被显示呢？不好看了
2006-7-11 12:39:16
39.十字花下

这个帖子不错，用背景好 ^______^
用one two是可以的，那个程序手咋说不行尼？奇偶嘛

2006-6-28 17:16:33
38.三哥

我来顶个贴

使用另外的列表来实现换行
<style>
dl dt{background:#fff}
dl dt{background:#f7f7f7}
</style>
<dl>
<dt><dt>
<dd><dd>
<dt><dt>
<dd><dd>
</dl>
2006-6-23 15:52:44
37.毅

话说回来了，方法很多，用什么方法合适，或是效率高那就用哪种就对了。没有必要局限于某一种方式方法，也没必要分其高下，不同场合不同用途罢了！
2006-6-20 13:30:07
36.maxline

如果要在ASP中实现的话，不是用one{background-color: #eee;}
two{background-color: #fff;};在循环里用两个CLASS就可以了嘛！
但是不知道该如何做循环
2006-6-20 11:33:42
35.jackyshe

可能是我比较懒惰没有说清楚，我是在说灵活性。如果每一行都不同，我当然会使用图片来实现，如果有10行只有一行不同，使用一张大图明显会增加图片文件大小，但是使用两张小图明显好得多，如果只是隔行换颜色，使用图片好像多此一举，我直接使用颜色值不是很好吗，并且能随时修改并预览效果。
2006-6-19 20:23:19
34.毅

jackyshe兄如果这么说也没错，不过原理都是一样的，何必那么费事呢！本来一张图就可以解决的非要用N张图。处理图片的时间也拉长了！
2006-6-16 11:17:41
33.jackyshe

当然了使用背景图片来实现因该说是我在这篇文章里面看了所有评论后觉得最好的一种方法。其缺点是需要在画图软件里面才能看到最终效果，如果需要修改，则需要重新制作图片。如果列表的每一列的外观没有规律可循的时候就需要做一张大图。我觉得可能我的这种方法灵活性会更好些。

<div class="list">
<h3><span>领导讲话</span></h3>
<ul>
<li class="li1">十字为基础假字数</li>
<li class="li2">十字为基础假字数</li>
<li class="li3">十字为基础假字数</li>
<li class="li4">十字为基础假字数</li>
<li class="li5">十字为基础假字数</li>
</ul>
</div>

这样做可以作出你任何想要的效果（当然了使用图片的方式也能作出任何效果）

有人可能会说，你的html文档里面增加了好多的class定义。对，即使这些class不用我也会定义。如果你想当你的网页改版的时候不需要修改HTML我奉劝你把这些class定义都加上。有人又可能会说，你这不是为了样式而把文档弄复杂了吗？，呵呵，各位不要太死板，我们不能太钻牛角尖了，那样你会憋死自己的。因为我增加了这些class并不影响我的文档的结构化，并且在各种智能设备上也能移植，这不就已经足够了吗。
2006-6-15 22:30:54
32.yfmine

在IE中使用expression很容易实现,无需编什么代码:
<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
<ul class="myul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
<li id="li2">555</li>
<li id="li2">666</li>
</ul>
如果要每隔三行换颜色,也简单,把ul的class改了就行:
UL.myul2 LI{background-color: expression(this.sourceIndex%3==0?'#9FB7F6':this.sourceIndex%3==1?'#B6C8F8':'#d7def8');
}

当然,这个是IE only,可是你觉得谁对结构与表现相分离更彻底呢.
PS:不是要打倒IE,而是要打破标准,一切有效的方法都应该加入标准,不管是FF,IE,还是Opera....上次在http://alex.dojotoolkit.org/?p=550看alex骂W3C真过瘾