css、js实现列表隔行不同背景颜色的方法
<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>
Comments
No Comments
Leave a Reply