脚本宝典收集整理的这篇文章主要介绍了css实现兼容火狐、IE的LI奇偶行颜色交替方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例讲述了css实现兼容火狐、IE的LI奇偶行颜色交替方法。分享给大家供大家参考。具体如下:
这是一款兼容火狐、IE的LI颜色交替的方法,实则是平铺的背景,不过相对使用JS,平铺背景也不失为一种好方法,因为处理一个GIF图像也不是什么难办的事,最其码比使用JS的要兼容性好许多,你可以在不同的浏览器下试一下。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/css-firefox-ie-line-color-demo/
具体代码如下:
<!DOCTY
PE ht
ML P
ubLIC "-//W3C//DTD XHTML 1.0 Trans
ITional//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">
<-- * {
m
argin:0;
padding:0;
}
body {
background:
#FFF;
font:12px Geneva, Arial, Helvetica, sans
-serif #000;
line-h
eight: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;
mar
gin: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网页设计有所帮助。
脚本宝典总结
以上是脚本宝典为你收集整理的css实现兼容火狐、IE的LI奇偶行颜色交替方法全部内容,希望文章能够帮你解决css实现兼容火狐、IE的LI奇偶行颜色交替方法所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。