html语言对奇偶数行设置颜色,纯CSS实现奇偶数行颜色交替(兼容主流浏览器)

做一张li二倍高的背景图,然后,上半部分PS成奇数行颜色,下半部分PS成偶数行颜色,然后将这张图定义给ul任其平铺.这样一来,纵使有万千行,它也会轻而易举的交替颜色...

本文DEMO背景图(1*50):

CSS部分:

.list {

width:500px;

margin:0 auto;

}

.list ul {

background:url(http://www.bluebirdsky.cn/images/upfiles/row_bg.gif);

}

.list li {

height:25px;

line-height:25px;

text-align:left;

padding-left:10px;

}

Demo演示

/p>

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

xmlns="http://www.w3.org/1999/xhtml">

/>

content="http://www.bluebirdsky.cn/［Bluebirdsky］"

/>

纯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:500px;

margin:0 auto;

}

.list ul {

background:url(http://www.bluebirdsky.cn/images/upfiles/row_bg.gif);

}

.list li {

height:25px;

line-height:25px;

text-align:left;

padding-left:10px;

}

-->

• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络
• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络
• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络
• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络
• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络
• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络
• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络
• 这是奇数行.......www.bluebirdsky.cn
• 这是偶数行.......青鸟网络