| 以下是引用片段： <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> |
JS+CSS实现隔行换色
本机暂存
同分类推荐文章
- translateZ() （2026-06-25 21:18:56）
- translateY() （2026-06-25 21:17:56）
- translateX() （2026-06-25 21:16:01）
建议继续学习
- JQuery实现Excel表格呈现 （累计阅读 48,350）
- 50个活力和动感的网页设计－颜色的灵感 （累计阅读 34,442）
- 深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,405）
- 从输入 URL 到页面加载完成的过程中都发生了什么事情？ （累计阅读 15,934）
- 图片动态局部毛玻璃模糊效果的实现 （累计阅读 14,849）
- 天朝第二代身份证号码的验证机制 （累计阅读 14,764）
- HTML 5 的data-* 自定义属性 （累计阅读 14,349）
- 分享一个JQUERY颜色选择插件 （累计阅读 14,224）
- 什么是全栈工程师？ （累计阅读 14,039）
- 视觉设计前瞻实用性研究（PNVD） 第二期 （累计阅读 12,977）