技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> JS+CSS实现隔行换色

JS+CSS实现隔行换色

浏览:5161次  出处信息

以下是引用片段:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接背景色隔行显示</title>
</head>
<style>
.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;}
.mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}
.mytable ul li.t1 {background-color:#EFFEDD;}/* 第一行的背景色 */
.mytable ul li.t2{background-color:#ffffff;}/* 第二行的背景色 */
.mytable ul li.t3 {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new.gif) #D2FCA0 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}/* 鼠标经过时的背景色 */
</style>
<body>
<div id=tab>
<ul>
<li><a href="#">这个是第1行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第2行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第3行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第4行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第5行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第6行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第7行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第8行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第9行的文字,大家看清楚了</a></li>
</ul></div><script type="text/javascript">

</script>
</body>
</html>

建议继续学习:

  1. 50个活力和动感的网页设计-颜色的灵感    (阅读:32884)
  2. 分享一个JQUERY颜色选择插件    (阅读:12632)
  3. colortail,让 tail 命令绚丽起来    (阅读:8755)
  4. 色轮,用科学解释艺术    (阅读:8781)
  5. jQuery Color Animations颜色动画插件    (阅读:7070)
  6. 颜色的代码表达式    (阅读:6494)
  7. 终端二则    (阅读:5758)
  8. IE 颜色 Hack全收集    (阅读:4018)
  9. 色板 -- 颜色收集    (阅读:2532)
  10. 十六进制HTML颜色    (阅读:2456)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1