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

精灵图，字体图标，CSS3三角

news 2025/11/9 9:58:56

精灵图

1.1为什么需要精灵图

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

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

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

1.2精灵图（sprites)的使用

使用精灵图核心

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

使用精灵图的核心总结：

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

字体图标

2.1.字体图标的产生

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

精灵图有很多优点，但缺点也很明显

图片文件还是比较大的
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

此时，字体图标技术的出现很好地解决了以上问题。

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

2.2字体图标的优点

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

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

总结：

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

2.3字体图标的下载

推荐下载网站：

icomoon字库 http://icomoon.io

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

2.4.1字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

2.4字体图标的引入

在CSS样式中全局声明字体：简单理解吧这些字体文件通过CSS引入到我们的页面中。

一定注意字体文件路径的问题。

@font-face {

font-family:'icomoon';

src: url('fonts/icomoon.eot?7kkyc2');

3.html标签内添加小图标。

<span> </span>

2.5字体图标的追加

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

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

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

 <style>.div {width: 0;height: 0;line-height: 0;font-size: 0;border: 50px solid transparent;border-left-color: pink;}</style></head>
<body><div></div>

CSS用户界面样式

4.1鼠标样式 cursor

li {cursor: pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

4.2轮廓线outline

给表单添加outline 0；或者outline： none；样式之后，就可以去掉默认的蓝色边框。

input {outline: none;}

4.3防止拖拽文本域resize

实际开发中，我们文本域右下角不可以拖拽的。

textarea{ resize: none;}

5.vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和二位女子垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align: baseline |top |middle| bottom

值	描述
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端于行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端于行中最低元素的顶端对齐

5.1图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。

此时可以图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

5.2解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加vertical-align：middle|top|bottom等

2.把图片转换为块级元素display:block;

6.溢出的文字省略号显示

1.单行文本溢出显示省略号

必须满足三个条件

1.先强制一行内显示文本

white-space：nowrap（默认normal自动换行）

2.超出的部分隐藏

overflow：hidden；

3.文字用省略号替代超出的部分

text-overflow :ellipsis;

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

<style>div {width: 150px;height: 65px;background-color: pink;margin: 100px auto;overflow: hidden;/*文字溢出时，用省略号来显示*/text-overflow: ellipsis;/*弹性伸缩盒子模型展示*/display: -webkit-box;/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 3;/*设置或检索伸缩盒对象的子元素的排列方式*/-webkit-box-orient: vertical;}</style>
</head>
<body><div>啥也不说，此处省略一万字侯明昊真好看你也好看大家都好看啥也不说，此处省略一万字侯明昊真好看你也好看大家都好看</div>
</body>
</html>

7.常见布局技巧

1.margin负值运用

1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）

css三角钱强化

        width: 0;height: 0;border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;

 <style>.box {width: 0;height: 0;/* border-top: 100px solid transparent;border-right: 50px solid red;border-bottom: 0 solid blue;border-left: 0 solid green;*/border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-size: 700;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 15px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style></head>
<body><div class="box"></div><div class="price"><span class="miaosha">$1650<i></i></span><span class="origin">$5650</span></div>
</body>
</html>

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。

简单理解：CSS初始化是指重设浏览器的样式。

每个网页都必须首先进行CSS初始化。

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效避免浏览器解释CSS代码时候出现乱码的问题。

精灵图，字体图标，CSS3三角

精灵图 1.1为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少…...

编程日记 2024/2/15 11:29:38

.NET Core性能优化技巧

.NET Core作为一个跨平台的开源框架，以其高效、灵活和可扩展的特性受到了广大开发者的青睐。但在实际开发中，如何确保应用程序的性能始终是一个关键的问题。本文将介绍十大.NET Core性能优化技巧，帮助开发者提升应用程序的性能。 1. 使用异步…...

编程日记 2024/2/15 11:28:36

人类智能远远超越了物理与数理范畴

德国哲学家黑格尔曾这样写道，我们越是熟悉的东西，就越不清楚它。这或许意味着当我们对某个事物非常熟悉时，可能会陷入一种思维定势，导致我们无法客观地认识和理解它。这种思维定势可能来自于习惯、传统观念或者个人经验&#xff0…...

编程日记 2024/2/15 11:24:33

数据库管理-第149期 Oracle Vector DB AI-01（20240210）

数据库管理149期 2024-02-10 数据库管理-第149期 Oracle Vector DB & AI-01（20240210）1 机器学习2 向量3 向量嵌入4 向量检索5 向量数据库5 专用向量数据库的问题总结数据库管理-第149期 Oracle Vector DB & AI-01（20240210&#xf…...

编程日记 2024/2/15 11:23:32

FlinkSql通用调优策略

历史文章迁移，稍后整理使用DataGenerator 提前进行压测，了解数据的处理瓶颈、性能测试和消费能力开启minibatch："table.exec.mini-batch.enabled", "true" 开启LocalGlobal 两阶段聚合："table.exec.m…...

编程日记 2024/2/15 11:21:28

Linux在云计算领域的重要作用

在云计算领域，Linux扮演着至关重要的角色。以下是Linux在云计算领域中的重要作用： 稳定性和安全性：Linux操作系统具有稳定性和安全性，可以有效地保护用户的数据安全。它具有各种安全功能，可以防止未经授权的访问&…...

编程日记 2024/2/15 11:18:23

sqlserver2012 解决日志大的问题 bat脚本

要解决SQL Server 2012中事务日志过大的问题，你可以创建一个批处理脚本（.bat）来定期备份事务日志。下面是一个示例批处理脚本，该脚本使用SQLCMD工具来执行事务日志备份： echo off set "DBNAMEYourDatabaseName&qu…...

编程日记 2024/2/15 11:12:17

SpringCloud之Eureka注册中心和负载均衡

SpringCloud之Eureka注册中心和负载均衡微服务技术栈认识微服务单体架构分布式架构微服务微服务拆分及远程调用微服务拆分注意事项 Eureka注册中心提供者与消费者原理分析服务调用出现的问题Eureka的作用使用流程1、搭建EurekaServer2、注册user-service3、在order-service完…...

编程日记 2024/2/15 11:11:17

Python 数据可视化之山脊线图 Ridgeline Plots

文章目录一、前言二、主要内容三、总结 🍉 CSDN 叶庭云：https://yetingyun.blog.csdn.net/ 一、前言 JoyPy 是一个基于 matplotlib pandas 的单功能 Python 包，它的唯一目的是绘制山脊线图 Joyplots（也称为 Ridgeline Plots&…...

编程日记 2024/2/15 11:06:12

VTK 三维场景的基本要素(相机) vtkCamera 相机的运动

相机的运动当物体在处于静止位置时，相机可以在物体周围移动，摄取不同角度的图像移动移动分为相机的移动，和相机焦点的移动；移动改变了相机相对焦点的位置，离焦点更近或者更远；这样就会改变被渲染的物体…...

编程日记 2024/2/15 11:03:09

C++ //练习 6.53 说明下列每组声明中的第二条语句会产生什么影响，并指出哪些不合法（如果有的话）。

C Primer（第5版） 练习 6.53 练习 6.53 说明下列每组声明中的第二条语句会产生什么影响，并指出哪些不合法（如果有的话）。 (a) int calc(int &, int &);int calc(const int &, const int &); (b) int …...

编程日记 2024/2/15 11:01:07

缓慢变化维常用的处理方法

什么是缓慢变化维维度在数仓中，表往往会被划分成两种类型，一种是事实表，另一种是维度表，举个例子，比如说： ❝ 2024年2月14日，健鑫在12306上买了两张火车票，每张火车票400元&…...

编程日记 2024/2/15 10:57:01

free pascal：fpwebview 组件通过JSBridge调用本机TTS

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\js_bidir 学习 js_bidir.lpr ，编写 js_bind_speak.lpr 如下，通过JSBridge调用本机…...

编程日记 2024/2/15 10:50:53

C语言静态库深入剖析

在C语言编程实践中，库是代码复用和模块化开发的重要基础结构。静态库作为其中一种主要的库类型，其内容在编译链接阶段即被完整地嵌入到最终生成的可执行文件中，从而使得程序在运行时无需外部依赖。本篇博客将系统性、详细地剖析C语言静态库的…...

编程日记 2024/2/15 10:47:50

A股上市以来涨幅排行榜

一、统计数据说明 1. 涨幅排行榜是根据股价的后复权价格计算的，该价格考虑了分红送股拆股等事件对股价的影响，相当于是分红再投资的股价。 2. 年化投资收益率，是根据IPO收盘价至今涨幅计算的复合年化收益率。例如，假设一个股票上…...

编程日记 2024/2/15 10:45:49

鸿蒙开发系列教程（十八）--页面内动画（1）

页面内的动画显示动画语法：animateTo(value: AnimateParam, event: () > void): void 第一个参数指定动画参数第二个参数为动画的闭包函数。如：animateTo({ duration: 1000, curve: Curve.EaseInOut }, () > {动画代码}） dura…...

编程日记 2024/2/15 10:43:46

Web基础01-HTML+CSS

目录一、HTML 1.概述 2.html结构解析 3.HTML标签分类 4.HTML标签关系 5.HTML空元素 6.HTML属性 7.常用标签 （1）HTML标签 （2）标题标签 （3）换/折行标签 （4）段落标签 &am…...

编程日记 2024/2/15 10:40:44

Linux命令行全景指南：从入门到实践，掌握命令行的力量

目录知识梳理思维导图： linux命令入门为什么要学Linux命令什么是终端什么是命令关于Linux命令的语法 tab键补全关于命令提示符特殊目录常见重要目录 /opt /home /root /etc /var/log/ man命令 shutdown命令 history命令 which命令 bash…...

编程日记 2024/2/15 10:39:43

蓝桥杯嵌入式第11届真题(完成) STM32G431

蓝桥杯嵌入式第11届真题(完成) STM32G431 题目代码程序和之前的大同小异，不过多解释 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief :…...

编程日记 2024/2/15 10:37:41

ChatGPT高效提问—prompt实践（教师助手）

ChatGPT高效提问—prompt实践（教师助手） 下面来看看ChatGPT在教育领域有什么用途。首先设定ChatGPT的角色为高中教师助手。输入prompt: ChatGPT输出： 教师助手的角色已经设置完成。下面通过几种不同的情景演示如何使用。 1.1.1 制定…...

编程日记 2024/2/15 10:36:40

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2025/11/7 20:04:06

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/8 7:49:49

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/11/7 7:02:03