CSS或js实现行间交替背景色效果 | Heluyao's Blog

博客 - html/css/xml/xsl, JS/Ajax/AS

CSS或js实现行间交替背景色效果

　　本文介绍两种方法，都挺简单的，略懂前端的同志们都应该能理解的。

1.利用CSS控制行的属性：

下载: code.html

<style type="text/css">
ul { list-style:none; font-size:12px; line-height:20px; color:#666;}
ul li{background-color: expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');}
</style>
<ul class="myul1">
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
</ul>

　　通过判断奇偶数来确定li的背景颜色，很简单吧！

2.利用JS控制各行的交替背景。

下载: code2.html

<style type="text/css">
ul { list-style:none; color:#666; font-size:12px;}
.li01 { background:#EAF8FD; }
.li02 { background:#fff; }
</style>
<ul id="list01">
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
</ul>
<Script type="text/javascript">
objName=document.getElementById("list01").getElementsByTagName("li");
for (i=0;i<objName.length;i++){
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</Script>

　　两个方法都不错哦！值得推荐的！

相关文章

标签：

这篇文章发表于2008年09月24日，下午，3:48，归类于html/css/xml/xsl, JS/Ajax/AS。您可以通过订阅RSS 2.0跟踪对这篇文章的评论，也可以发表您的评论，或者从您的站点trackback。

写下您的看法