当前位置： 首页 > news >正文

CSS 高级技巧

news 文章来源：https://blog.csdn.net/weixin_68773927/article/details/129580755 2025/5/11 0:35:22

目录

1.精灵图

1.1为什么需要精灵图

1.2 精灵图（sprites）的使用

2.字体图标

2.1字体图标的产生

2.2字体图标的优点

2.3字体图标的下载

2.4字体图标的引入

2.5字体图标的追加

1.精灵图

1.1为什么需要精灵图

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

  因此，为了有效的减少服务器接受和发送请求的次数，提高页面加载的速度，出现了CSS精灵技术，也称 css sprite， css雪碧。

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

1.2 精灵图（sprites）的使用

使用精灵图的核心：

  1. 精灵图技术主要针对于背景图片的使用，就是把多个人小背景图片整合到一张大的图片中。
  2. 这个大图片也称为sprites 精灵图或者 雪碧图
  3. 移动背景图片位置，此时可以使用 background-position
  4. 移动距离就是这个目标图片x和y轴坐标，网页中坐标有所不同。
  5. 因为一般情况下都是往上往左移动，所以数值是负值。
  6. 使用精灵图的时候需要精确测量，每个图片的大小和位置。

使用精灵图核心总结

  1. 精灵图主要针对于小的背景图篇使用
  2. 主要借助于背景图片位置俩实现-- background-position
  3. 一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）

2.字体图标

2.1字体图标的产生

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

以前都是用精灵图来做的，不过精灵图有很多的缺点。

  1. 图片本身还是比较大的。
  2. 图片本身放大和缩小都会失真。
  3. 一旦图片制作完毕咸阳跟换是非常复杂的。 

此时，有一种技术的出现很好的解决了以上问题，即使字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用，展示的是图标，本质属于字体。

2.2字体图标的优点

  • 轻量级：一个图标要比一系列的图像要小。一旦字体加载了，图片就会马上渲染出来，减少了服务器的请求。
  • 灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
  • 兼容性：几乎支持所有的浏览器，请放心使用  

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

总结：

  1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
  2. 如果遇到一些结构和样式复杂的小图片，就用精灵图。

字体图标的使用

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

  1. 字体图标的下载
  2. 字体图标的引用（引入到html网页中）
  3. 字体图标的追加（以后添加新的小图标） 

2.3字体图标的下载

推荐网站：

https://iconion.com/posts/icomoon/https://iconion.com/posts/icomoon/ IcoMoon 成立于2011年，退出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使他们称一字型，该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速慢。

https://www.iconfont.cn/https://www.iconfont.cn/阿里M2UX的一个iconfont 字体图标库，包含了淘宝图标库和阿里图标库。可以使用Ai制作图标上传代码。免费。

2.4字体图标的引入

下载完毕之后，注意原来的文件不要删除，后面还会使用。

1.把下载包里面的 fonts 文件夹放入页面根目录下。

2.在css样式中全局声名字体：简单理解把这些字体文件通过css引入到我们的页面中。一定要注意字体文件路径问题。

  @font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?p4ssmb');src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb') format('truetype'),url('fonts/icomoon.woff?p4ssmb') format('woff'),url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

 3.html 标签内添加小图标

 代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?p4ssmb');src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 100px;color: palegoldenrod;}</style>
</head><body><span></span>
</body></html>

2.5字体图标的追加

如果在工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的selection.json 重新上传，然后选取自己想要的图标，重新下载压缩包，并替换原来的文件即可。

相关文章：

CSS 高级技巧

目录 1.精灵图 1.1为什么需要精灵图 1.2 精灵图&#xff08;sprites&#xff09;的使用 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.5字体图标的追加 1.精灵图 1.1为什么需要精灵图 一个网站往往回应用很多的小背景图像作…...

编程日记 2023/5/23 17:49:47

ToBeWritten之MIPS汇编基础铺垫

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…...

编程日记 2023/4/20 17:22:51

MySQL数据库对数据库表的创建和DML操作

1&#xff0e;创建表user&#xff0c;其中包含id、name、password,其中主键自增&#xff0c;name&#xff0c;唯一是可变长度&#xff0c;最大长度是30&#xff0c;密码&#xff0c;可变长度&#xff0c;最大长度为20&#xff0c;不为空。 以下是创建符合要求的user表的SQL语句…...

编程日记 2023/5/18 9:45:12

【PCB专题】PCB 阻焊层（solder mask）与助焊层（paste mask）有什么区别

一块标准的印刷电路板 (PCB) 通常需要两种不同类型的“罩层 (mask)”。其中阻焊层 (solder mask) 和助焊层 (paste mask) 都是“罩层”，但在 PCB 制造过程中，它们分别用于两个完全不同的部分，因此也存在很大的区别。 阻焊层定义 阻焊层定义了电路板外表面的保护材料涂抹范围…...

编程日记 2023/5/28 2:50:25

ThreeJS-纹理旋转、重复（十一）

旋转 文档&#xff1a;three.js docs 关键代码&#xff1a; //设置旋转中心,默认左下角 docColorLoader.center.set(0.5,0.5); //围绕旋转中心逆时针旋转45度 docColorLoader.rotation Math.PI/4; 完整代码: <template> <div id"three_div"></div>…...

编程日记 2023/5/23 17:51:09

CSDN——Markdown编辑器——官方指导

CSDN——Markdown编辑器——官方指导欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表…...

编程日记 2023/5/23 17:52:18

DN-DETR调试记录

博主在进行DINO实验过程中&#xff0c;发现在提取了3个类别的COCO数据集中&#xff0c;DINO-DETR对car,truck的检测性能并不理想&#xff0c;又通过实验自己的数据集&#xff0c;发现AP值相差不大且较为符合预期&#xff0c;因此便猜想是否是由于DINO中加入了负样本约束导致背景…...

编程日记 2023/5/13 4:17:04

ASP消防网上考试系统设计与实现

本文以ASP和Access数据库来开发服务器端&#xff0c;通过计算机网络技术实现了一个针对消防部队警官的网上考试系统。为了。提高消防部队的工作效率和信息化水平&#xff0c;体现消防部队信息化进程的特色&#xff0c;开发一个适合消防部队的计算机网上考试系统是非常必要的。鉴…...

编程日记 2023/5/23 17:53:29

MongoDB - 数据模型的设计模式

简介 官方文章的地址是 Building with Patterns: A Summary&#xff0c;其中汇总了 12 种设计模式及使用场景。 上述的图表列举了 12 种设计模式及应用场景&#xff0c;主要是以下这些&#xff1a; 近似值模式&#xff08;Approximation Pattern&#xff09;属性模式&#xf…...

编程日记 2023/5/15 14:06:53

3D格式转换工具助力Shapr3D公司产品实现了 “无障碍的用户体验”，可支持30多种格式转换！

今天主要介绍的是HOOPS Exchange——一款支持30多种CAD文件格式读取和写入的工具&#xff0c;为Shapr3D公司提供的重要帮助! Shapr3D是一家有着宏伟目标的公司&#xff1a;将CAD带入21世纪&#xff01;该公司于2016年首次推出其同名应用程序&#xff0c;并将Shapr3D带到了macOS…...

编程日记 2023/4/20 21:02:07

虚拟环境-----virtualenv和pipenv的安装和应用

1.pip install virtualenv 2.pip安装虚拟环境管理包virtualenvwrapper-win 3.创建一个存放虚拟环境的目录&#xff08;建议命名为.env或者.virtualenv&#xff09; 4.配置环境变量&#xff08;变量名&#xff1a;WORKON_HOME,值&#xff1a;上面创建的目录路径&#xff09; …...

编程日记 2023/4/23 14:44:12

awd pwn——LIEF学习

文章目录1. 什么是LIEF2. 加载可执行文件3. 修改ELF的symbols4. ELF Hooking5. 修改got表6. 总结1. 什么是LIEF LIEF是一个能够用于对各种类型的可执行文件&#xff08;包括Linux ELF文件、Windows exe文件、Android Dex文件等&#xff09;进行转换、提取、修改的项目&#xf…...

编程日记 2023/5/15 14:09:11

亚商投资顾问 早餐FM/0330 6G发展持开放态度

01/亚商投资顾问 早间导读 1.工信部副部长&#xff1a;中国对6G发展持开放的态度已成立工作组推动关键技术研究 2.易纲、周小川最新发声 中国加快绿色低碳发展的决心坚定不移 3.中移动出手&#xff01;450亿溢价包圆邮储银行定增股份 4.海南全面启动全岛封关运作准备 免税消…...

编程日记 2023/5/23 17:55:01

cookie和session的区别

文章目录cookie和session的区别1. 存储位置不同2. 生命周期不同3. 存储数据大小不同4. 数据类型不同5. 安全性不同cookie和session的区别 1. 存储位置不同 cookie&#xff1a;cookie数据保存在客户端。 session&#xff1a;session数据保存在服务器端。 2. 生命周期不同 s…...

编程日记 2023/5/15 14:12:04

android 人脸考勤机 卡死原因

Android人脸考勤机卡死的原因可能有以下几个方面&#xff1a; 硬件限制&#xff1a;如果使用的设备性能较低&#xff0c;如处理器、内存、存储等都不足以支持应用程序的运行&#xff0c;就容易出现卡顿、卡死等问题。 代码优化&#xff1a;代码的优化也是影响应用程序性能的重…...

编程日记 2023/5/25 7:19:39

安装k8s工具之三-kube-ansible

一、介绍 Kube-ansible 是一个开源的 Kubernetes 部署和管理工具&#xff0c;它使用 Ansible 自动化工具来管理 Kubernetes 集群。Kube-ansible 提供了一套可扩展的框架&#xff0c;可以方便地部署和管理 Kubernetes 集群。 Kube-ansible 的主要特点包括&#xff1a; 支持多…...

编程日记 2023/4/26 12:10:14

《程序员面试金典（第6版）》面试题 08.09. 括号（回溯算法，特殊的排列问题，C++）

题目描述 括号。设计一种算法&#xff0c;打印n对括号的所有合法的&#xff08;例如&#xff0c;开闭一一对应&#xff09;组合。 说明&#xff1a;解集不能包含重复的子集。 例如&#xff0c;给出 n 3&#xff0c;生成结果为&#xff1a; ["((()))","(()())…...

编程日记 2023/4/26 3:57:08

大厂面试篇--2023软件测试八股文最全文档，有它直接大杀四方

前言 已经到了金三银四的黄金招聘季节了&#xff0c;还在准备面试跳槽涨薪的小伙伴们可以看看本篇文章哟&#xff0c;这里呢笔者就不多说废话了直接上干货&#xff01;答案已整理好&#xff0c;文末拿去即可&#xff01;非常好用&#xff01; 一、字节跳动测试面经篇 1、在搜…...

编程日记 2023/5/24 3:13:31

LeetCode326_326. 3 的幂

LeetCode326_326. 3 的幂 一、描述 给定一个整数&#xff0c;写一个函数来判断它是否是 3 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 整数 n 是 3 的幂次方需满足&#xff1a;存在整数 x 使得 n 3的x次方 示例 1&#xff1a; 输…...

编程日记 2023/5/23 17:56:17

Redis第九讲 Redis之Hash数据结构Dict字典哈希算法与hash存储过程

Redis dict使用的哈希算法 前面提到，一个kv键值对，添加到哈希表时，需要用一个映射函数将key散列到一个具体的数组下标。 Redis 目前使用两种不同的哈希算法： MurmurHash2 是种32 bit 算法：这种算法的分布率和速度都非常好；Murmur哈希算法最大的特点是碰撞率低，计算速度…...

编程日记 2023/4/26 19:32:02

2个月月活突破1亿，增速碾压抖音，出道即封神的ChatGPT，现在怎么样了？ChatGPT它会干掉测试？

从互联网的普及到智能手机&#xff0c;都让广袤的世界触手而及&#xff0c;如今身在浪潮中的我们&#xff0c;已深知其力。 前阵子爆火的ChatGPT&#xff0c;不少人保持观望态度。现如今&#xff0c;国内关于ChatGPT的各大社群讨论&#xff0c;似乎沉寂了不少&#xff0c;现在…...

编程日记 2023/5/30 12:22:52

Linux常用文件目录操作指令

linux 文件目录操作指令pwd 指令ls 指令cd 指令mkdir 指令rmdir 指令touch 指令cp 指令rm 指令mv 指令cat 指令more 指令less 指令> 和 >> 指令echo 指令head 指令tail 指令ln 指令history 指令pwd 指令 基本语法 pwd (显示当前工作目录的绝对路径) ls 指令 基本语法…...

编程日记 2023/5/14 8:52:35

阿哈罗诺夫——玻姆效应（AB效应）

规范变换 规范场是与物理规律的定域规范变换不变性相联系的物质场纵场的旋度为零,横场的散度为零 由于 因此 为了消除此影响&#xff0c;我们需要对标势场做规范 库伦规范(Coulomb gauge):使麦克斯韦方程组自然满足静电场的条件 洛伦兹规范 &#xff08;Lorentz gauge&#x…...

编程日记 2023/5/17 2:27:55

sed使用

概述 Linux sed 命令是利用脚本来处理文本文件。sed 可依照脚本的指令来处理、编辑文本文件。Sed 主要用来自动编辑一个或多个文件、简化对文件的反复操作、编写转换程序等。 语法 sed [-hnV][-e<script>][-f<script文件>][文本文件]注意&#xff1a;-e是可以省…...

编程日记 2023/4/26 4:53:53

redhat9忘记root密码操作(普通用户也适用)

目录 一.编辑启动条目 二、按enter键 三、重新挂载/sysroot&#xff0c;并且修改/sysroot的权限为rw 四、将根目录修改到/sysroot 五、修改密码 5.1修改root密码 5.2 修改普通用户的密码 六、创建文件 七、退出 八、测试 一.编辑启动条目 进入以下页面的时候&#xff0…...

编程日记 2023/5/15 22:21:17

Android 五种启动模式小结

ActivityRecord、TaskRecord、ActivityStack区别 ActivityRecord对应着一个Activity实例&#xff0c;保存了Activity所有相关信息 TaskRecord指的是一个任务栈&#xff0c;里面包含多个ActivityRecord ActivityStack用于管理TaskRecord 五种启动模式 Standard模式 默认的启…...

编程日记 2023/5/30 12:24:12

算法竞赛ICPC、CCPC、NIO、蓝桥杯、天梯赛

算法竞赛前言一、为什么学习算法竞赛二、学习算法的阶段三、算法竞赛具体学习内容1、基础数据结构1.1、链表1.1.1、动态链表1.1.2、静态链表1.1.3、STL list1.2、队列1.2.1、STL queue1.2.2、手写循环队列1.2.3、双端队列和单调队列1.2.4、优先队列1.3、栈1.3.1、STL stack1.3.…...

编程日记 2023/5/25 17:19:37

图像分割技术及经典实例分割网络Mask R-CNN（含基于Keras Python源码定义）

图像分割技术及经典实例分割网络Mask R-CNN&#xff08;含Python源码定义&#xff09; 文章目录图像分割技术及经典实例分割网络Mask R-CNN&#xff08;含Python源码定义&#xff09;1. 图像分割技术概述2. FCN与语义分割2.1 FCN简介2.2 反卷积2.2 FCN与语义分割的关系3. Mask …...

编程日记 2023/5/30 12:25:44

元宇宙和医疗保健

让我们明确定义医疗保健领域的元宇宙 元宇宙这个概念已经有几十年的存在历史了&#xff0c;尽管当Facebook改名为Meta时&#xff0c;这个话题才成了头版头条。现在卫生部门的领导们也开始关注这个话题。 数字卫生领域对元宇宙的定义是如今的医疗科技主要是由医疗软件解决方案…...

编程日记 2023/5/15 22:23:46

iOS_从相机或相册里扫描二维码或条形码

文章目录1. 从相机里扫描1.1 申请相机权限1.2 创建Scanner1.3 开始扫描1.4 处理扫描结果2. 从相册里扫描2.1 获取相册权限2.2 打开相册2.3 获得选择结果2.4 解析相片中的二维码或条形码1. 从相机里扫描 1.1 申请相机权限 导入&#xff1a; import AVFoundation在项目的 Info.…...

编程日记 2023/5/15 14:10:54