zoukankan      html  css  js  c++  java
  • css精灵图与字体图标

    css精灵图与字体图标

    一、精灵图

    1、通过淘宝网首页查看精灵图的请求过程

    2、为什么要用精灵图?

    (1)      在网页中引入图片,src的属性值是一个网址,会请求数据,需要时间

    3、如何去减轻服务器压力,减少加载图片的时间

    ①    图片的懒加载

    ②    精灵图

    4、CSS精灵图定义:

    ①    CSS sprites

    ②    多个小图标放在一张图片上,然后通过背景方位去展示不同的小图标

    5、使用

    ①    background-image: url(images/img_navsprites.gif);

    ②     background-position: -46px 0;

    6、优点

    ①    有效地减少服务器接受和发送请求的次数

    ②    提高页面的加载速度

    二、字体图标

    1、为什么要用字体图标

    ①    图片过大,会增加服务器的压力

    ②    通过样式设置图片会失真

    2、定义:是一种字体inconfont可以设置大小颜色

    3、下载过程

    ①    打开http://www.iconfont.cn/登录

    ②    搜索想要使用的字体图标添加入库

    ③    在库中创建项目

    ④    可以编辑字体图标的大小、形状、颜色

    ⑤    下载至本地

    4、使用方法

    ①    Unicode  

    1)        引入iconfont.css

    2)        查找对应的字体编码

    3)        使用: <span class="iconfont">&#xe601;</span>

    ②    Font class  

  • 相关阅读:
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    C# List分组
    Win7安装VS2019
    C# Lambda Left Join AND Group by Then Sum
    RSA加密解密,Base64String
    Ion-select and ion-option list styling 自定义样式
    Docker镜像
  • 原文地址:https://www.cnblogs.com/wenaq/p/13513214.html
Copyright © 2011-2022 走看看