精选国内外互联网行业最新文章及报告,让网友获得最新的海内外互联网动态
当前位置:主页 > 网页制作 > HTML/Xhtml >

CSS,JavaScript和MooTools制作斑马纹表格

2016-03-26 19:26 来源:未知 编辑:admin

简单的斑马纹表格,如果页面上有大量的表格数据时,隔行变色的斑马纹会帮助我们快速阅读,有利于用户体验。我们今天不讨论在动态语言中的方法,只讨论CSS,JavaScript,MooTools 是如何实现的,并有三种可行性方案。

我们的表格

The Html Code:

 

 

我们上面所看到的表格,就是我们要美化的表格,要实现斑马纹的表格。

斑马纹的表格

方案一 :

在CSS3中有许多的伪类选择器,其中的

 

 

它可以匹配父元素中的第n个子元素E。

The CSS3 Code

 

 

方案二 :

The JavaScript Code

 

 

在以前MooTools1.1的老版本中是不支持CSS3选择器的,那又如何实现那。

方案三 :

The CSS Code:

 

 

The MooTools JavaScript:

 

 

如果你已经使用了MooTools1.2+的版本,我们就可以用MooTools Selectors的伪类选择器,它的语法是类似于CSS3的伪类选择器的。

The MooTools JavaScript:

 

 

在鼠标经过时高亮表格行列

The CSS Code:

 

 

The MooTools JavaScript:

 

标签
你喜欢的文章
返回首页
扫描微信
返回顶部