Html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<ul>
<li>
<span class="type">[旅游]</span>
<span>携程旅游 途牛旅游网 去哪儿旅游 同程旅游 </span>
<span class="other">更多>></span>
</li>
<li>
<span class="type">[小游戏]</span>
<span>4399 小游戏 6949 小游戏 3155 小游戏 3199 小游
戏 </span>
<span class="other">更多>></span>
</li>
<li>
<span class="type">[影视]</span>
<span>爱奇艺高清 土豆 优酷 CCTV 搜狐影视 </span>
<span class="other">更多>></span>
</li>
<li>
<span class="type">[小说]</span>
<span>起点女生网 杂志铺 都市小说</span>
<span class="other">更多>></span>
</li>
<li>
<span class="type">[音乐]</span>
<span>QQ 音乐 搜狗音乐 百度 MP3 快乐男声</span>
<span class="other">更多>></span>
</li>
<li>
<span class="type">[交友]</span>
<span>同城交友网 珍爱网 非诚勿扰</span>
<span class="other">更多>></span>
</li>
</ul>
</div>
</body>
</html>
Css部分
* {
margin: 0;
padding: 0;
}
div {
width: 650px;
margin: 20px auto;
}
ul li {
height: 30px;
list-style: none;
line-height: 30px;
}
.type {
width: 140px;
float: left;
}
.other {
float: right;
}
Jquery部分
$(function() {
$("li:odd").css("background", "#F0FFFF"); //偶数
$("li:even").css("background", "#FFDEAD"); //奇数
})
