CSS精灵图及字体图标
一、精灵图（重点）
1.1为什么需要精灵图
网页中往往会有很多的小背景图像作为修饰，当频繁向服务器发送请求时，服务器压力过大，降低加载速度。
使用精灵图的目的：减少服务器的请求次数，提高加载速度
例子
1.2精灵图的使用
1.主要针对于小的背景图片
2.借助于背景位置来实现----background-position
3.一般都是负值。
1.3精灵图的缺点
1.文件相对于来说还是较大
2.图片本身放大和缩小会失真
3.制作完成后想要更换非常复杂
案例
二、字体图标（重点）
2.1字体图标的优点
1.减少服务器请求，比一般的图像要小
2.本质就是文字，可以添加样式，css属性
3.兼容更多的浏览器
2.2 字体图标使用步骤
1.字体图标的下载
2.字体图标的引入 （引入到我们html页面中）
3.添加类名
2.3 字体图标的下载
推荐下载网站：
阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库
2.4字体图标的引入
下载完毕之后，注意原先的文件不要删，后面会用。
把下载包里面的 fonts 文件夹放入页面根目录下
2.在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。
在你的项目文件夹中引入css文件，然后给标签添加iconfont和对应的类名
三、网页三角的实现
3.1介绍
网页中常见得三角可以直接用css代码实现，不用字体图标和精灵图
通过使用transparent透明度来实现上下左右四个方位的三角形
四、CSS 用户界面样式
4.1 什么是界面样式
更改一些用户操作样式，以便提高更好的用户体验。
更改用户的鼠标样式
表单轮廓
防止表单域拖拽
4.1.1 鼠标样式 cursor
li** {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
4.1.2轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input** { outline: none; }
4.1.3防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea{ resize: none; }
五、vertical-align 属性应用
用于设置图片或者表单(行内块元素）和文字垂直对齐。但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : 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;
七、常见布局技巧
巧妙利用一个技术更快更好的布局：
margin负值的运用
文字围绕浮动元素
行内块的巧妙运用
CSS三角强化
7.1. margin负值运用
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加相对定位（保留位置），如果有定位，则加z
index）
7.2 文字围绕浮动元素
7.3 行内块巧妙运用
页码在页面中间显示:
把盒子转换为行内块， 之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
CSS精灵图及字体图标相关推荐
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- CSS精灵图、字体图标
精灵图.字体图标 文章目录 精灵图.字体图标 精灵图 原理 代码 字体图标 使用流程 1.下载兼容性字体文件包到本地 2.把字体文件包引入到html页面中 精灵图 一个页面上可能有很多小图标,每个图标 ...
- CSS精灵图和字体图标及下载
精灵图和字体图标 精灵图 1.1为什么需要精灵图? 1.2精灵图的使用 1.3精灵图总结 字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.4字体图 ...
- CSS精灵图和字体图标
精灵图 精灵技术目的: 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度. 使用非常简单,只是把所有图片放在一张大图上,然后通过背景图片添加,在移动位置,放在需要的位置处. 随便下载了一个 ...
- CSS - 精灵图和字体图标
文章目录 前言 一.精灵图的使用 二.字体图标 下载字体图标 引入字体图标 追加字体图标 前言 为了有效地减少服务器接收和发送请求的次数, 提高页面的加载速度, 出现了CSS精灵技术. 一.精灵图的使 ...
- html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
- 【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化 思 ...
- CSS精灵技术与字体图标
CSS精灵技术(sprite) 精灵技术产生的背景 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- web前端入门学习 css（7）css高级技巧 （精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
最新文章
- NodeJS入门--环境搭建 IntelliJ IDEA
- 基于Docker的SaaS解决方案
- oracle查看临时表空间文件,Oracle-临时表空间
- 数据结构和算法分析：第六章 优先队列（堆）
- 软件工程--第十三周学习进度
- jdk注解_我们正在下注：这个注解很快就会出现在JDK中
- Git Bash推送GitHub不成功---密钥设置
- 闭包造成的内存泄露怎么解决？
- 各种initcall的执行先后顺序（module_init、postcore_initcall、arch_initcall、subsys_initcall、 fs_initcall）【转】...
- python结构体_Python对象初探
- C# 各版本新增功能
- css3和jquery实现的可折叠导航菜单(适合手机网页)
- Kotlin实战【三】表示与选择
- linux6的关机快捷键是,LINUX关机快捷键是什么?
- 自回归模型 java_Eviews的ARIMA（差分自回归移动平均模型）模型入门操作指南
- 前端之ps的基本操作
- 如何为搭建的网站配置自己的域名 1-2
- Flyme应用中心应用认领
- HTML+CSS大作业HTML5期末大作业 旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游
- ❤️学懂C语言文件操作读这篇就够了（万字总结，附习题）❤️