目的：

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

多个背景小图片集合到一张图片上，作为背景
然后通过精灵图中不同位置的小图，要精确定位到图片中的某个小图

  1. 量出要展示的图标的大小，作为盒子的宽高值
  2. 通过background-image给盒子引入这张大图中（精灵图）
  3. 量出要展示的图标的左上角的坐标位置，把位置值设置到background-position中，进行移动，把图标展示在盒子中
  • 其中最关键的是使用background-position属性精确地定位。
  • background-position -水平 -垂直
  • 需要得到精灵图的精准定位 和宽高

    小三角

    网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
    1. div {
    2.    width: 0; 
    3.   height: 0;
    4.   border: 50px solid transparent;
    5.   border-bottom: 50px solid blue;
    6.   line-height:0;
    7.   font-size: 0;
    8. }
  1. 用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明色就好了
  4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;