欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS实例 >

ul li css隔行换色 css li列表布局隔行背景颜色不同布局实例

html中ul li列表间色差布局,ul li css隔行换色 css li列表布局隔行背景颜色不同布局DIVCSS5实例

ul li布局li背景隔行换色,隔行变色不同颜色效果
ul li布局li背景隔行换色,隔行变色不同颜色效果截图

为了不影响程序做调用,让程序简便,使用ul li列表布局实现以上间隔背景色布局,同时鼠标滑过悬停li上方背景变色换色,通常有两种方法。

第一种:背景图片,切一窄的竖条背景图片素材,将背景图片作为ul背景,让背景图片作为ul背景后上下左右平铺,即可轻松实现间隔效果。

第二种:使用JQ特效实现,通过JS特效实现这样间隔背景色同时鼠标经过背景换色效果,特效代码多并需要引人JS文件和代码。

接下来DIVCSS5通过图文+在线演示实例介绍这两种方法。

一、背景图片素材实现li列表背景间隔色   -   TOP

DIV+CSS案例比较推荐方法,简单方便,节约代码,同时可以实现鼠标移到li上方背景换色效果。

操作方法如下:

1、切出1像素宽、高度刚好两色的li高度的为图片素材

切出图片素材
切出图片素材截图

点击我另存为图片素材(鼠标右键点击另存为)

2、引人DIVCSS5初始化模板
进入下载divcss5初始化模板
并将图片素材拷贝入divcss5初始化模板images文件夹内。

3、HTML对应源代码

  1. <ul class="licss"> 
  2. <li><a href="http://www.divcss5.com/">DIVCSS5欢迎您访问</a></li> 
  3. <li><a href="http://www.divcss5.com/">DIVCSS5欢迎您访问</a></li> 
  4. <li><a href="http://www.divcss5.com/">DIVCSS5欢迎您访问</a></li> 
  5. <li><a href="http://www.divcss5.com/">DIVCSS5欢迎您访问</a></li> 
  6. <li><a href="http://www.divcss5.com/">DIVCSS5欢迎您访问</a></li> 
  7. </ul> 

以上是ul li布局内容,关键看后面CSS代码写法与解释。

4、对应CSS代码

  1. ul.licss{ margin:0 auto; background:url(ul-bg.gif); width:400px; text-align:left} 
  2. /* 背景只引人图片 不用设置其它参数即可对象内全屏平铺 */ 
  3. ul.licss li{ width:100%; text-indent:10px; height:34px; line-height:34px} 
  4. /* 高度需要计算好,与布局图片一定关系 */ 
  5. ul.licss li:hover{ background:#EBEBEB} 
  6. /* 为了有动感背景变色换色,对li设置hover伪类 */ 

这里单独对ul设置一个class。解释:在实际布局中会多处使用ul li布局,为了便于区别其它地方使用ul所以单独对此处实例命名class。

CSS扩展:如果要实现鼠标移到li上变色,可以再设置CSS ul.licss li:hover{设置背景颜色}。
ie6 hover支持:http://www.divcss5.com/css-hack/c528.shtml

5、效果截图

隔行不同背景颜色效果图
li列表布局隔行不同背景颜色效果截图

6、背景图片实现li间隔换色在线演示:查看案例

7、背景实现li间隔色打包下载:

8、灵活使用:根据DIVCSS5实例大家可以将ul li布局技巧扩展到非li布局的布局中实现列表类布局背景间隔颜色。

二、使用jq+CSS+DIV布局实现li布局间隔换色   -   TOP

jq+CSS+DIV布局实现li布局间隔换色同时鼠标滑过li上方时背景换色,特点JS实现,不需要图片素材。

其实在table隔行变色一篇CSS实例文章已经实际过此布局,只不过是对table tr td设置间隔颜色不同并实现鼠标滑过td背景换色变色效果

ul li使用jq布局就不再实例,如果DIVCSS5的VIP同学看jq+table实现间隔变色任然不会或有疑问的可以(QQ:511106581)联系进行100%解答服务(100%详细解答服务只提供DIVCSS5 VIP学员)。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s699.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2014-06-09 12:12 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。