首 页
创意产业
设计资讯
UI设计
平面设计
设计教程
网站建设
站长学院
素材下载
软件下载
当前位置:
首页
>>
网站建设
>> 正文
css怎么实现ul的斑马线效果(一行深色一行浅色)
文章来自:蓝色理想 | 发表时间:2007-9-28 21:11:11
形如:
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
<style> tr{ yexj00:expression(this.style.background=(rowIndex%2==1)?'orange':'yellow')} </style> <table width=456 style="border-collapse:collapse; table-layout:fixed" border rules=cols> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
相关文章
彻底弄懂CSS盒子模式(DIV布局快速入门)[2]
css布局中的居中问题
网站设计之合理架构css
CSS圆角效果,IE6, firefox均显示正常
使用CSS的Border属性 解决你的画线而烦恼
自定义网页超链接下划线的CSS代码
IE6,IE7中如果定义了绝对定位与链接的问题研究
CSS截取固定长度字符(IE,FF,Opera)
CSS实现网页中圆角矩形代码
CSS的十八般技巧
网页设计中实时切换 CSS 样式的探讨
用CSS样式如何制作圆角的详细教程
如何使用CSS来进行网页排版[6]
用CSS制作隐藏菜单
用CSS控制输入框input悬停交互样式
CSS模块化设计—从空格谈起