最代码广告位
xxw1028的gravatar头像
xxw10282015-01-24 23:48:29

web页面icon实现技术---CSS Sprite技术

cssSprite这一前端技术已经被用烂了,但是我却发现还是有很多的前端开发工程师不了解这个东西,只是大致的知道这个东西貌似是用一张图片去实现所有的icon,却很少人知道使用这个技术其中的一些细节以及注意的地方

cssSprite技术的优点如下:

1、相对于单个icon,它的体积更小,请求服务器的次数也更少

2、cssSprite的图片应该使用png24去保存,相对于png8不会出现毛边

3、由于本质是图片因此可以实现各种丰富的icon

4、由于icon的规律,可以使用js进行统一的处理针对某一批icon

5、维护的成本稍微低点(相对于单个的icon)

以上观点只是个人观点,参考使用---------------技术没有最好,合适就是最好的!

废话不多说,以下是实现的demo截图:

web页面icon实现技术---CSS Sprite技术web页面icon实现技术---CSS Sprite技术web页面icon实现技术---CSS Sprite技术


打赏

文件名:cssSprite.zip,文件大小:90.925K下载
  • /
      • /cssSprite
        • /cssSprite/1.png
        • /cssSprite/2.png
        • /cssSprite/3.png
          • /cssSprite/css
            • /cssSprite/css/base.css
            • /cssSprite/css/css-sprite.css
          • /cssSprite/html
            • /cssSprite/html/index.html
          • /cssSprite/images
    最代码最近下载分享源代码列表最近下载
    kkname12345 LV112016年6月9日
    月亮月亮星星星星星星
    dagf113225 LV682015年8月13日
    皇冠月亮
    狼King LV132015年7月11日
    月亮月亮月亮星星
    56777815 LV92015年2月26日
    月亮月亮星星
    escode LV142015年1月26日
    月亮月亮月亮星星星星
    最代码客服 LV202015年1月25日
    太阳月亮
    最代码官方 LV1522015年1月25日
    皇冠皇冠太阳月亮月亮
    最代码最近浏览分享源代码列表最近浏览
    lzmcmd6月24日
    暂无贡献等级
    sonofy123 LV92月14日
    月亮月亮星星
    1216854855 LV52019年7月22日
    月亮星星
    15282777067 LV42019年6月1日
    月亮
    yxr坏孩子 LV92018年12月19日
    月亮月亮星星
    规范化 LV332018年8月8日
    太阳太阳星星
    李杰强 LV182018年6月2日
    太阳星星星星
    jay2222 LV52018年5月6日
    月亮星星
    bianyuning LV142018年5月3日
    月亮月亮月亮星星星星
    alnorth0603 LV32018年2月8日
    星星星星星星
    顶部客服微信二维码底部
    >扫描二维码关注最代码为好友扫描二维码关注最代码为好友