网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.input的Css样式.
.解决用CSS控制DIV居中失效的问题.
.CSS清除浮动的三个方法.
.网页(WEB)字体,CSS如何控制?.
.DIV+CSS建立标准WEB网页的好处.
.CSS让你的IE浏览器崩溃.
.CSS opacity-实现图片半透明效果.
.CSS初学者应该保持的一种心态.
.体验css+div 之 给整个页面添加渐.
.CSS强制TD不换行.
.完全用CSS实现的中英文双语导航菜.
.跨浏览器的 inline-block 实现[C.
.CSS+DIV设计实例:不同色链接和其.
.CSS布局:让页脚始终保持底部的方.
.CSS网页中的相对定位与绝对定位.
.锦囊妙计 CSS实现样式布局22招.
.CSS公用属性.
.针对各种版本的浏览器隐藏CSS的九.
.内联CSS的background-image属性图.
.两句CSS完美截断侧栏最新评论列表.

CSS隔行换色

发表日期:2008-8-8


行换色的问题,其实很简单,解决办法无非一下几种:

1:背景图,如果行高固定的话,推荐使用背景图,也推荐将行高固定!兼容一切浏览器。

2:expression
文字:color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景:background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
注:本方法浏览器兼容度不够,不支持ff3。

3:class分别定义:
<ul>
<li class="bgcolor">...
<li>...
<li class="bgcolor">...
<li>...
</ul>
实实在在的写法。

4:通过JS,看实例:

<!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=utf-8" />
<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function bgChange(){
  if(!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for(var i=0; i<tables.length; i++){
    var odd = false;
    trs = tables[i].getElementsByTagName("tr");
    for(var j=0; j<trs.length; j++){
      if(odd==true){
        trs[j].style.background = "#ccc";
        odd = false;
      }else{
        odd = true;
      }
    }
  }
}
window.onload = bgChange;
</script>
</head>
<body   >
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
  <tr>
    <td>测试文字</td>
    <td>测试文字</td>
    <td>测试文字</td>
  </tr>
</table>
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 184 ms, 9 Queries.</span>";
//]]>
</script></body>
</html>

上一篇:CSS扩展滤镜属性及语法 人气:900
下一篇:CSS浏览器兼容方案-hack与一个完全css做的滑动菜单 人气:1293
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐