CSS雪碧图,就是把所有的图表,按钮和图形包含在一个图像里面。它要求:

静态图片,不随用户信息变化而变化;小图片,图片容量比较小;加载量比较大。

使用这种技术可以减少Web浏览器发出的服务器请求,显著加快下载速度。同时把小图片,按钮集中在一起,可以提高维护性。

在这里介绍一款CSS Sprite自动生成工具——CssGaga,可以快速生成雪碧图。在实际制作中,遇到很多的坑,现在总结下:

1.   坑一

html:

 <div class="cat">
<ul>
<li class="cat-1"><i></i><h3>服装内衣</h3></li>
<li class="cat-1"><i></i><h3>服装内衣</h3></li>
</ul>
</div>

CSS样式:

 * {margin:;padding:;}
.cat {width: 150px;background: #f8f8f8; border:1px solid #ccc;padding:0 20px;}
ul {list-style: none;}
li {height: 31px;line-height: 31px;overflow: hidden;border-bottom:1px solid #ccc;margin-bottom: -1px;}
li i {display: inline-block;width: 30px;height: 24px;}
li h3{ font-size: 14px;font-weight:; }

实际显示:

原因:是i标签设置display:inline-block,h3是块元素,单独占据一行,父元素li设置了overflow属性,所以h3下移一行,内容无法显示。

解决办法:

1.   i标签去掉display属性,改为浮动float:left;

2.   h3标签改为a标签,这种方式比较常用。

2.  坑二

设置  i 标签和h3内容之间的距离,因为 i 标签是浮动的,h3文字内容会靠着i标签,需要设置一定的间距。在这里,可以设置 i 标签的外边距margin,这样两者之间的距离会拉开。i已经脱离文档流,这里的话,就相当于文字的环绕。

 li i {float:left;width: 30px;height: 24px;background: url(sidebar.png);margin: 3px 10px 0 0 ;}

修改前:修改后:

3.坑3

       实际background-position的移动距离和图标的高度(会影响x轴的移动距离)和宽度(会影响Y轴的移动距离)有关系

4.最终的代码如下:

 <style>
* {margin:0;padding:0;}
.cat {width: 150px;background: #f8f8f8; border:1px solid #ccc;padding:0 20px;}
ul {list-style: none;}
li {height: 31px;line-height: 31px;border-bottom:1px solid #ccc;overflow: hidden;margin-bottom: -1px;}
li i {float:left;width: 30px;height: 24px;background: url(sidebar.png);margin-top: 4px;margin-right: 3px;}
li h3{ font-size: 14px;font-weight: 400; }
.cat-1 i {background-position: 0 0;}
.cat-2 i {background-position: 0 -24px;}
.cat-3 i {background-position: 0 -48px;}
.cat-4 i {background-position: 0 -72px;}
.cat-5 i {background-position: 0 -96px;}
.cat-6 i {background-position: 0 -120px;}
.cat-7 i {background-position: 0 -144px;}
.cat-8 i {background-position: 0 -168px;}
.cat-9 i {background-position: -40px 0;}
</style>
</head>
<body>
<div class="cat">
<ul>
<li class="cat-1"><i></i><h3>服装内衣</h3></li>
<li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
<li class="cat-3"><i></i><h3>运动户外</h3></li>
<li class="cat-4"><i></i><h3>珠宝手表</h3></li>
<li class="cat-5"><i></i><h3>手机数码</h3></li>
<li class="cat-6"><i></i><h3>办公家电脑</h3></li>
<li class="cat-7"><i></i><h3>护符彩妆</h3></li>
<li class="cat-8"><i></i><h3>母婴用品</h3></li>
<li class="cat-9"><i></i><h3>其他分类</h3></li>
</ul>
</div>
</body>

效果图如下:

后续在涉及到小图标比较多的情况下,可以制作雪碧图,使用 i标签,然后通过控制对应背景图片的X轴和Y轴距离来实现显示不同图表的效果。

sprite学习的更多相关文章

  1. cocos代码研究(1)sprite学习笔记

    各种方法创建Sprite和Animate //图片创建法 参数一:图片资源路径 参数二:Rect选区 auto sprite = Sprite::create(, )); addChild(sprit ...

  2. CSS3与页面布局学习总结(五)——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. iOS7 Sprite Kit 学习

    iOS7 Sprite Kit 学习 iOS 7有一个新功能 Sprite Kit 这个有点类似cocos2d 感觉用法都差不多.下面简单来介绍下Sprite Kit About Sprite Kit ...

  4. Cocos2d-x 3.1.1 学习日志7--7分钟让你了解cocos2d-x3.1.1 Sprite精灵类

    精灵(Sprite)是游戏里面的角色,比方敌人.游戏里面运动的物体等等,所以精灵是游戏里面一个很常见的概念.差点儿无处不在. 在Cocos2D-x里面精灵是用Sprite类来进行表示的,它能够用一张图 ...

  5. Cocos2d-x 3.2 学习笔记(五)Sprite Node

    游戏中最重要的元素Sprite精灵,关于精灵的创建,精灵的控制等等. 涉及到的类Class: AnimationFrame 动画帧. Animation 动画对象:一个用来在精灵对象上表现动画的动画对 ...

  6. cocos2d-x 3.1.1 学习笔记[2]Sprite 精灵

    Sprite应该是用到最多的一个类吧.无法想像一个游戏没有精灵将怎样进行愉快的玩耍. Sprite继承于Node 和 TextureProtocol. Sprite是一个2d的图像. Sprite能够 ...

  7. ios学习之路四(新建Sprite Kit 项目的时候出现apple LLVM 5.0 error)

    在新建sprite kit 项目的时候出现"apple LLVM 5.0 error" 解决方法 在网上搜索,stackoverflow 上是这么说的点击打开链接.按照他的我也没解 ...

  8. Cocos2d-x shader学习3: sprite描边(Outline)

    Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果.所以本篇文章只针对于sprite来实现描边效果 ...

  9. Cocos2d-x 3.x 学习笔记(6):Sprite SpriteFrameCache Texture2D TextureCache

    1. 概述 TextureCache是对Texture2D纹理的缓存,SpriteFrameCache是对SpriteFrame的缓存,每个SpriteFrame是对Texture2D的封装,Spri ...

随机推荐

  1. php面向对象成员方法(函数)练习

    <?php header('content-type:text/html;charset=utf-8'); //成员方法的举例 /* ①添加sayHello 成员方法,输出 'hello' ②添 ...

  2. <数据链接>常用网站收集

    1.互联网数据指数 百度指数:http://index.baidu.com/ 阿里指数:http://index.1688.com/ TBI腾讯浏览指数:http://tbi.tencent.com/ ...

  3. JS 日期比较

    Js 日期比较方法 第一种方式 function compareDate(s1,s2){ return ((new Date(s1.replace(/-/g,"\/")))> ...

  4. phpqrcode.php 生成二维码图片用于推广

    <?php /* * PHP QR Code encoder * * This file contains MERGED version of PHP QR Code library. * It ...

  5. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  6. China Final J - Mr.Panda and TubeMaster

    和一般的管道不同 不能类似“无限之环”或者“弯弯国”的建图,因为这两个题都是某些位置必须有,或者必须没有 但是本题可以有的位置随意,不能限制某个位置要么流2,要么流0,(实际上可能流了1过去) 所以建 ...

  7. 原 jeecms9自定义标签以及使用新创建的数据库表

    转载地址:https://blog.csdn.net/nice_meng/article/details/89179089 本系统使用的是jeecmsv9版本,收集网上知识后,进行个人汇总 首先,自己 ...

  8. CentOS 6.5 Apache、MySQL、PHP环境配置(LAMP)

    yum -y install httpd mysql-server php #安装apache.mysql和PHP yum -y install php-mysql php-gd php-mbstri ...

  9. SecondaryNameNode 理解

    NameNode将对文件系统的改动追加保存到本地文件系统上的一个日志文件(edits).当一个NameNode启动时,它首先从一个映像文件(fsimage)中读取HDFS的状态,接着应用日志文件中的e ...

  10. 2019-5-21-asp-dotnet-core-图片在浏览器没访问可能原因

    title author date CreateTime categories asp dotnet core 图片在浏览器没访问可能原因 lindexi 2019-05-21 11:24:43 +0 ...