隔行变色效果

隔行变色效果在众多网站有应用，在列表条数比较多的情况下特别有效，提高了行与行之间的辨识度。纯CSS实现隔行变色当前存在一定浏览器兼容性问题，使用JavaScript实现更为稳妥。 CSS实现可以参阅CSS表格隔行变色详解一章节。 代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <!DOCTYPE html> < html > < head > < meta  charset = " utf-8" > < title >隔行变色</ title > < style  type = "text/css" > div {    width:400px;    height:300px; } ul{list-style:none;} ul li {    height:25px;    line-height:25px;    font-size:12px; } </ style > < script  type = "text/javascript" >  window.onload=function(){     var mylist=document.getElementById("list").getElementsByTagName("li");     var listlen=mylist.length;     for(var i=0;i< listlen ;i++) {       if(i%2==0) {         mylist[i] .style.backgroundColor = "#639" ;       }     }      }  </script> </ head > < body > < div >    < ul  id = "list" >      < li >大家好，欢迎来到蚂蚁部落</ li >      < li >div+css教程</ li >      < li >希望明天会更好，因为我们奋斗了</ li >      < li >春天是生机勃勃的，一切充满希望。</ li >      < li >时间不会因为我们的懒惰而停止</ li >    </ ul > </ div > </ body > </ html >