永亮SEO » 不同 http://www.ankr.cn 学习和研究SEO技术，SEO优化及网络营销，电子商务，网站推广运营 Tue, 03 Jan 2012 21:08:38 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 css、js实现列表隔行不同背景颜色的方法 http://www.ankr.cn/426.html http://www.ankr.cn/426.html#comments Mon, 22 Feb 2010 05:31:38 +0000 winliong http://www.ankr.cn/?p=426 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不用js实现带序号的表格隔行换色的效果</title>
<style>
.test{ border:1px solid #000; color:#333; font:12px; width:250px; }
.test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? ‘#e4e4e4′:’#FFF’); }
</style>
</head>
<body>

<div class="test">
<ol>
<li>鼠标特效</li>
<li>页面特效</li>
<li>背景特效</li>
<li>导航菜单</li>
<li>状态栏类</li>
<li>文本特效</li>
<li>链接特效</li>
<li>图形特效</li>
<li>窗口特效</li>
</ol>
</div>
</body>
</html>

 

<title>JS配合CSS的li标签实现隔行变色效果</title>
<script type="text/javascript">
function bgChange(){
 var lis= document.getElementsByTagName(‘li’);
 for(var i=0; i<lis.length; i+=2)
 lis[i].style.background = ‘#f3f3f3′;
}
window.onload = bgChange;
</script>
<ul>
<li>隔行变色的I</li>
<li>隔行变色的LI</li>
<li>隔行变色的LI</li>
<li>隔行变色的LI</li>
<li>隔行变色的LI</li>
</ul>

 

]]> http://www.ankr.cn/426.html/feed 0