【南大软院大神养成计划】Css Sprite——雪碧图运用

原创 2015年11月19日 16:25:27

通常网站导航栏或登录框会见到一些小的图标,而这些图标如果用<Iimg>标签来实现,但这就会增加了网站的显示负担和http请求数目,从而增加了运行成本。这是便可以通过css sprite来解决这个问题。

对于css spirte,就是将众多的小图片拼装成一个大图片,通过对背景图片的坐标调试来实现所需小图片的显示(注意:坐标为负值)。

标签主要包括:

  <i></i>

  li i{background:url()}

  .cat-1{background-position:x x}

Css Sprite 使用要求:

  1.静态图片,不随用户信息改变而改变

  2.图片容量比较小

  3.加载量比较大

 

同时,值得注意的是并不是所用的图片都是做成雪碧图的方式好,对于一些较大的图片或js的动态图片,做成雪碧图的话对于css的修改会比较繁琐,所以还是应该使用<img>标签来实现。

 2015 11 19

mooctomato

【南大软院大神养成计划:第一天】种下21天,收获不一样的自己——前端养成启程!

在第一天的学习小节前,想先说一说自己的经历,所谓回顾历史,面向未来....     高考完,知道自己被南大软院录取时,心里被两股情绪塞满,那股红色的是欣喜,欣喜从初中就铸下学IT的理想的我终于可以做...
  • Sonshines
  • Sonshines
  • 2015年11月16日 20:52
  • 733

【南大软院养成计划:第十五天】CSS应用——雪碧图

学JS进阶有点乏味了,偶尔穿插其他的学习内容来提提神,所以选了网页布局的CSS雪碧图的应用。 讲师的教学主线大概是这样的: 雪碧图原理→雪碧图的制作→制作完整的雪碧图效果(实战) 【雪碧...
  • Sonshines
  • Sonshines
  • 2015年11月30日 23:34
  • 605

大神养成计划第二天 --南大软院大神养成计划

今天是大神养成计划第二天,看了慕课网的div+css页面布局,明白了一个网页都是有一个个的盒模型布局构成。所以我们做一个网页前,必须先对页面进行布局。我们可以把一个网页大致分为头部header,中间部...
  • u013175229
  • u013175229
  • 2015年11月17日 21:33
  • 610

css sprite,css雪碧图生成工具V3.0更新

css sprite,css雪碧图生成工具V3.0更新
  • wx247919365
  • wx247919365
  • 2015年05月05日 09:15
  • 1018

南大软院大神养成计划第十四天

 今天继续对象的返回方法,简单写了个代码,包含了Math和Array中个元素的使用,代码如下: Matn和Array    var myarr1= new Array...
  • jx370
  • jx370
  • 2015年11月29日 13:06
  • 227

南大软院大神养成计划--day13

我要做的是一个点击商品的购物栏,实现点击商品可以获得商品的详情信息,并且可以保存浏览记录。这里面用的是Model1:JSP+Javabean来实现。 首先,这里面有三个类,DBHelper,实体类和业...
  • TimeSea
  • TimeSea
  • 2015年11月28日 09:19
  • 203

南大软院大神养成计划--php

今天学了一些php和sql相关的部分,虽然时间挺长,但是真正印象深刻的只有第一步mysql_connect,第二步mysql_select_db,第三步mysql_query然后建立连接,可以在网页上...
  • hiiiji
  • hiiiji
  • 2015年11月17日 23:30
  • 121

南大软院大神养成计划第七天

今天一直在做练习,妄想把毕生所学全都纠集在一个页面上,可想而知,我失败了啊啊啊,不知道是哪里出错了,好伤心。                      这告诉我,网页设计不是把所有东西拼在一起没那么...
  • jx370
  • jx370
  • 2015年11月22日 23:20
  • 166

南大软院大神养成计划--day18

这次的学习已经快要到尾声了,我的JSP慕课课程也差不多要结束了,由于只剩下一个购物车项目的联系,今天来学习一些新鲜的东西 。 这里面MVC的介绍如题所示,我觉得主要体现了一种分层的思想,...
  • TimeSea
  • TimeSea
  • 2015年12月03日 15:04
  • 195

南大软院大神养成计划

 通过今晚的学习,认识到sublime是一个功能强大的软件,同时也初步了解了sublime菜单栏的主要功能。...
  • h2498864708
  • h2498864708
  • 2015年11月16日 21:40
  • 196
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【南大软院大神养成计划】Css Sprite——雪碧图运用
举报原因:
原因补充:

(最多只允许输入30个字)