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

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

news 2025/12/25 20:06:05

 精灵图

1.1为什么需要精灵图

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

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

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

1.2精灵图（sprites)的使用

使用精灵图核心

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

 使用精灵图的核心总结：

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

 

字体图标

2.1.字体图标的产生

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

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

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

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

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

2.2字体图标的优点

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

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

总结：

  1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
  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为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰&#xff0c;当网页中的图像过多时&#xff0c;服务器就会频繁的接受和发送请求图片&#xff0c;造成服务器请求压力过大&#xff0c;这将大大降低页面的加载速度。 因此&#xff0c;为了有效地减少…...

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

.NET Core性能优化技巧

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

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

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

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

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

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

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

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

FlinkSql通用调优策略

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

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

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

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

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

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

要解决SQL Server 2012中事务日志过大的问题&#xff0c;你可以创建一个批处理脚本&#xff08;.bat&#xff09;来定期备份事务日志。下面是一个示例批处理脚本&#xff0c;该脚本使用SQLCMD工具来执行事务日志备份&#xff1a; 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

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

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

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

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

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

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

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

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

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

什么是缓慢变化维 维度 在数仓中&#xff0c;表往往会被划分成两种类型&#xff0c;一种是 事实表&#xff0c;另一种是维度表&#xff0c;举个例子&#xff0c;比如说&#xff1a; ❝ 2024年2月14日&#xff0c;健鑫在12306上买了两张火车票&#xff0c;每张火车票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 &#xff0c;编写 js_bind_speak.lpr 如下&#xff0c;通过JSBridge调用本机…...

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

C语言静态库深入剖析

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

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

A股上市以来涨幅排行榜

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

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

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

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

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

Web基础01-HTML+CSS

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

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

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

目录 知识梳理思维导图&#xff1a; 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 题目 代码 程序和之前的大同小异&#xff0c;不过多解释 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief :…...

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

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

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

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

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/12/25 4:14:53

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/12/24 20:33:55

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2025/12/24 22:31:51

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2025/12/25 5:07:46

DAY 45 超大力王爱学Python

来自超大力王的友情提示&#xff1a;在用tensordoard的时候一定一定要用绝对位置&#xff0c;例如&#xff1a;tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾&#xff1a; tensorboard的发展历史和原理tens…...

编程新知 2025/12/25 10:50:25

Axure零基础跟我学：展开与收回

亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！ Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题：Axure菜单展开与收回 课程视频：...

编程新知 2025/12/25 18:13:05