文章目录
一、精灵图
1.什么是精灵图？
精灵图是一种网页图片的应用技术。主要针对背景图片使用，把多个小背景图片合成一个大的图片
2.为什么要用精灵图
（1）减少服务器的访问量，加快加载速度
（2）方便管理这些背景图图片
3.如何使用
1.用Macromedia Fireworks软件加载
2.用切片工具 查看所需要图标的x和y轴的位置
3.使用background-position写上x和y坐标
注：一般情况下往左和往上是负值
4.演示
例：提取图片中的x字母
代码如图：
<style>
span {
display: inline-block;
}
.x {
width: 109px;
height: 121px;
background: url(abcd.jpg) -254px -548px;
}
</style>
</head>
<body>
<span class="x"></span>
</body>
效果图：
二、字体图标
1.常用的字体图表网站
1.icomoon字库 网址：https://icomoon.io/
2.阿里iconfont字库 网址：https://www.iconfont.cn/
2.如何引入
1.把fonts文件夹放入根目录
2.字体声明
3.引入对应图标
4.指定相应字体样式
总结
感谢大家的观看
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
