• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

运行效果截图如下：

在线演示地址如下：

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

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
CSS实现自动变为大写的自适应漂亮菜单效果发布时间：2022-06-21
下一篇：
CSS使用图片美化的漂亮菜单效果发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap