图标字体 VS 雪碧图——图标字体应用实践

2017/04/05 · HTML5 · 1
评论 ·
图标字体

原文出处:
人人网FED博客   

本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点。

1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

  • CSS
    Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
  • CSS
    Sprites的原理其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-
    repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

起因

现在是前端技术的大时代。若干年过去之后,也许我们会感慨很多,当年阿当的一篇博文多么的犀利。vue和angular的闹剧。最近临危受命,要做几天的前端开发。说是前端开发,其实就是写html+css+JavaScript,真的,当你面对庞大的前端技术体系无所适从的时候,用最简单的技术来一场放松吧。

这一次开发,没有什么特别的,就是我在小图标展示的时候。在雪碧图和图标字体中徘徊了很久。于是,简单研究了一下,就当立一个flag,日后在深究一下。

最近学习了雪碧图的使用,雪碧图的好处这块就不多说了,只说应用部分。

小周末,研究了一下雪碧图的实现方式。先科普一下雪碧图,雪碧图就是css sprite的意思,也有叫css精灵。就是呢,将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

雪碧图

雪碧图实例:淘宝PC端

图片 1

将多张小图放至一张大图

使用的时候,通过background-position调整显示的位置,如下图所示:

图片 2

雪碧图的使用方法

使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数。因为浏览器同一时间能够加载的资源数是一定的,IE
8是6个,Chrome是6个,Firefox是8个。为了验证,写了以下html结构:(这部份虽然有点跑题,但是很要必要深究一下)

图片 3

验证Chrome同时加载个数的html–很多张很大的图片

然后在Chrome的开发者工具里面的Timeline可以看到Chrome确实是6个6个加载的,每次最多加载6个:

图片 4

Chrome同时最多加载资源数为6个

雪碧图的制作方法可以用node的一个的包css-sprite,十分地方便。只要将图标做好,放到相应的文件夹里面,写好配置文件运行,就能够生成相应的图片和css,无需自己手动去调整位置等css属性。详见css-sprite

然而,使用雪碧图存在不可避免的缺点

作用
  • 利用CSS
    Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能
  • CSS
    Sprites能减少图片的字节,例如3张图片合并成1张图片的字节总是小于这3张图片的字节总和
  • CSS
    Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
  • 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便

雪碧图

除了叫雪碧图外,它还有很多名字,css sprite, css
精灵等。原理就是将一些小图标合并到一张图片上,然后用css的背景定位来显示需要显示的部分。

工具

sprite-generator

栗子:

图片

图片 5

image

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css sprite</title>
    <style>
        .bg{
            background: url("css_sprites .png");
        }
        .bg-9 {
            width: 262px; height: 156px;
            background-position: -10px -10px;
        }

        .bg-10 {
            width: 246px; height: 150px;
            background-position: -292px -10px;
        }
    </style>
</head>
<body>
    <div class="bg bg-9"></div>
    <div class="bg bg-10"></div>
</body>
</html>

效果

图片 6

image

优点

  • 减少对服务器的请求次数比如页面有五个图标,把他们放到一张背景图上,只需要加载一次。然后用css定位从这张图片来取就可以了
  • 提高页面的加载速度减少了页面的请求次数,自然会提高了页面的加载速度

缺点

  • 维护麻烦,如果修改其中的一张图,你需要修改整张图。
  • 高清失真,为了适应不同的分辨率,可能要准备多个规格的图片。

雪碧图的使用依赖于background-position这个属性,属性值分别为x,y轴的值,图片的显示大小由容器决定,简单点说,就是承载该图片的大小是多大显示区间就是多大,起始点就是background-position属性值的坐标。

1、好处优点:

雪碧图的缺点

2.img标签和CSS背景使用图片在使用场景上有何区别

img标签一般用于可以点击跳转链接或者可以个性化定制改变(如登陆头像)的图片,css背景一般是固定不变的内容(如logo),点击后不会跳转到新页面
css背景一般用于静态不变的图片。可以是页面LOGO等。

图标字体

可以缩放的矢量图标。你可以使用CSS对它们进行修改:大小,颜色,阴影等。体积特别的小。可能几百个图标才几十KB。

工具

iconfont是阿里提供一个矢量图标库。

fontawesome
国外一款优秀的图标库,用bootstrap的都不陌生了。

栗子:

iconfont和fontawesome官方都提供了很详细的使用教程,这里不就不做赘述了。
简单的写了一个小demo。可以去简单的看一下。

优点

  • 高清保真,因为是SVG图形。
  • 灵活性,可以设置大小,颜色等。
  • 兼容性好,支持IE6
  • 开源的字体库很多
  • 减少HTTP请求

缺点

  • 维护自己的字体库麻烦一些
  • 图表字体只能被渲染为单色的
例写法:.btn2{background-position:0 -38px;  }

有效减少网站的http请求数量,加速图片的显示。

高清屏会失真

在2x的设备像素比的屏幕上例如mac,如果要达到和文字一样的清晰度,图片的宽度需要实际显示大小的两倍,否则看起来会比较模糊:读者可以对比左边文字和右边图片里文字的清晰度

图片 7

右边图片里的文字比左边字体的文字模糊

特别是现在手机绝大部份是高清屏了,例如iphone 6 plus的分辨率达到了1920 *
1080,所以为了高清屏,使用雪碧图可能要准备多种规格的图片。

3.title 和 alt属性分别有什么作用

  • title
    属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段提示文本
    title 属性常与 form 以及 a
    元素一同使用,以提供关于输入格式和链接目标的信息
  • alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本
    ![](/i/eg_tulip.jpg)
    当图片无法显示时,就会变成下面这个样子:

    图片 8

总结

这篇文章只是浅谈了一些雪碧图和图标字体,没有太过的深入,也算是一篇工具介绍吧。这两种方式的出现,都是为了减少HTTP请求次数。优化和提升网页的访问速度。各有千秋。如果实际开发中,可以两种方式结合着来。

小栗子

sprite-generator

iconfont

fontawesome

素材取自慕课网雪碧图课程

2、条件:

雪碧图不方便变化

雪碧图是一张静态的图片,当他生成的那天就注定了他要以什么样的方式展示,因此我不能动态地改变他的颜色,无法让他变大(可能会失真),无法像文字一样加一个阴影效果等等。例如下面的菜单,hover或者选中的时候反色:

图片 9
图片 10

选中或者hover时反色

或者是某一天UI要换颜色、某一天老总挂了,为表哀悼,为个公司的网站要换个灰色调。使用雪碧图时,所有的图标都得重新制作。

使用图标字体可以完美解决上面的问题

4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思

设置图片abc为背景图片,位置为x轴方向0px,y轴方向0px(左上角是 0
0),不重复图片

<!DOCTYPE html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title>
</head>
<style>
    /*清除默认样式*/
   html,body,ul,li,button,div,input,a{ padding:0; margin:0; }
   a{text-decoration:none}
   body{ font-size:10px;}
   .content input::-webkit-input-placeholder {color:#ccc;padding-left:30px;}
</style>
<style>
    /*书写样式*/
    .content{margin-top:15px;padding:10px; width:190px;height:240px;background-color:#deeaf6;}
    .content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}
    .content .text a{float:right; color:#696BF6;}
    .content input[type='text']{margin-bottom:15px;border:1px solid #CDCACA;width:100%; height:30px;border-radius:5px;background-color:#fff;}
    .button button{background:url("http://img.mukewang.com/539a972b00013e9102280177.jpg") no-repeat;width:100%;height:38px; margin-top:15px;border:none;
    }
    .button .btn1{background-position:0 0; }
    .button .btn2{background-position:0 -38px;  }
    .button span{display:inline-block; width:100%;height:15px;border-bottom:1px solid #ccc; }
</style>
<body>
<div class="content">
    <input type="text" placeholder="邮箱/手机号/用户名"/>
    <input type="text" placeholder="请输入密码"/>
    <div class="text">
        <input type="checkbox" id="box"/>
        <label for="box">下次自动登录</label>
         <a href="#">忘记密码?</a>
    </div>

    <div class="button">
        <button class="btn1"></button>

        <button class="btn2"></button>
    </div>
</div>
</body>
</html>
  • 静态图片,图片不睡用户信息的变化而变化。
  • 小图片,容量比较小的(2~3k)。
  • 图片加载量比较大的。

图标字体icon font

图标字体就是将图标作成一个字体,使用时与普通字体无异,可以设置字号大小、颜色、透明度等等,方便变化,最大优点是拥有字体的矢量无失真特点,同时可以兼容到IE
6。还有一个优点是生成的文件特别小,215个图标的生成的ttf字体文件才41KB

图片 11

一个图标字体里面的元素

5.background-size有什么作用? 兼容性如何? 常用的值是?

background-size描述背景图片的大小,它的类型可以是像素(px)、百分比(%)或是auto,还可以是cover和contain。第一个值为背景图width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默认为auto,但当值为cover和contain时除外。

  • cover:

  div {
            width: 200px;
            height:200px;
            border: 1px solid red;
            background: url(1.jpg) 0 0 no-repeat;
            background-size: cover;
        }

图片 12

保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域,其中有一边和背景相同。

  • contain:

  div {
            width: 200px;
            height:200px;
            border: 1px solid red;
            background: url(1.jpg) 0 0 no-repeat;
            background-size: contain;
        }

图片 13

保持图像的宽高比例,将图片缩放到宽或者高正好适应定义背景的区域,但背景仍在定义的区域之内,被包含。

  • length:

  div {
            width: 200px;
            height:200px;
            border: 1px solid red;
            background: url(1.jpg) 0 0 no-repeat;
            background-size: 130px 180px;
        }

图片 14

这里为背景图片设置宽高,图片会直接被拉伸或缩放,不保持原来的比例。如果只设置一个数值,另外一个值默认为auto,它将按图片原比例来伸缩。

  • percentage:

  div {
            width: 200px;
            height:200px;
            border: 1px solid red;
            background: url(1.jpg) 0 0 no-repeat;
            background-size: 50% 50%;
        }

图片 15

这里需要特别注意一下,图片大小不是按背景图片大小的百分数来计算的,而是装载背景图的元素的百分比来计算。

 

注意:大图片不建议用雪碧图咯,图片那么大,拼完之后岂不是拆机无敌大咯,加载就慢了,得不偿失!!!

如何制作图标字体

需要准备PS和AI,打开UI图,选中图标的图层,通常它是设计师画的一个形状:

图片 16
图片 17

  1. 选中图标的图层

然后执行:文件->导出->Illustrator,如下左图所示,将生成一个AI文件。用AI打开刚刚生成的文件,执行File->Scripts->SaveDocsAsSVG,如下右图所示,将生成一个SVG文件:

图片 18图片 19

  1. 左: PS里导出AI文件,右:AI里面导出SVG

接下来,借助一个第三方的网站制作图标icomoon.io,进入app页面,选择导入icon,将刚刚生成的svg上传上去

图片 20

  1. 上传到icomoon

最后生成字体并下载:

图片 21

  1. 生成几种规格的字体

使用的时候通过@font-face引入,根据图标的编码就可以在页面中使用了。

然而在实际的操作中并没有像上面说的那么顺利,会遇到很多阻碍,笔者也是摸索了很久才总结了一套实用的经验,这也是其它介绍图标字体的教程没有提及到的,看其它很多教程可能会在实际使用中遇到很多坑。

6.如何让一个div水平居中?如何让图片水平居中

  • div水平居中

div { 
margin: 0 auto;
}
  • 图片水平居中
    给图片的父级设置text-algin:center样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style media="screen">
    div{
      width: 800px;
      height: 600px;
      border: 1px solid red;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="img">
    ![](1.jpg)
  </div>
</body>
</html>

图片 22

图片水平居中

书写过程中遇到的几个小问题:

3、原理:利用 css3的  background-position控制一个层可显示区域范围大小,通过一个窗口,对背景图进行滑动。

坑1:图标字体只支持单路径

通常情况下,设计师在制作图标的时候是用多个路径组合出来的,在上面的导出的svg也是带有多个路径的,打开svg文件就可以知道,它是由几个path组成的:

图片 23

导出的svg文件是由几个path组成的

但是字体只支持单路径,
一个解决办法是手办修改svg文件,把多个path合并成一个,这就要求对svg格式比较熟悉。但是这种方法吃力不讨好,只适用比较简单的情况,复杂的图标最后合并的效果很难做到和原先的一模一样。

有一个比较智能的办法,就是使用PS的合并形状组件的功能:

图片 24

使用PS合并形状组件

这样子生成的svg就是单路径的,有时候会遇到“合并形状组件”的菜单项是置灰的,只要把图层的小眼睛点掉再打开就可以了(或者可能本身就是单路径的)。

7.如何设置元素透明? 兼容性?

1.使用rgba:rgba(red, green, blue, alpha)。
2.设置opacity:0~1

清除a标签样式

简单来说,就是利用这个属性,设置背景图需要显示的起始位置,在通过标签来控制背景图显示的范围。

坑2:有些图标是多个图层组成的

一开始不知道,所以比较笨的方法是分别生成几个svg之后,再去手动去合并svg。其实PS有一个合并形状的功能,选中多个形状后,右键“合并形状”:

图片 25

使用PS合并多个形状图层

8.opacity 和 rgba都能设置透明,有什么区别

opacity作用于元素内的所有内容,rgba作用于元素的颜色或背景色

  使用text-decoration:none。其他属性overline——上划线,underline——默认的下划线,line-through——贯穿线

4、先来了解一下background-position属性吧,

坑3:生成的SVG填充可能被置为none

有时候会遇到生成了svg,但是上传上去是空的,检查一下svg文件发现是fill被置为none了,如下所示:

图片 26

生成的svg是fill:none

这个时候需要手动改一下svg文件,把fill:none改成随便一个色值即可,如fill:#000000.

改变placeholder的样式

图片 27  

使用一个脚本自动导出svg

在上面的操作中,都是要先执行PS导出再到AI里面执行导出,其实有一个脚本,能够自动执行这两步:PSD
to
SVG, 支持PS
CS6,不支持CC,还可以把这个脚本设置一个快捷方式,用起来非常方便。使用这个脚本需要注意的是图层的命名不能带中文,不然会出错,所以通常把图层复制到一个新的文件里面进行操作。

图片 28

使用PSD to SVG增加便利

现在重点说下,图标字体的使用和一些注意事项

  因为不同浏览器存在兼容性问题,这里主要设置webkit内核浏览器、火狐浏览器、IE浏览器三种,伪类的写法如下:

根据图所知:

图标字体的使用

通过font-face导入自定义字体,可以参考字体下载后的demo。然后,把所有使用图标字体的span/a标签都加一个.icon的类,.icon类设置font-family为font-face定义的字体名

JavaScript

@font-face { font-family: ‘icon-font’; src: url(‘fonts/icon-font.eot’);
src: url(‘fonts/icon-font.eot#iefix’) format(’embedded-opentype’),
url(‘fonts/icon-font.ttf’) format(‘truetype’),
url(‘fonts/icon-font.woff’) format(‘woff’),
url(‘fonts/icon-font.svg#icon-font’) format(‘svg’); font-weight:
normal; font-style: normal; } .icon{ font-family: “icon-font”: }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@font-face {
    font-family: ‘icon-font’;
    src:    url(‘fonts/icon-font.eot’);
    src:    url(‘fonts/icon-font.eot#iefix’) format(’embedded-opentype’),
        url(‘fonts/icon-font.ttf’) format(‘truetype’),
        url(‘fonts/icon-font.woff’) format(‘woff’),
        url(‘fonts/icon-font.svg#icon-font’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
}
 
.icon{
    font-family: "icon-font":
}

最后,每个图标使用它在相应的编码或者HTML实体:

图片 29

图标字体的两种使用方法

其中,e9d3是当前图标在这个字体里面的十六进制编码。在普通字体里,0的编码是0x16,即48,为0的ascii编码。

在使用过程中遇到的坑:

::-moz-placeholder{color:red;}              //ff19+
:-moz-placeholder{color:red}       //ff18-
::-webkit-input-placeholder{color:red;}     //chrome,safari
:-ms-input-placeholder{color:red;}          //ie10
  • 以左上角为(0,0)坐标
  • x,y都是负值

1. webkit浏览器会在加缘加粗1个像素

如下,读者可找下区别:

图片 30

左边的图标边缘多了一个像素,右边是正常的

这个问题在间距比较小的时候就会比较明显,例如上图第二个图标中间。解决文案是加一个font-smoothing的属性:

CSS

.icon{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:
grayscale; }

1
2
3
4
.icon{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

 复选框与文字不对齐的解决:

综上所诉,所以background-position的取值就是背景图显示的起始坐标,形式就是background-position:0,
0;

2. 注意缓存

后续加了新的图标字体,如果不做处理的话,已经加载过的浏览器可能会有缓存,导致新的图标字体不会重新下载,所以需要处理这个问题。最简单的就是在上面的@font-face导入的url里面添加一个版本号的参数:

JavaScript

src: url(‘fonts/icon-font.eot?hadf22’);

1
src:    url(‘fonts/icon-font.eot?hadf22’);

或者更彻底的:改变文件名、路径名。

  这个问题设置默认的margin和padding是无法去掉的,可以为复选框和文字都使用vertical-align:middle属性即可,如文中代码:

5、拼图:拼图可以用ps,或者网上很多在线雪碧图生成工具,可以利用这些去生成雪碧图。

3. 多人协作

icomoon免费版的数据是存储在浏览器的本地数据库的,
商业版交点钱可以把数据放在云端,从而实现多人协作。免费版也可以实现多人协作,方法是将别人生成的字体svg导进去再添加,生成新的svg字体,同样别人要再上传的时候先上传这个svg。商业版使用的时候需要注意多人同时操作的情况,有可能会同时生成相同的编码。阿里也提供了一个在线的图标字体制作网站:

.content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}

我是用一个在线拼图工具手动拖拉评出来的,有点恶心~~哈哈

图标字体的缺点

图标字体有一个显而易见的缺点,不支持多色图标。因为它是一个字体,决定了它只能是单色的。如果实再是要使用多色的图标,甚至带一些特殊效果的那就使用SVG吧。

 去除输入框获取焦点时的浅蓝色边框

其实最好的拼图就是每个图标边距是多少和图标周围的留白留多少都控制好,对css的background-position的坐标写起来有规律的话,好些很多(然而这个是我自己手动拖拉的,位置很没有规律,所以下面的坐标值都是调试过才取值的)

结合使用SVG

对于多色的图标,可以在页面插入一个SVG:

 图片 31

左边的location的图标就是使用了svg,效果比直接贴一张PNG好很多

SVG的兼容性,除了IE
8不支持,其它的都还好。况且现在很多新项目都不再兼容IE
8了,不然连个border-radius都用不了。

有几种使用SVG的方法:

  1. 直接copy到页面

例如,后端如果用的是JSP,那么可以借助include功能:

JavaScript

<%@ include file=”loc-svg.jsp”%>

1
<%@ include file="loc-svg.jsp"%>

loc-svg.jsp里面的内容就是svg:

图片 32

借助jsp嵌套svg

这样做的缺点是浏览器没办法缓存,同时会阻碍页面的加载。优点是由于是内联的,可以直接用CSS控制svg的样式

  1. 使用embed/object

XHTML

<embed src=”loc.svg” width=”100″ height=”200″/>

1
<embed src="loc.svg" width="100"  height="200"/>

除此之外,还可以使用img标签,将svg的路径作为src属性,这种方法的缺点是没办法用CSS控制样式。还可以转化为base64的方式。更多使用SVG的方式参见:Using
SVG

当小个的SVG过多的时候,可能要考虑把多个小的SVG合并成一个SVG,就像雪碧图那样:

  1. 合并SVG

如下所示:通过一个个的symbol,将多个svg合在了一起,同时将每个symbol
svg定义一个id,使用的时候会用到

XHTML

<svg> <symbol viewBox=”0 0 101.5 57.9″
id=”active-triangle”><path fill=”#15c0f1″ d=”M100.4.5L50.7 57.1
1.1.5h99.3z”/> <symbol viewBox=”0 0 101.5 57.9″
id=”logo”><path fill=”#15c0f1″ d=”M120.4.5L50.7 57.1
1.1.5h99.3z”/> </svg>

1
2
3
4
<svg>
    <symbol viewBox="0 0 101.5 57.9" id="active-triangle"><path fill="#15c0f1" d="M100.4.5L50.7 57.1 1.1.5h99.3z"/>
    <symbol viewBox="0 0 101.5 57.9" id="logo"><path fill="#15c0f1" d="M120.4.5L50.7 57.1 1.1.5h99.3z"/>
</svg>

使用的时候通过外链的办法将svg引到页面上,如要用到上面定义的logo,通过“文件名#ID”的方式:

XHTML

<svg viewBox=”0 0 100 100″> <use
xlink:href=”icon.svg#logo”></use> </svg>

1
2
3
<svg viewBox="0 0 100 100">
    <use xlink:href="icon.svg#logo"></use>
</svg>

然而蛋疼的IE不支持外链,但是有人写了个插件,可以让IE支持,原理是检测到浏览器不支持外链的时候就将其外链替换成相应的svg内容,详见svg
for everybody

使用SVG的还有highCharts和d3.js等。

至此,整个流程说明完毕~ 图标字体和SVG结合使用,提升网站的高清体验。

1 赞 2 收藏 1
评论

图片 33

  设置input属性outline:none

图片 34

 

 



讲完这些了,可以来正题了,html和css代码了,下面代码是模仿生成一个菜单~~~

6、代码:

 1    <div id="content">
 2         <ul class="content">
 3             <li class="cat-1">
 4               <i></i>
 5               <h3>女装/男装/内衣</h3>
 6             </li>
 7             <li class="cat-2">
 8               <i></i>
 9               <h3>鞋靴/箱包/配件</h3>
10             </li>
11             <li class="cat-3">
12               <i></i>
13               <h3>童装玩具/孕产/用品</h3>
14             </li>
15             <li class="cat-4">
16               <i></i>
17               <h3>家电/数码/手机</h3>
18             </li>
19             <li class="cat-5">
20               <i></i>
21               <h3>美妆/洗护/保健品</h3>
22             </li>
23             <li class="cat-6">
24               <i></i>
25               <h3>珠宝/眼镜/手表</h3>
26             </li>
27             <li class="cat-7">
28               <i></i>
29               <h3>运动/户外/乐器</h3>
30             </li>
31             <li class="cat-8">
32               <i></i>
33               <h3>游戏/动漫/影视</h3>
34             </li>
35             <li class="cat-9">
36               <i></i>
37               <h3>美食/生鲜/零食</h3>
38             </li>
39             <li class="cat-10">
40               <i></i>
41               <h3>鲜花/宠物/农资</h3>
42             </li>
43             <li class="cat-11">
44           <i></i>
45               <h3>房产/装修/建材</h3>
46             </li>
47         </ul>
48    </div>

 1   <style type="text/css" >
 2    #content{
 3        width: 180px;
 4        background: #f8f8f8;
 5        border: 1px solid #bbb;
 6    }
 7    h3{
 8        margin: 0;
 9        padding: 0;
10    }
11     ul{
12         list-style: none;
13         padding: 0;
14     }
15     li h3{
16         font-size: 14px;
17         font-weight: 400;
18     }
19     li{  
20         margin:  3px 10px 0 0;
21         display: block;
22         height: 31px;
23         line-height: 31px;
24         overflow: hidden;
25         border-bottom: 1px solid #dedede;
26 
27     }
28     li i{
29 background:  url(sprite.png);
30 display: inline;
31 width: 40px;
32 height: 28px;
33 float: left;
34     }
35     .cat-1 i{
36         background-position: -7px -5px;
37     }
38    .cat-2 i{
39         background-position: -2px -35px;
40     }
41     .cat-3 i{
42         background-position: -7px -65px;
43     }
44     .cat-4 i{
45         background-position: -7px -105px;
46     }
47     .cat-5 i{
48         background-position: -7px -129px;
49     }
50     .cat-6 i{
51         background-position: -7px -151px;
52     }
53     .cat-7 i{
54         background-position:-60px -4px;
55     }
56     .cat-8 i{
57         background-position:-56px -33px;
58     }
59     .cat-9 i{
60         background-position: -56px -66px;
61     }
62     .cat-10 i{
63         background-position:-60px -103px;
64     }
65     .cat-11 i{
66         background-position: -51px -128px;
67     }
68 
69    </style>

7、效果图如下:

图片 35

 

 

雪碧图的应用就这样了有错欢迎指出哈哈哈

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图