精灵图
一个网页中往往会应用很多小的背景图片作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度....其实就是放一个盒子,然后给盒子添加一个背景图片,移动背景图片的位置,让想要的图案出现在盒子里.
下面做一个案例,使用下面的字母图,用精灵图的方式将自己的名字拼出来
<!...精灵图是由诸多优点的,但是缺点很明显:
1.图片文件还是比较大的.
2.图片本身放大和缩小会失真.
3.一旦图片制作完毕想要更换非常复杂....字体图标下载:
icomoon字库
阿里icofont字库
如何使用字体图标:
这个比较麻烦,我一步一步讲解....现在我们放一个span,里面插入我们想要的字体图标.
我们先打开demo文件:
里面有我下载好的图标.
复制想要的图标后面的小长方形,粘贴到span中.