CSS完成网页页面中的隔行换色编码

日期:2020-12-13 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站


  之前在Dreamweaver选用报表合理布局网页页面的情况下经常用到1种设计方案技巧--隔行换色。也便是新闻目录或是目录类的每隔1行就换另外一个颜色这样显得很好看也很适合阅读文章。因此这类技巧被众多的设计方案师们收入囊中做为自身的又1把专用工具刀。可是伴随着网页页面规范浪潮的来袭,这类设计方案实际效果渐渐地变得沒有了,缘故关键是来自于规范化后的这类实际效果的完成上。
  因为规范后大家都用UL来替代了报表,编码尽管少了许多,可是仿佛实际效果也随之少了。隔行换色也遇到了短板。曾选用过CLASS方法来开展隔行换色:
<ul>
<liclass="one"></li>
<liclass="two"></li>
<liclass="one"></li>
<liclass="two"></li>
</ul>
  大家看到上面的编码所主要表现出来的是每行的CLASS都不1样,根据这样的方法确实能够处理隔行换色的难题,可是都被程序流程员告之这样写法程序流程没法写。
  这类构想在网页页面规范科学研究同盟中获得了辩驳,觉得款式的事没必要用个人行为去完成,而且用JS来完成的实际效果其实不1定有CSS来处理的好。但这类实际效果实践活动后发现,能够用大情况完成。什么是大景完成呢,意思便是说根据在父级设置情况从而使恰当前级获得隔行换色或是隔N行换N色。
  上图是1个案例运用,大伙儿能够看到选用的是两行情况反复。而这个情况图是界定在UL上的而不确定义在LI上。这样又使得大家少写1点编码,让编码显得更为的整洁。另外这样技能根据举1反3的思索就可以做出更多很好玩的款式来,例如大家让每行都不1样,或是让每行都好像纸页脚卷起来1样,或是其它的甚么花式,那就要看你能想出甚么样的花招来了!