CSS 精灵图 + 字体图标
高级技巧
1·精灵图
1.基于设计稿明确盒子大小(宽 和 高)
2.使用像素大厨等工具测量图片偏移坐标;
3.布局时给盒子指定:width、height 和 background 属性:
width: 60px;
height: 60px;
background: url(./images/sprites.png) no-repeat -px -px;
2·字体图标
网站:
- icomoon字库
https://icomoon.io/(opens new window)
- iconfont 阿里字库
https://www.iconfont.cn/
第一步:到网站下载字体图标,把下载包里面的 fonts 文件夹放入页面根目录下
第二步:字体图标引入,一定要注意字体文件路径问题
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><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;}/* 第三步声明字体*/i {/*font-family: "icomoon"一定要写 */font-family: "icomoon";color: red;font-size: 40px;}</style></head><body><!-- 第二步准备一个标签--><i></i> or <i>'\eqie'</i></body>
</html>
3·css三角形
- 三角形的形成就是由宽高为0的盒子的颜色边框和transparent透明边框的粗细相互构成,本质是个长方形.
- 设置行高和字体,以保证兼容性:
line-height: 0; font-size: 0;
4·鼠标样式
cursor: default; 默认样式
cursor: pointer; 小手
cursor: move; 移动
cursor: text; 文本
cursor: not-allowed; 禁止
cursor: zoom-in; 放大(后期搭配js使用)
cursor: zoom-out; 缩小(后期搭配js使用)
5·表单轮廓
input { outline: none; }
给表单添加,可去掉默认的蓝色边框.
6·禁止表单域拖拽
textarea{ resize: none; }
7·图片文字对齐
vertical-align 属性
vertical-align: top | middle | baseline | bottom
vertical-align : 顶部 | 中部 | 基线 | 底部
图片底部空白解决方案
- 给图片添加
vertical-align: top | middle | bottom
也可以解决行内,行内块元素底部缝隙 - 把图片转换为块级元素 display: block;
8·溢出文字显示省略号
单行文字溢出
/* 1. 强制在一行显示文本,默认 normal 会自动换行 */
white-space: nowrap;/*2 . 超出的部分隐藏 */
overflow: hidden;/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
多行文字溢出
/* 1. 超出的部分隐藏 */
overflow: hidden;/* 2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
多行文字溢出有兼容性问题,在实际工作中一般推荐后端完成,后端可以限制字数
9·margin负值解决盒子边框
float: left; margin-left: -1px;
鼠标放在盒子上显示边框
- 盒子没有定位
ul li:hover {position: relative;border: 1px solid color;
}
- 盒子有定位
ul li:hover {z-index: 1;border: 1px solid color;
}
CSS 精灵图 + 字体图标相关推荐
- CSS / 精灵图+字体图标
目录 精灵图 字体图标 字体图标的使用 字体图标的追加 字体图标加载的原理 精灵图 当网页中的图像过多,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,大大降低页面的加载速度 为了有效地减 ...
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align
15. 常见技巧 15.1 精灵图 出现原因 一个网页往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...
- CSS 6 精灵图 字体图标 CSS三角 用户界面样式 vertical-align 溢出文字省略号 常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
- CSS:精灵图 字体图标
一.精灵图 使用精灵图的原因 减少故武器的访问次数,防止服务器负荷过重 精灵图原理 把网页制作需要用到的小图片组合成网页效果做成一张大图传至服务器,网页制作时通过background-position ...
- 三十二、精灵图字体图标
一.精灵图 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此 ...
- 17-CSS3 高级技巧 精灵图 字体图标 滑动门
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- CSS精灵图代码示例
什么是css Sprite 当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户.然而,一个网页中往往包含大量的图像资源(例如在页面中展示的 ...
最新文章
- 限制TensorFlow只在CPU上运行的方法
- 【干货】你不知道的 Linux 命令使用技巧
- 【NLP】NLP任务增强:通过引入外部知识来提供额外信息
- java设计模式懒汉_java设计模式-懒汉设计模式
- IoT 爆发前夕,企业架构要面对哪些变革
- 英特尔技术领导委员会(GTC) 专题系列之主席致辞
- springboot项目elasticsearch6.x transportClient切换为restHighLevelClient(包含restClient)
- 基于comsol软件利用射线追踪方法仿真偶极子天线在一个实验室中的电场分布
- 游戏测试和软件测试有什么区别?
- c语言中实型变量的三种类型,在C语言中的实型变量分为两种类型..doc
- Flutter技术在会展云中大显身手
- 电镀用整流电源设计matlab,高功率因数的大功率开关电镀电源研究
- 如何求解二元一次不定方程的整数解
- 5G原理,5G给生活的影响,5G影响的行业
- VLookup怎么用详细步骤?VLookup函数的使用方法及实例
- 抓取图片拼接成全景图
- FXLMS主动降噪的simulink建模与仿真
- Android挂断电话最新教程
- 使用函数输出一个整数的逆序数
- 2021JavaScript面试题(最新)不定时更新(2021.11.6更新)