CSS隔行换色教程
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS隔行换色教程,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1943字,纯文字阅读大概需要3分钟。
内容图文
![CSS隔行换色教程](/upload/InfoBanner/zyjiaocheng/413/5f8eb49d38df4fa992ee878db5024288.jpg)
为了不影响程序做调用,让程序简便,使用ul li列表布局实现以上间隔背景色布局,同时鼠标滑过悬停li上方背景变色换色,通常有两种方法。
第一种:背景图片,切一窄的竖条背景图片素材,将背景图片作为ul背景,让背景图片作为ul背景后上下左右平铺,即可轻松实现间隔效果。
第二种:使用JQ特效实现,通过JS特效实现这样间隔背景色同时鼠标经过背景换色效果,特效代码多并需要引人JS文件和代码。
接下来通过图文+在线演示实例介绍这两种方法。
背景图片素材实现li列表背景间隔色
此DIV+CSS案例比较推荐方法,简单方便,节约代码,同时可以实现鼠标移到li上方背景换色效果。
操作方法如下:
切出1像素宽、高度刚好两色的li高度的为图片素材
HTML对应源代码
<ul class="licss"> <li><a href="http://www.gxlcms.com/">欢迎您访问</a></li> <li><a href="http://www.gxlcms.com/">欢迎您访问</a></li> <li><a href="http://www.gxlcms.com/">欢迎您访问</a></li> <li><a href="http://www.gxlcms.com/">欢迎您访问</a></li> <li><a href="http://www.gxlcms.com/">欢迎您访问</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{设置背景颜色}。
灵活使用:根据实例大家可以将ul li布局技巧扩展到非li布局的布局中实现列表类布局背景间隔颜色。
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
HTML如何2d和3d转换
HTML5视频音频实现步骤
Js获取获取样式的常见方式
以上就是CSS隔行换色教程的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS隔行换色教程全部内容,希望文章能够帮你解决CSS隔行换色教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。