【南大软院大神养成计划】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

相关文章推荐

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

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

南大软院大神养成计划--第一天学习HTML+CSS的基础归纳

其实前天晚上注册开始学的,大一网页算辅修课,玩了几下只,现在忘得差不多了,现在有机会把它捡起来了,哈哈!! 从头慢慢看过来,与去年相比,发现老师讲还不如在这个网站自学。老师开课直接跳过基础,发个PP...

南大软院大神养成计划--第二天学习CSS的基础归纳

总算学完了基础,虽然以前学过,但还是认真看完了每一章,加深了各个基本元素的认知程度。 以前做网页作业总喜欢建立一个div标签在css里设置div{display:block; position:abs...

【南大软院大神养成计划:第十天】久违了,JavaScript——入门篇(二)

今天把《JS入门篇》课程完成了,今早取快递路上思考人生时,粗略算了算,前端工程师课程总共700+节,21天学完需要每天完成37节,这样算当然不是很科学,但是也一定程度上体现了学习任务的并不轻松。  ...

南大软院大神养成计划——第九天

今天是南大软院大神养成计划实施的第九天,今天学习的主要内容是DOM探索之基础详解篇的剩余两章内容,最后两章内容主要讲解的是“如何判断节点元素类型”和“继承层次和嵌套规则”。 先讲讲“如何判断节点元素...

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

今天是南大软院大神养成计划实施的第十二天,今天学习的内容是DOM事件探秘部分的最后部分——事件类型。事件类型从来大类来分可以分为鼠标事件和键盘事件。 先说说鼠标事件,鼠标事件可以分为click,ov...

南大软院大神养成计划——第一天

参加比赛的第一天 也是第一次写博客 心情是激动地 感觉不要不要的  但是依旧还是要开始的  那么就开始吧  干巴爹 第一天的战况 感觉自己的进度好慢 但是看看...
  • YaKIcoo
  • YaKIcoo
  • 2015年11月16日 23:03
  • 198

南大软院大神养成计划--HTML和CSS基础课程(二)

今天主要学习了关于CSS样式的一些基本知识。CSS全称为“层叠样式表(Cascading Style Sheets)“,它主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。使...

南大软院大神养成计划——第一天学习心得

今天是南大软院大神养成计划开始的第一天,在参加这次活动之前,我犹豫了很久到底要不要参加此次计划,因为我对成为一名web前端开发不是很感兴趣,我更感兴趣的是嵌入式开发,但是后面经过室友的鼓励,我还是选择...

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

今天是南大软院大神养成计划实施的第十六天,今天继续学习jQuery基础。 一.过滤性选择器 该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【南大软院大神养成计划】Css Sprite——雪碧图运用
举报原因:
原因补充:

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