css实现兼容火狐、IE的LI奇偶行颜色交替方法

 本文实例讲述了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网页设计有所帮助。