返回首页

当前位置：首页 >> 网站建设 >> 正文

css怎么实现ul的斑马线效果（一行深色一行浅色）

文章来自:蓝色理想 | 发表时间:2007-9-28 21:11:11

形如：

css怎么实现ul的斑马线效果

Source Code to Run

<head>
<style>
body{
font-size:12px;
line-height:21px;
color:#3E352F;
}
ul{
width:300px;
list-style:none;
}
.one{
background:#CDC194;
}
.two{
background:#DDDABF;
}

</style>
<script>
function set(){
var obj=document.getElementsByTagName("li");
var num=obj.length
for(var i=0;i<num;i++){
if(i%2==0){
obj[i].className="one";
}else{
obj[i].className="two";
}
}
}
</script>
</head>
<body onload="set()">
<center> <ul> 
<li><Font Size=3 Face="楷体_GB2312"><Font Color="#FF0000">乾</Font><Font 
Color="#FF6A00">隆</Font><Font Color="#E3C000">爷</Font><Font 
Color="#55C000">为</Font><Font Color="#00C038">何</Font><Font 
Color="#00C0C6">十</Font><Font Color="#0080FF">几</Font><Font 
Color="#0016FF">次</Font><Font Color="#7100FF">下</Font><Font 
Color="#FF00FF">江</Font><Font Color="#7200FF">南</Font><Font 
Color="#0015FF">，</Font><Font Color="#0080FF">那</Font><Font 
Color="#00C0C7">是</Font><Font Color="#00C039">有</Font><Font 
Color="#55C000">道</Font><Font Color="#E2C000">理</Font><Font 
Color="#FF6B00">的</Font><Font Color="#FF0000">！</Font></Font>
</li> 
<li><Font Size=3 Face="楷体_GB2312"><Font Color="#FF00FF">因</Font><Font 
Color="#7200FF">为</Font><Font Color="#0015FF">乾</Font><Font 
Color="#0080FF">隆</Font><Font Color="#00C0C7">爷</Font><Font 
Color="#00C039">喜</Font><Font Color="#55C000">欢</Font><Font 
Color="#E2C000">苏</Font><Font Color="#FF6B00">杭</Font><Font 
Color="#FF0000">那</Font><Font Color="#FF6A00">边</Font><Font 
Color="#E3C000">那</Font><Font Color="#55C000">种</Font><Font 
Color="#00C038">类</Font><Font Color="#00C0C6">型</Font><Font 
Color="#0080FF">的</Font><Font Color="#0016FF">美</Font><Font 
Color="#7100FF">女</Font><Font Color="#FF00FF">！</Font></Font>
</li> 
<li><Font Size=3 Face="楷体_GB2312"><Font Color="#FF0000">你</Font><Font 
Color="#FF8900">好</Font><Font Color="#92C000">象</Font><Font 
Color="#00C024">对</Font><Font Color="#00C0DA">苏</Font><Font 
Color="#0053FF">州</Font><Font Color="#4800FF">挺</Font><Font 
Color="#FF00FF">熟</Font><Font Color="#4900FF">滴</Font><Font 
Color="#0052FF">挺</Font><Font Color="#00C0DB">有</Font><Font 
Color="#00C025">感</Font><Font Color="#91C000">情</Font><Font 
Color="#FF8A00">滴</Font><Font Color="#FF0000">？</Font></Font>
</li> 
<li><Font Size=3 Face="楷体_GB2312"><Font Color="#FF0000">虽</Font><Font 
Color="#FF6A00">然</Font><Font Color="#E3C000">去</Font><Font 
Color="#55C000">得</Font><Font Color="#00C038">少</Font><Font 
Color="#00C0C6">，</Font><Font Color="#0080FF">但</Font><Font 
Color="#0016FF">是</Font><Font Color="#7100FF">对</Font><Font 
Color="#FF00FF">其</Font><Font Color="#FF00FF">风</Font><Font 
Color="#7200FF">土</Font><Font Color="#0015FF">人</Font><Font 
Color="#0080FF">情</Font><Font Color="#00C0C7">挺</Font><Font 
Color="#00C039">有</Font><Font Color="#55C000">感</Font><Font 
Color="#E2C000">觉</Font><Font Color="#FF6B00">的</Font><Font 
Color="#FF0000">。</Font></Font>
</li> 
<li><Font Size=3 Face="楷体_GB2312"><Font Color="#FF0000">可</Font><Font 
Color="#FF6A00">以</Font><Font Color="#E3C000">试</Font><Font 
Color="#55C000">试</Font><Font Color="#00C038">看</Font><Font 
Color="#00C0C6">用</Font><Font Color="#0080FF">背</Font><Font 
Color="#0016FF">景</Font><Font Color="#7100FF">图</Font><Font 
Color="#FF00FF">片</Font><Font Color="#FF00FF">，</Font><Font 
Color="#7200FF">但</Font><Font Color="#0015FF">要</Font><Font 
Color="#0080FF">控</Font><Font Color="#00C0C7">制</Font><Font 
Color="#00C039">好</Font><Font Color="#55C000">行</Font><Font 
Color="#E2C000">距</Font><Font Color="#FF6B00">.</Font><Font 
Color="#FF0000">。</Font></Font>
</li> 
</ul> 
</body>
</html>

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

Source Code to Run

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

相关文章