您的位置：网站首页 > 网络营销 > 网站制作 > css实现兼容火狐、IE的LI奇偶行颜色交替方法
css实现兼容火狐、IE的LI奇偶行颜色交替方法
来源： 日期：2015-11-01 22:12:26 人气：标签： 
本文实例讲述了css实现兼容火狐、ie的li奇偶行颜色交替方法。分享给大家供大家参考。具体如下：
这是一款兼容火狐、ie的li颜色交替的方法，实则是平铺的背景，不过相对使用js，平铺背景也不失为一种好方法，因为处理一个gif图像也不是什么难办的事，最其码比使用js的要兼容性好许多，你可以在不同的浏览器下试一下。
运行效果截图如下：
具体代码如下：
<!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网页设计有所帮助。
相关文章
- 上一篇： CSS实现自动变为大写的自适应漂亮菜单效果
- 下一篇： CSS使用图片美化的漂亮菜单效果
0731-85579057 ，
