css实现兼容火狐、IE的LI奇偶行颜色交替方法
模板素材 2025-06-07 14:43www.dzhlxh.cn模板素材
介绍了一种使用CSS实现兼容火狐和IE浏览器的LI元素奇偶行颜色交替的方法。相比于使用JavaScript,这种方法采用平铺背景,更为简单易行,且兼容性好。
此方法主要依赖于CSS样式表的设置。通过为ul元素设置背景图像,可以实现对li元素背景颜色的控制。通过设置不同行的背景位置,可以实现奇偶行颜色的交替。这种方法不需要使用JavaScript或其他复杂的技巧,只需简单的CSS样式设置即可实现。
以下是具体的实现代码:
/ 设置基本样式 /
body { background:FFF; font: 12px Geneva, Arial, Helvetica, sans-serif 000; line-height:1; text-align:center; }
a:link, a:visited { text-decoration:none; color:000; }
a:hover { text-decoration:underline; color:39c; }
img { border:0; }
select { border:0; }
ul, li { list-style:none; }
h1 { font-size:14px; font-weight:bold; color:444; }
.list { width:320px; margin:0 auto; }
/ 设置背景图像并实现颜色交替 /
.list ul { background:url(images/row_bg.gif); } / 替换为你的背景图像路径 /
.list li { height:25px; line-height:25px; text-align:left; padding-left:10px; }
- 奇数行内容...
- 偶数行内容...
- 奇数行内容...
- 偶数行内容...
- 奇数行内容...