为了避免影响步骤做调用,让法度模范精练,应用ul li列表构造实现以上距离背风物布局,同时鼠标滑过悬停li上方后盾变色换色,通常有两种门径。
第一种:后盾图片,切一窄的竖条靠山图片素材,将背景图片作为ul后台,让配景图片作为ul后台后高下支配平铺,即可轻松完成间隔成效。
第二种:应用JQ殊效完成,通过JS特效实现多么间隔后盾色同时鼠标经由过程后盾换色造诣,殊效代码多并须要引人JS文件与代码。
此后CSS5通过图文+在线演示实例介绍这两种方式。
一、背景图片素材完成li列表后台隔绝距离色
此DIV+CSS案例对比引荐门径,简两边便,节约代码,同时梗概完成鼠标移到li上方后台换色效果。
独霸门径以下:
1、切出1像素宽、高度刚好两色的li高度的为图片素材
切出图片素材截图
点击我另存为图片素材(鼠标右键点击另存为)
2、引人CSS5初始化模板
进入下载CSS5初始化模板
并将图片素材拷贝入CSS5初始化模板images文件夹内。
3、HTML对应源代码
- CSS5欢迎您接见会面
- CSS5欢送您会见
- CSS5迎接您接见
- CSS5欢迎您访问
- Thinkcss欢迎您会面
以上是ul li组织形式,环节看