CSS网页隔行换色技巧

2016-02-19 23:38 4 1 收藏

人生本是一个不断学习的过程，在这个过程中，图老师就是你们的好帮手，下面分享的CSS网页隔行换色技巧懂设计的网友们快点来了解吧！

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）　　CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：

一、background背景图片
　　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。

二、CSS Expression
　　文字：color:expression(this.sourceIndex%2 ？ '#ff0000':'#000000');
　　背景：background-color:expression(this.sourceIndex%2 ？ '#ff0000':'#000000');
　　注意：本方法浏览器兼容度不够，不支持FF3。

三、class分别定义

ul
li class="bgcolor"...
li...
li class="bgcolor"...
li...
/ul
实实在在的写法。

四、通过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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlewww.webjx.com - 四种实现CSS隔行换色的方法/titlelink 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; itables.length; i++){var odd = false;trs = tables[i].getElementsByTagName("tr");for(var j=0; jtrs.length; j++){if(odd==true){trs[j].style.background = "#ccc";odd = false;}else{odd = true;}}}}window.onload = bgChange;/script/headbody table width="600" border="0" align="center" cellpadding="0" cellspacing="0"trtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/tr/tablescript 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
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

来源:https://www.tulaoshi.com/n/20160219/1630291.html

上一篇：简颜最新创作的QQ分组_左脚不停行走右脚不停摔跤
下一篇：小编推荐的精品QQ分组想你的日子似孤单似忧伤

看过《CSS网页隔行换色技巧》的人还看了以下文章更多>>

CSS高级技巧:网页布局

标签： Web开发

上一篇 CSS教程文章：CSS高级技巧:文字环绕图片布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局...

CSS技巧:网页文字渐变效果

标签： Web开发

本文介绍的技术很经典，也算是一篇老文章了，相信很多人也都看过，之前神飞有注意到国内有些翻译，但是不全面，这里我就将其完整的翻译了一下。你想制作漂亮的标题而不用将每个标题都做成图片吗？这里是一个简单的CSS技巧，它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一...

网页技巧之怎样编写CSS

标签： Html CSS布局 Div+CSS XHTML

一种是把CSS文档放到＜head＞文档中：＜style type=“text/css”＞ …… ＜/style＞其中＜style＞中的“type=‘text/css’”的意思是＜style＞中的代码是定义样式表单的。另一种方法是把CSS样式表写在HTML的行内，比如下面的代码：＜p style=“font-size：14pt；color...

jQuery 隔行换色支持键盘上下键按Enter选定值

标签： Web开发

代码如下: !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" / style !-- /* css for data grid*/ .datagrid { width: 100%; back...

CSS网页制作技巧:节约网页代码编写时间

标签： Web开发

CSS已经成为网页前端设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。 1.简单的纯CSS Tooltip 通过这些代码，你可以做出简单的Tooltip。这是CSS代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 a:hover { background:...

查看更多精彩>>