CSS:标准下的隔行换色方法

djq1973双鱼

djq1973双鱼

2016-02-19 17:26

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享CSS:标准下的隔行换色方法的教程,热爱PS的朋友们快点看过来吧!

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

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

以下是引用片段:
ul
  li class="one"/li
  li class="two"/li
  li class="one"/li 
  li class="two"/li
/ul

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

CSS:标准下的隔行换色方法

Web开发
CSS:标准下的隔行换色方法

CSS隔行换色

Web开发
CSS隔行换色

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS网页隔行换色技巧

Web开发
CSS网页隔行换色技巧

CSS实现网页中的隔行换色代码

Web开发
CSS实现网页中的隔行换色代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS网页代码编写技巧:隔行换色的实现

Web开发
CSS网页代码编写技巧:隔行换色的实现

网页设计制作CSS实现隔行换色两种方法

Web开发
网页设计制作CSS实现隔行换色两种方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

使用CSS给图片添加阴影之入门篇

使用CSS给图片添加阴影之入门篇

CSS中的行为——HTC

CSS中的行为——HTC
下拉加载更多内容 ↓