利用雪碧图及css自制的动态变色导航栏

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>navgation</title><style type="text/css">*{margin:0;padding: 0;} ul{list-style: none;}li {position: relative;display: block;overflow: hidden;}  li i{display: inline;float: left;height: 50px;width: 50px;} li h3{padding-top: 13.5px;padding-bottom: 13px;padding-left: 60px;font-size:20px;background-color: #fff;}.cat{margin:50px 500px;position: relative;width: 200px;background: #f8f8f8;border: 1px solid #bbb;}.cat li i{background-image:url(pic.png);}.cat-1 i{background-position: 0 0;} .cat-2 i{background-position: 0 -50px;}.cat-3 i{background-position: 0 -100px;}.cat-4 i{background-position: 0 -150px;}.cat-5 i{background-position: 0 -200px;}.cat-6 i{background-position: 0 -250px;}.yu1:hover{background: #b3c82f;}.yu2:hover{background: #bc5b3a;}.yu3:hover{background: #f88623;}.yu4:hover{background: #1ea0dc;}.yu5:hover{background: #5e5e9e;}.yu6:hover{background: #658093;}</style></head><body><div class="cat"><ul><li class="cat-1"><i></i><h3 class="yu1">Store</h3></li><li class="cat-2"><i></i><h3 class="yu2">Music</h3></li><li class="cat-3"><i></i><h3 class="yu3">Books</h3></li><li class="cat-4"><i></i><h3 class="yu4">Magazines</h3></li><li class="cat-5"><i></i><h3 class="yu5">Devices</h3></li><li class="cat-6"><i></i><h3 class="yu6">Devices</h3></li></ul></div></body>
</html>

利用雪碧图及css自制的动态变色导航栏相关推荐

一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
HTML-CSS（二十四）spirit雪碧图（CSS图精灵）
特性:css雪碧也叫做css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到所有零星图片都包含在一张大图中去加载好处:可以减少图片的质量.网页的图片加载速度快减少图片的请求次数,加快 ...
雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...
css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
CSS3—雪碧图和滑动门
一.CSS Sprite(雪碧图) CSS Sprite也叫CSS精灵.CSS雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时, ...
雪碧图PHP,雪碧图有什么用
雪碧图即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,其作用是:1.减少加载网页图片时对服务器的请求次数:2.提高页面的加载速度:3.减少鼠标滑过的一些bug:4.解决网页设计 ...
手把手教你webpack3（15）插件之雪碧图插件（WEBPACK-SPRITESMITH配置简述）
WEBPACK-SPRITESMITH配置简述前注: 文档全文请查看根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO ...

利用雪碧图及css自制的动态变色导航栏

利用雪碧图及css自制的动态变色导航栏相关推荐

最新文章

热门文章