css li列表布局隔行背景色彩不同布局实例

2019-09-09 郑州网站建设  

为了避免影响步骤做调用,让法度模范精练,应用ul li列表构造实现以上距离背风物布局,同时鼠标滑过悬停li上方后盾变色换色,通常有两种门径。

第一种:后盾图片,切一窄的竖条靠山图片素材,将背景图片作为ul后台,让配景图片作为ul后台后高下支配平铺,即可轻松完成间隔成效。

第二种:应用JQ殊效完成,通过JS特效实现多么间隔后盾色同时鼠标经由过程后盾换色造诣,殊效代码多并须要引人JS文件与代码。

此后CSS5通过图文+在线演示实例介绍这两种方式。

一、背景图片素材完成li列表后台隔绝距离色

此DIV+CSS案例对比引荐门径,简两边便,节约代码,同时梗概完成鼠标移到li上方后台换色效果。

独霸门径以下:

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

切出图片素材


切出图片素材截图

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

2、引人CSS5初始化源码
进入downloadCSS5初始化源码
并将图片素材拷贝入CSS5初始化源码images文件夹内。

3、HTML对应源代码

<ul class="licss"> 

<li><a href="//www.css5.com.cn/">CSS5欢迎您接见会面</a></li> 

<li><a href="//www.css5.com.cn/">CSS5欢送您会见</a></li> 

<li><a href="//www.css5.com.cn/">CSS5迎接您接见</a></li> 

<li><a href="//www.css5.com.cn/">CSS5欢迎您访问</a></li> 

<li><a href="//www.css5.com.cn/">Thinkcss欢迎您会面</a></li> 

</ul> 

以上是ul li组织形式,环节看后面CSS代码写法与正文。

4、对应CSS代码

ul.licss{ margin:0 auto; background:url(ul-bg.gif); width:400px; text-align:left} 

/* 背景只惹人图片 不必设置装备摆设别的参数便可对象内全屏平铺 */ 

ul.licss li{ width:100%; text-indent:10px; height:34px; line-height:34px} 

/* 高度重要合计好,与布局图片不一定关系 */ 

ul.licss li:hover{ background:#EBEBEB} 

/* 为了有动感后援变色换色,对li设置hover伪类 */ 

这里径自对ul设置一个class。评释:在实际结构中会多处使用ul li结构,为了便于判袂别的处所使用ul所以单独对此处实例命名class。

CSS扩张:若是要完成鼠标移到li上变色,大要再配置CSS ul.licss li:hover{设置装备摆设布景色彩}。 ie6 hover赞成://www.css5.com.cn/jianrong/528.shtml


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1511.html转载请标明出处,谢谢合作!
标签:
  • 实例
  • 背景
  • css
  • 布局
  • 不同
  • 颜色
  • 列表
  • 隔行
  • 隔行
  • 为了
  • 为了