css实现兼容火狐、IE的LI奇偶行颜色交替方法
发布时间:2015-09-28 16:06:09 作者:佚名 我要评论
这篇文章主要为大家介绍了css实现兼容火狐、IE的LI奇偶行颜色交替方法,通过css属性控制设置LI各行变色效果,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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>
"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网页设计有所帮助。
相关文章
- CSS3中在rgb颜色的基础上又有了透明度的设置功能成为rgba属性,除此之外下面还会讲到CSS3新增的hsl及hsla颜色的用法,下面就来看一下CSS3中各种颜色属性的使用教程2016-05-17
- 这篇文章主要介绍了CSS实现大小相同、颜色深浅不一的粒子旋转加载动画的相关代码,运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的,感兴趣的小伙伴2016-04-25
- 这篇文章主要介绍了CSS3中currentColor关键字的妙用,合理地使用currentColor往往会让CSS代码更加简洁,同时也能与SVG图标很好地结合使用,需要的朋友可以参考下2016-02-27
- 这篇文章主要介绍了使用CSS3的::selection改变选中文本颜色的方法,也就是说可以将默认的蓝色底色改为其他颜色,really cool,需要的朋友可以参考下2015-09-29
- 这篇文章主要介绍了CSS中对RGB颜色的使用详解,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-04
- 这篇文章主要介绍了CSS3中颜色线性渐变实战,示例中展示了代码设置不同渐变方向的效果,需要的朋友可以参考下2015-07-18
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量2014-08-19- 这是一款很漂亮的CSS3动画进度条,可以用它来显示每一项数据的所占的比例,效果很不错2014-06-17
- 这是一款视觉效果超炫的采用CSS3实现的3D立方体动画,与以往的立方体动画效果不同的是,这款CSS3立方体动画的几个表面的背景颜色都有渐变的动画效果,并且会伴随着立方体的2014-06-17
- 一款相对简易的纯CSS3 3D按钮,可以自己配置背景颜色2014-06-11
最新评论