CSS实现奇偶数行颜色交替方法

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 图层样式 -> CSS实现奇偶数行颜色交替方法

CSS实现奇偶数行颜色交替方法

作者:admin 发布时间:2010-9-2 7:55:59 发布人: admin

<!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实现奇偶数行颜色交替方法丨myjs.jz123.Cn</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(http://web.archive.org/web/20150530090418im_/http://myjs.jz123.cn/upimg/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>

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

将本文收藏到QQ书签与更多好友分享

上一篇：文章：仿FLASH效果放大缩小容器下一篇：文章：JavaScript放大文字的代码

网页特效

CSS实现奇偶数行颜色交替方法

本类浏览排行 »

本站推荐文章 »