交替颜色列表实现

最新推荐文章于 2023-05-30 10:09:33 发布

weixin_33895475

最新推荐文章于 2023-05-30 10:09:33 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

文章标签： c/c++ xhtml javascript ViewUI

原文链接：https://yq.aliyun.com/articles/425500

现代浏览器通过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>

</head>

<body>
  <ul id="ulist">
    <li>这是一段测试用的文本</li>
    <li>这是一段测试用的文本</li>
    <li>这是一段测试用的文本</li>
    <li>这是一段测试用的文本</li>
    <li>这是一段测试用的文本</li>
    <li>这是一段测试用的文本</li>
  </ul>
</body>
</html>

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/143597，如需转载请自行联系原作者