现代浏览器通过CSS3方式，而ie6采用jquery实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>交替颜色列表的实现</title>
<style type="text/css">
ul
{
margin:0;
padding:0;
list-style-type:none;
}
#ulist
{
font-size:14px;
line-height:1.5em;
border-top:3px solid #119DBB;
width:15em;
margin:0 auto;
}
#ulist li
{
background-color:#C9F1FA;
cursor:pointer;
padding-left:10px;
}
#ulist li:nth-child(odd)
{
background-color:#FFF;
border-top:1px dotted #14ADCD;
border-bottom:1px dotted #14ADCD;
}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ulist li:nth-child(odd)').css('background-color','#fff');
});
</script>
<![endif]-->
</head>
<body>
<ul id="ulist">
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
<li>这是一段测试用的文本</li>
</ul>
</body>
</html>
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付
交替颜色列表实现
2018-08-30 22:45:03
浏览 1745
- 相关标签
- JQuery
随时随地看视频慕课网APP
相关课程
