| 以下是引用片段： <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> |
首页
/ JavaScript
JS+CSS实现隔行换色
建议继续学习
- 50个活力和动感的网页设计－颜色的灵感 （阅读 34,303）
- 分享一个JQUERY颜色选择插件 （阅读 14,063）
- 色轮，用科学解释艺术 （阅读 10,243）
- colortail，让 tail 命令绚丽起来 （阅读 10,104）
- jQuery Color Animations颜色动画插件 （阅读 8,345）
- 颜色的代码表达式 （阅读 7,545）
- 终端二则 （阅读 7,004）
- IE 颜色 Hack全收集 （阅读 5,065）
- APP图标的色彩 （阅读 3,926）
- 十六进制HTML颜色 （阅读 3,403）