1、精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力)

2、精灵技术的本质(小的背景图集中在一张大图上)

3、精灵技术的使用

案例1:

案例2:

注意:产品类的图片一般不是用背景,而是用img标签

案例3:

4、字体图标---比精灵图标更占优势

字体图标使用流程(如果前2步不需要,可以直接从第3步开始)

推荐转换网站

如何下载字体图标(压缩包一定不要丢。把压缩包里的fonts文件放在自己的项目中)

使用步骤

注意fonts路径问题,别放错了。

如何追加新图标到原来的库里面?

css学习_css精灵技术、字体图标的更多相关文章

  1. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  2. css精灵图&字体图标

    精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...

  3. css学习_css写的位置

    !!!拿到一个页面后应该先写结构再写样式 结构由大到小,由外到里 样式最好按顺序加 position  .float . 颜色  背景  字体 等... 1.行内(内联)样式 2.内部样式表(按道理可 ...

  4. CSS学习笔记1:字体样式属性

    CSS初识 成叠样式表,主要用于设置html页面的外观 产生原因:为了解决混乱的结构和样式,使结构和样式相分离. CSS注释 /*这是CSS注释*/ CSS样式规则 1.选择器用于指定css样式作用的 ...

  5. css学习_css补充知识

    1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变   4.css  验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩  ----(节约空间,节省带宽) 6.旋转轮播图 案例: ...

  6. css学习_css用户界面样式

    1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...

  7. css学习_css常见属性用法

    1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block  / in ...

  8. css学习_css浮动

    1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2 ...

  9. css学习_css三大特性

    css三大特性 1.层叠性(就近原则) 2.继承性(和文字有关的会继承) 3.优先级   (权重问题) 权重:0,0,0,0 0001 ---标签选择器(注意:即使有20个标签选择器也不会比一个伪类选 ...

随机推荐

  1. 解决Maven项目总是回跳到jdk1.5的情况的方法

    一.在pom.xml中加入: <build> <plugins> <plugin> <groupId>org.apache.maven.plugins& ...

  2. PHP知识梳理

      前端 HTML.CSS. JS(DOM操作.事件操作).Jquery(选择器.属性/值操作.事件操作).ajax PHP基础 变量(类型.类型转换) 常量(系统.自定义) 运算(算术.字符串.赋值 ...

  3. 转发:CentOS下tar压缩排除某个文件夹或文件及解压

     一.压缩 一般直接用tar命令打包很简单,直接使用 tar -zcvf test.tar.gz test 即可. 在很多时候,我们要对某一个目录打包,而这个目录下有几十个子目录和子文件,我们需要在打 ...

  4. sed 替换多个空格为一个

    sed -i 's/[ ][ ]*/ /g'  file.txt

  5. 30天自制操作系统 - 来一个hello world

    helloos.nas 源码: ; hello-os ; TAB= ; 以下这段是标准的FAT12格式软盘专用代码 DB 0xeb, 0x4e, 0x90 DB "HELLOIPL" ...

  6. C#设计模式 ---- 总结汇总

    一.引言 C#版本的23种设计模式已经写完了,现在也到了一个该总结的时候了.说起设计模式,我的话就比较多了.刚开始写代码的时候,有需求就写代码来解决需求,如果有新的需求,或者需求变了,我就想当然的修改 ...

  7. Fortran一个获取硬件系统信息的函数库

    此函数库提供了 Visual Fortran 上获取硬盘ID,CPU编号,windows安装时间及文件头部校验的四个函数.可用于简单的程序加密.(但切勿用于商业性很强的地方)              ...

  8. xorm中的几个坑

    项目中使用的是xorm,虽然用了很顺手了,可是还是会遇到一些坑,这里纪录一些. 结构体自动忽略空字段 在xorm中,结构体会自动忽略空字段(或则说默认值,比如int 的0 ,string的" ...

  9. Android Studio打包程序时出现transformClassesWithDexForRelease错误

    百度半天.没找到直接原因..国外网站上有写这个错误的..国内的真心没找到..英语水平有太低..实在没看懂怎么搞.. 后来发现clean项目的时候是提示如下错误: Information:Gradle ...

  10. phalcon bug: model的findFirst会自动忽略一些空格

    version: Phalcon 3 如果DB存在一条记录phone='13012345678 '(后边有一个空格), 则在查询User::findFirst("phone = '13012 ...