NEWS

建站资讯

css布局怎样实现li隔行换色

新闻资讯编辑：【三行广州网站建设www.3gonet.com】 发布时间2014.11.27.浏览数：2986
css布局实现li隔行换色的方法技巧 , 广州网站建设www.3gonet.com三行网络 为您详细介绍 - 请往下阅读》

css布局实现li隔行换色的方法技巧

css布局怎样实现li隔行换色：

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

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

<ul>

<li class=”one”></li>

<li class=”two”></li>

</ul>

通过在父级设定背景从而使得当前级得到隔行换色或是隔N行换N色。

<div class=”list”>

<h3><span>领导讲话</span><em><a href=”" title=”">点击这里</a></em></h3>

<ul>

<li><a href=”" alt=”">广州网站建设www.3gonet.com…</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上。这样又使得我们少写一点代码，让代码显得更加的干净。


本文由广州网站建设公司-三行网络原创，转载请保留版权（ 广州网站建设www.3gonet.com ）三行网络——专注于企业网站建设、响应式营销型网站定制，欢迎来电咨询！热线：020-85628720 【微信：15989229398】

标签： css布局实现li隔行换色的方法技巧

上一篇：南沙做网站_外贸公司网站建设要求    下一篇：怎样创建微信官网,在手机上浏览

css布局实现li隔行换色的方法技巧

微网站Webapp 三行网络专业订制开发微信网站制作,让微信公众账号实现微菜单、微活动、微会员、微商城等功能，打造炫丽的企业微网站！公众平台搭配"微网站"，犹如虎添翼！在保留公众平台所有优势的前提下，提升展示形象，更好的与客户互动。