您现在的位置:首页 --> JavaScript --> JS+CSS实现隔行换色
JS+CSS实现隔行换色
浏览:5235次 出处信息
以下是引用片段: <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> |
建议继续学习:
- 50个活力和动感的网页设计-颜色的灵感 (阅读:33150)
- 分享一个JQUERY颜色选择插件 (阅读:12820)
- colortail,让 tail 命令绚丽起来 (阅读:8911)
- 色轮,用科学解释艺术 (阅读:9072)
- jQuery Color Animations颜色动画插件 (阅读:7226)
- 颜色的代码表达式 (阅读:6668)
- 终端二则 (阅读:6024)
- IE 颜色 Hack全收集 (阅读:4156)
- 色板 -- 颜色收集 (阅读:2596)
- 十六进制HTML颜色 (阅读:2512)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
文章信息
- 作者:标点符 来源: 标点符
- 标签: 隔行 颜色
- 发布时间:2009-12-13 20:20:43
建议继续学习
近3天十大热文
-
[77] memory prefetch浅析
-
[51] find命令的一点注意事项
-
[37] 基本排序算法的PHP实现
-
[33] 卡诺模型―设计品质与设计价值的思考
-
[32] Oracle bbed工具的编译
-
[26] 程序员技术练级攻略
-
[26] 8大实用又重要Mac使用技巧
-
[25] 两行 JavaScript 代码
-
[24] 读书笔记-壹百度:百度十年千倍的29条法则
-
[21] 小屏幕移动设备网页设计注意事项