11.1、example：雪碧图、九宫格、sprite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图 九宫格 sprite</title>
    <style type="text/css">

        .icon{
        display: inline-block;
        width: 48px;
        height: 48px;
        margin: 10px auto 0;
        background: url(https://upload-images.jianshu.io/upload_images/16660341-4e343a9e157dd6ce.png);
        background-repeat: no-repeat;
        background-size: 432px 48px;
        vertical-align: middle;
      }

      .eight {
          background-position: -0px -0px;
      }

      .five {
          background-position: -48px -0px;
      }

      .four {
          background-position: -96px -0px;
      }

      .tow {
          background-position: -144px -0px;
      }

      .one {
          background-position: -192px -0px;
      }

      .nine {
          background-position: -240px -0px;
      }

      .seven {
          background-position: -288px -0px;
      }

      .three {
          background-position: -336px -0px;
      }

      .six {
          background-position: -384px -0px;
      }

      ul{
        padding: 0px;
        margin: 0px;
        list-style: none;
      }

      p{
        margin: 0;
      }

      .box-container{
        width: 300px;
        height: 300px;
        overflow: hidden;
      }

      .list{
        width: 300px;
        height: 300px;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        margin-left: -1px;
      }

      .item{
        float: left;
        width: 100px;
        height: 100px;
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
        box-sizing: border-box;
      }

      .item a{
        text-decoration: none;
        color: #000;
        text-align: center;
      }

      .item-link{
        display: block;
        width: 100%;
        height: 100%;
      }

      .item .item-text{
        margin-top: 10px;
      }

    </style>
</head>
<body>
  <div class="box-container">
    <ul class="list">
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon one"></i>
          <p class="item-text">第一</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon two"></i>
          <p class="item-text">第二</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon three"></i>
          <p class="item-text">第三</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon four"></i>
          <p class="item-text">第四</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon five"></i>
          <p class="item-text">第五</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon six"></i>
          <p class="item-text">第六</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon seven"></i>
          <p class="item-text">第七</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon eight"></i>
          <p class="item-text">第八</p>
        </a>
      </li>
      <li class="item">
        <a class="item-link" href="">
          <i class="item-icon icon nine"></i>
          <p class="item-text">第九</p>
        </a>
      </li>
    </ul>
  </div>
</body>
</html>
11.1、example：雪碧图、九宫格、sprite

推荐阅读更多精彩内容
