精灵图等

1.精灵图

1.1为什么使用精灵图

显示一张图片需要一条请求，显示n张图片需要n条请求 因此采用精灵技术，有效减少服务器发生和请求的次数，提高页面加载速度。

1.2使用精灵图核心

主要针对背景图，就是把多个背景图片整合到一张大图中 例如：

移动背景图片位置，此时可以用background-position,移动的距离就是这个目标图片的x和y坐标
用法：
background: url("精灵图的地址") no-reoeat x坐标 y坐标

2.字体图标

2.1为什么 对标精灵图 精灵图的缺点：

1. 图片文件还是比较大的
2. 放大或缩小容易失真
3. 一旦图片制作完成更换十分麻烦

字体图标来解决，展示的属于图标,本质属于字体 由此可以得出字体图标的使用场景：网页中通用、常用的小图标 字体图标的优点：

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

2.2字体图库的下载

1.http://icomoon.io
2.https://www.iconfont.cn/推荐这个

3.css三角形制作

原理：三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

点击查看代码

 .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-right: 10px solid blue;
            border-bottom: 10px solid purple;
            border-left: 10px solid white;
        }

效果