Css基础——精灵图(sprites)和字体图标

1、精灵图

1.1、精灵图的由来

一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送 请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。

因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。

核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。

1.2、精灵图的使用方法

使用精灵图核心总结:

1. 精灵图主要针对于小的背景图片使用。

2. 主要借助于背景位置来实现---background-position 。

3. 一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴同理。)

1.3、实际案例

要求:用精灵图拼写出自己的名字

精灵图:

a9068e95c3d645c2b607992dd093879f.jpeg

html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/style.css">
</head><body><div class="box"><span class="d dib"></span><span class="i dib"></span><span class="h dib"></span><span class="u dib"></span><span class="a dib"></span><span class="n dib"></span></div>
</body></html>

css:

* {margin: 0;padding: 0;
}.box {width: 900px;height: 400px;margin: 100px auto;background-color: skyblue;
}.dib {display: inline-block;
}.d {width: 118px;height: 122px;background: url(../images/abcd.jpg) no-repeat -350px 0;
}.i {width: 60px;height: 124px;background: url(../images/abcd.jpg) no-repeat -327px -135px;
}.h {width: 104px;height: 107px;background: url(../images/abcd.jpg) no-repeat -218px -144px;
}.u {width: 121px;height: 128px;background: url(../images/abcd.jpg) no-repeat -470px -414px;
}.a {width: 115px;height: 122px;background: url(../images/abcd.jpg) no-repeat;
}.n {width: 120px;height: 123px;background: url(../images/abcd.jpg) no-repeat -249px -267px;
}

效果图:

ffd9a0881d4a4779af437e1b28cdc7fe.png


2、字体图标

2.1、字体图标的来源

精灵图是有诸多优点的,但是缺点很明显。

字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。

1. 图片文件还是比较大的。

2. 图片本身放大和缩小会失真。

3. 一旦图片制作完毕想要更换非常复杂。

此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont。 字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。

2.2、字体图标的优点

1、轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求

2、灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等

3、兼容性:几乎支持所有的浏览器,请放心使用 注意: 字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。

注意: 字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。


总结:

1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。

2. 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。 


字体图标是一些网页常见的小图标,我们直接网上下载即可。 因此使用可以分为:

1. 字体图标的下载

2. 字体图标的引入 (引入到我们html页面中)

3. 字体图标的追加 (以后添加新的小图标)

2.3、字体图标的下载

推荐下载网站:

icomoon 字库 http://icomoon.io

阿里 iconfont 字库 http://www.iconfont.cn/

2.4、字体图标的引入

下载教程:以阿里 iconfont 字库为例

1、打开网站,进入一个库中,点击购物车图标,加入合计

9407039e9db64fb4b8af374b72cd618f.png

2、待选完了一些字体图标以后,点击网页左上方购物车图标

a4cc430ecf594077a1f5ac5e547b787d.png

3、点击下载代码

7caf84682d5a49d89bef52d51d90bbd3.png

2.5、字体图标的使用

1、将解压后的文件放入根目录下的fonts文件夹(需要自己创建)

931dabd4e6c448c9953254d72bf0aac1.png

2、在页面中引入字体的css文件

e345175181ae4a2aa904ed7891f2d113.png

3、打开文件夹里的demo_index.html

0bf1daf16d714d90adc4a2cd4998d1d4.png

4、复制你想使用文件的Unicode码

96d63c4de1854357b373e0afddb96902.png

5、在标签中加入字体的类,并填写内容为Unicode码

c7c25040a51e4610ba770e279e8558df.png

效果图:

0b804ec91a614a35b6ed1c0ee5e7806d.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744064.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搭建Hadoop集群

一、前言 虚拟机&#xff08;Virtual Machine&#xff09;指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。在实体计算机中能够完成的工作在虚拟机中都能够实现。 虚拟机是在一些开发测试工作中常常需要用到的功能&#xff0c;常见的虚拟机…

白话-MVCC如何工作

MySQL中的MVCC机制主要在以下情况下起作用&#xff1a; 使用支持MVCC的存储引擎&#xff1a;MVCC主要是MySQL的InnoDB存储引擎中实现并发控制的一种方式&#xff0c;只有当使用InnoDB作为表的存储引擎时&#xff0c;MVCC机制才会生效。 非串行化事务隔离级别&#xff1a;MVCC在…

一文掌握mysql中的查询语句

目录 1. 聚合查询1.1 聚合函数1.2 GROUP BY子句1.3 HAVING 2. 联合查询2.1 内连接2.2 外连接2.3 自连接2.4 子查询2.5 合并查询 1. 聚合查询 1.1 聚合函数 常见的统计总数、计算平局值等操作&#xff0c;可以使用聚合函数来实现&#xff0c;常见的聚合函数有&#xff1a; 函…

读书笔记:<<上瘾>>

上瘾的四个步骤: 第一个叫触发&#xff0c; 第二个叫行动 第三个叫多变的酬赏&#xff0c; 第四个叫投入 我们首先一定会提升用户的终身价值。一个用户用一次还是用一辈子&#xff0c;价值是完全不一样的。 第二个就是你能够获得这个完全不同的灵活收益。比如说像我们刚刚说的…

【构建部署_Docker介绍与安装】

构建部署_Docker介绍与安装 构建部署_Docker介绍与安装Docker介绍Docker安装CentOS安装DockerCompose 构建部署_Docker介绍与安装 Docker介绍 Docker 是一个基于go语言开发的开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中&#x…

基于MPC模型的自动驾驶控制总结---参考学习链接以及常规知识--simulink mpc和adapter mpc的关系和区别

1&#xff0c;mpc 2&#xff0c;adapter mpc 3&#xff0c;参考链接&#xff1a; 微信文章&#xff1a;简析MPC及其实践&#xff08;二&#xff09;simulink实践 MPC模型预测控制&#xff08;6&#xff09;–MPC与无人驾驶轨迹跟踪&#xff0c;以及mpc和adapter mpc的区别

QT 如何防止 QTextEdit 自动滚动到最下方

在往QTextEdit里面append字符串时&#xff0c;如果超出其高度&#xff0c;默认会自动滚动到QTextEdit最下方。但是有些场景可能想从文本最开始的地方展示&#xff0c;那么就需要禁止自动滚动。 我们可以在append之后&#xff0c;添加如下代码&#xff1a; //设置编辑框的光标位…

Java_9最大连续1的个数

最大连续1的个数 给定一个二进制数组 nums &#xff0c; 计算其中最大连续 1 的个数。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,0,1,1,1] 输出&#xff1a;3 解释&#xff1a;开头的两位和最后的三位都是连续 1 &#xff0c;所以最大连续 1 的个数是 3. 示例 2: 输入…

NBlog整合OSS图库

NBlog部署维护流程记录&#xff08;持续更新&#xff09;&#xff1a;https://blog.csdn.net/qq_43349112/article/details/136129806 由于项目是fork的&#xff0c;所以我本身并不清楚哪里使用了图床&#xff0c;因此下面就是我熟悉项目期间边做边调整的。 目前已经调整的功能…

CVE-2019-5782:kArgumentsLengthType 设置偏小导致优化阶段可以错误的去除 CheckBound 节点

文章目录 环境搭建漏洞分析笔者初分析笔者再分析漏洞触发源码分析 漏洞利用总结 环境搭建 sudo apt install pythongit reset --hard b474b3102bd4a95eafcdb68e0e44656046132bc9 export DEPOT_TOOLS_UPDATE0 gclient sync -D// debug version tools/dev/v8gen.py x64.debug ni…

FreeRTOS操作系统学习——软件定时器

软件定时器介绍 软件定时器允许设置一段时间&#xff0c;当设置的时间到达之后就执行指定的功能函数&#xff0c;被定时器调用的这个功能函数叫做定时器的回调函数。回调函数的两次执行间隔叫做定时器的定时周期&#xff0c;简而言之&#xff0c;当定时器的定时周期到了以后就…

C语言--字符串面试题

字符串是由若干字符组成的序列。由于字符串在编程时使用的频率非常高,为了优化,很多语言都对字符串做了特殊的规定。下面分别讨论C/C字符串的特性。 C/C中每个字符串都以字符"0作为结尾,这样我们就能很方便地找到字符串的最后尾部。但由于这个特点&#xff0c;每个字符串中…

Android 15 首个开发者预览版到来

作者 / 工程副总裁 Dave Burke Android 15 的首个开发者预览版现已发布&#xff0c;以便各位开发者能与我们通力协作&#xff0c;打造更优秀的 Android 平台。 在 Android 15 中&#xff0c;我们继续致力于打造一个既能提升工作效率&#xff0c;又能提供全新功能的平台。这些新…

【Java - 框架 - Mybatis】(02) SpringBoot整合Mybatis操作Mysql - 快速上手

“SpringBoot"整合"Mybatis"操作"Mysql” - 快速上手&#xff1b; 环境 Java版本"1.8.0_202"&#xff1b;Spring Boot版本"2.5.9"&#xff1b;Windows 11 专业版_22621.2428&#xff1b;IntelliJ IDEA 2021.1.3(Ultimate Edition)&a…

Java基础面试题整理2024/3/13

1、可以使用switch的数据类型 Java5以前&#xff0c;switch(arg)表达式中&#xff0c;arg只能是byte、short、char、int。 Java5之后引入了枚举类型&#xff0c;也可以是枚举类型。 Java7开始引入了字符串类型。 2、Java中的goto有什么作用 goto是Java中的保留字&#xff0c…

【Rust】——枚举与模式匹配

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

2.案例、鼠标时间类型、事件对象参数

案例 注册事件 <!-- //disabled默认情况用户不能点击 --><input type"button" value"我已阅读用户协议(5)" disabled><script>// 分析&#xff1a;// 1.修改标签中的文字内容// 2.定时器// 3.修改标签的disabled属性// 4.清除定时器// …

Day15 面向对象进阶——接Day14

Day15 面向对象进阶——接Day14 文章目录 Day15 面向对象进阶——接Day14一、访问修饰符二、Object三、深入String的equals()方法四、final 一、访问修饰符 1、含义&#xff1a;修饰类、方法、属性&#xff0c;定义使用的范围 2、经验&#xff1a; 2.1.属性一般使用private修…

JavaScript进阶:js的一些学习笔记

文章目录 1. js作用域2. 函数3. 解构赋值 1. js作用域 作用域规定了变量能够呗访问的范围&#xff0c;离开这个范围&#xff0c;这个变量就不能够被访问到。 局部作用域&#xff1a;可以分为函数作用域和块作用域 块作用域&#xff0c;let 声明会产生块级作用域&#xff0c;va…

武汉星起航:秉承客户至上服务理念,为创业者打造坚实后盾

在跨境电商的激荡浪潮中&#xff0c;武汉星起航电子商务有限公司一直秉持着以客户为中心的发展理念&#xff0c;为跨境创业者提供了独特的支持和经验积累&#xff0c;公司通过多年的探索和实践&#xff0c;成功塑造了一个以卖家需求为导向的服务平台&#xff0c;为每一位创业者…