我们知道，在html中，ul，li列表之前需要用色差布局的效果，那么ul li 怎么用css做出隔行换色呢？今天就给大家做一个实例来示范一下。
为了不影响程序做调用，让程序简便，使用ul li列表布局实现以上间隔背景色布局，同时鼠标滑过悬停li上方背景变色换色，通常有两种方法。
第一种：背景图片，切一窄的竖条背景图片素材，将背景图片作为ul背景，让背景图片作为ul背景后上下左右平铺，即可轻松实现间隔效果。
第二种：使用JQ特效实现，通过JS特效实现这样间隔背景色同时鼠标经过背景换色效果，特效代码多并需要引人JS文件和代码。
接下来通过图文+在线演示JQ特效这两种方法。
立即学习“前端免费学习笔记（深入）”；
背景图片素材实现li列表背景间隔色
此DIV+CSS案例比较推荐方法，简单方便，节约代码，同时可以实现鼠标移到li上方背景换色效果。
操作方法如下：
切出1像素宽、高度刚好两色的li高度的为图片素材
HTML对应源代码
登录后复制 欢迎您访问 欢迎您访问 欢迎您访问 欢迎您访问 欢迎您访问
以上是ul li布局内容，关键看后面CSS代码写法与解释。
4、对应CSS代码
ul.licss{ margin:0 auto; JQ特效:url(ul-bg.gif); width:400px; JQ特效:left}
/* 背景只引人图片 不用设置其它参数即可对象内全屏平铺 */
ul.licss li{ width:100%; JQ特效:10px; height:34px; JQ特效:34px}
/* 高度需要计算好，与布局图片一定关系 */
ul.licss li:hover{ background:#EBEBEB}
/* 为了有动感背景变色换色，对li设置hover伪类 */
这里单独对ul设置一个class。解释：在实际布局中会多处使用ul li布局，为了便于区别其它地方使用ul所以单独对此处实例命名class。
CSS扩展：如果要实现鼠标移到li上变色，可以再设置CSS ul.licss li:hover{设置背景颜色}。
灵活使用：根据实例大家可以将ul li布局技巧扩展到非li布局的布局中实现列表类布局背景间隔颜色。
相信看了这些案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
JQ特效
JQ特效
JQ特效
以上就是CSS隔行换色教程的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121303.html
