山海科技发展网

08月13日科技常识:css实现兼容火狐、IE的LI奇偶行颜色交替方法

导读 摘要 今天小编跟大家讲解下有关css实现兼容火狐、IE的LI奇偶行颜色交替方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有...
摘要 今天小编跟大家讲解下有关css实现兼容火狐、IE的LI奇偶行颜色交替方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实

今天小编跟大家讲解下有关css实现兼容火狐、IE的LI奇偶行颜色交替方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实现兼容火狐、IE的LI奇偶行颜色交替方法 的相关资料,希望小伙伴们看了有所帮助。

本文实例讲述了css实现兼容火狐、IE的LI奇偶行颜色交替方法。分享给大家供大家参考。具体如下:

这是一款兼容火狐、IE的LI颜色交替的方法,实则是平铺的背景,不过相对使用JS,平铺背景也不失为一种好方法,因为处理一个GIF图像也不是什么难办的事,最其码比使用JS的要兼容性好许多,你可以在不同的浏览器下试一下。

运行效果截图如下:

在线演示地址如下:

http://demo.aidi.net.cn/js/2015/css-firefox-ie-line-color-demo/

具体代码如下:

复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS实现奇偶数行颜色交替方法</title><style type="text/css"><-- * { margin:0; padding:0;}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;}--></style></head><body><div class="list"> <ul> <li>奇数行.......</li> <li>偶数行.......</li> <li>奇数行.......</li> <li>偶数行.......</li> <li>奇数行.......</li> </ul></div></body></html>

希望本文所述对大家的css网页设计有所帮助。

来源:爱蒂网