标准下隔行换色的思考

标准

我们以前在DW中用表格布局着我们的网页的时候常常用到一种设计手法--隔行换色。也就是新闻列表或是列表类的每隔一行就换另一个色彩这样显得很漂亮也很合适阅读。所以这种手法被广大的设计师们收入囊中作为自己的又一把工具刀。但是随着网页标准浪潮的来袭,这种设计效果慢慢变得没有了,原因主要是来自于标准化后的这种效果的实现上。

由于标准后我们都用UL来代替了表格,代码虽然少了很多,但是好像效果也随之少了。隔行换色也遇到了瓶颈。我采用过CLASS方式来进行隔行换色:

<ul>
  <li class="one"></li>
  <li class="two"></li>
  <li class="one"></li> 
  <li class="two"></li>
</ul>

我们看到上面的代码所表现出来的是每行的CLASS都不一样,通过这样的方式的确可以解决隔行换色的问题,但是一直来我都被程序员告知这样写法程序没办法写。我一直很郁闷:用表格时他们是怎么写的?

当然抱怨归抱怨,问题总是需要解决的,之后有朋友想过用JS来实现隔行换色,这种设想在网页标准研究联盟中得到了反驳,认为样式的事没必要用行为去实理,并且用JS来实现的效果并不一定有CSS来解决的好。我同意这样的见解,并且我主张的是大背景实现。什么叫大背景实现呢,意思就是说通过在父级设定背景从而使得当前级得到隔行换色或是隔N行换N色。

<div class="list"> 
 <h3><span>领导讲话</span><em><a href="" title="">点击这里</a></em></h3> 
 <ul> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li>
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
  <li><a href="" alt="">假字以数十字为基础假字数…</a><em>(2006-12-18)</em></li> 
 </ul> 
</div>

上图是我前几天刚完成的一个项目中的一个实例应用,大家可以看到我采用的是两行背景重复。而这个背景图是定义在UL上的而不定义在LI上。这样又使得我们少写一点代码,让代码显得更加的干净。同时这样技巧通过举一反三的思考就能做出更多很好玩的样式来,比如我们让每一行都不一样,或是让每一行都像是纸页脚卷起来一样,或是其它的什么花样,那就要看你能想出什么样的花招来了!

时间: 2024-09-17 15:20:50

标准下隔行换色的思考的相关文章

ASP+CSS 实现列表隔行换色_CSS/HTML

列表隔行换色是指在新闻和文章列表中,前一行和后一行的背景色交替显示,也可称为斑马线,给网页可增色不少.今看到小毅在BI的贴子"标准下隔行换色的思考",采用UL的两行背景重复,虽说方法不错,但LI里的高度只能采用背景中的实际高度,不够灵活,所以用ASP+CSS 写了一个,采用自定义列表. <% set rs=...... sql="......" rs.open sql,con,1,1 %> <dl> <% i=0 do while no

用Excel条件格式和函数实现隔行换色

在浏览比较长的Excel表格中的数据时,很有可能出现看错行的情况,如果能隔行填充一种颜色,就可以避免这种现象.利用Excel的条件格式和函数就可以轻松地实现隔行换色这个效果.方法如下 打开Excel文件,选中需要查看的区域,执行"格式→条件格式"命令,在弹出的"条件格式"对话框中单击"条件1(1)"方框下边的下拉按钮,在弹出的下拉列表中选择"公式"选项,并在右侧的方框中输入公式"=MOD(ROW(),2)=0&quo

2种方法实现CSS LI隔行换色

  CSS隔行变色使用率挺高的,今天抽空写了这篇简短的教程,教给CSS不顺手的初级学者两种方法实现CSS的隔行换色功能.大家知道,隔行换色的对象一般是TABle或Li,Table就不说了,个人觉得已经过时了,主要来说下CSS Li的隔行换色,直接放代码吧. 第一种方法: 这种方法看上去是纯CSS,不过这里使用了expression,等同于半个JavaScript,这种方法简单,不过CSS的expression貌似存在一些兼容性问题,所以这个功能仅用于看重IE的用户. 第二种方法:CSS和JS结合

Excel实现隔行换色的2种方法图文介绍

Excel 2010功能强大,实现隔行换色远比 以前Excel 2003版本简单多了,下面介绍两种隔行换色的方法: 1.使用套用表格格式功能 Excel 2010有一个"套用表格格式"的功能可以实现隔行换色的功能,操作十分方便.只需要选中需要改变格式的区域,选择"开始 -> 套用表格格式"中的样式,即可实现.如图所示. 2. 使用条件格式和函数的功能这个方法无论在Excel 2003或者更高版本的Excel 2010中都可以完美实现,首先选择要改变样式的区域.

jquery隔行换色效果实现方法

 这篇文章主要介绍了jquery隔行换色效果实现方法,涉及even及odd选择器的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery隔行换色效果实现方法.分享给大家供大家参考.具体分析如下: 使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样.来吧,看看代码到底有多么的简单 代码如下: <html> <head> <meta http-equiv="content-type" content="te

使用简洁的jQuery方法实现隔行换色功能

 本篇文章主要介绍了使用简洁的jQuery方法实现隔行换色功能.需要的朋友可以过来参考下,希望对大家有所帮助 今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:   代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">  <title>隔行换色</title>     <script src="js/jquery-

JS+CSS实现Li列表隔行换色效果的方法

 这篇文章主要介绍了JS+CSS实现Li列表隔行换色效果的方法,实例分析了js操作li节点的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

【java Itext Pdf】itext pdf隔行换色 itext5添加表格背景颜色

Itext5 pdf 行变色效果图: 新需求,隔行换色,itext in action 是个很好的说明书,照着英文读下来,很简单的进行了实现,思路如下:   1.先创建PdfPTable对象,生成PDF表格cell之后,添加隔行换色的事件,将此事件在PdfPTable加入Document对象之前,插入进去 2.隔行换色的事件需要自己写一个java类,里面去定义背景颜色和长宽高,实质就是在pdf表格生成之后,去读取当页page内的所有行和列,并创建一个矩形,加入背景,覆盖到cell内,达到背景有颜

jquery实现表格隔行换色效果_jquery

本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html:TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"