您的位置：首页 > Web前端 > CSS

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

2015-09-28 16:06 751 查看

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/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网页设计有所帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航