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

JS+CSS实现隔行换色

浏览:5242次  出处信息

以下是引用片段：

<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个活力和动感的网页设计－颜色的灵感    (阅读：33153)
  2. 分享一个JQUERY颜色选择插件    (阅读：12830)
  3. colortail，让 tail 命令绚丽起来    (阅读：8915)
  4. 色轮，用科学解释艺术    (阅读：9074)
  5. jQuery Color Animations颜色动画插件    (阅读：7227)
  6. 颜色的代码表达式    (阅读：6671)
  7. 终端二则    (阅读：6026)
  8. IE 颜色 Hack全收集    (阅读：4157)
  9. 色板 -- 颜色收集    (阅读：2599)
  10. 十六进制HTML颜色    (阅读：2513)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：javascript 验证例子,让你精通js
后一篇：scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 >>
文章信息
© 2009 - 2025 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1