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

灵玉翡翠a

灵玉翡翠a

2016-02-19 23:09

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享CSS实现网页中的隔行换色代码教程,希望对大家能有一点小小的帮助。

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

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

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

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

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

  这种设想在网页标准研究联盟中得到了反驳,认为样式的事没必要用行为去实现,并且用JS来实现的效果并不一定有CSS来解决的好。但这种效果实践后发现,可以用大背景实现。什么叫大景实现呢,意思就是说通过在父级设定背景从而使得当前级得到隔行换色或是隔N行换N色。

(本文来源于图老师网站,更多请访问https://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刺客新符文搭配推荐

Win10预览版10122已知问题汇总

Win10预览版10122已知问题汇总

Win7系统下无法打开TTF文件提示创建关联的解决方法

Win7系统下无法打开TTF文件提示创建关联的解决方法
下拉加载更多内容 ↓