app下导航，图标截取某些部分定位

<ul class="ui-tiled  ui-row">

    <li data-href=" #" class=" ui-col-20  "> 

      <div class="spanicon"  style="background-position: 0px -0px;"></div>

      <div class="title">首页</div>

    </li>

    <li data-href="#" class=" ui-col-20 " >

    <div class="spanicon" style="background-position: 0px -32px;"></div>

      <div  class="title">主页</div>

    </li>

    <li data-href="#" class=" ui-col-20">

     <div class="spanicon"  style="background-position: 0px -64px;"></div>

      <div  class="title">搜索</div>

    </li>

    <li data-href="#" class=" ui-col-20 " >

      <div class="spanicon"  style="background-position: 0px -96px;"></div>

      <div  class="title">厂商</div>

    </li>

    <li data-href="#" class=" ui-col-20 ">

       <div class="spanicon"  style="background-position: 0px -128px;"></div>

      <div  class="title">客户</div>

    </li>
  </ul>

<style>

.spanicon {
width: 32px;
height: 32px;
background: url(../img/vip/icon_qqlevel_sprite.png) no-repeat;
margin-top: 2px;

}

.title {
vertical-align: middle;
text-align: center;
font-size: 10px;  

}

.ui-tiled {

  display: -webkit-box;

  width: 100%;

  -webkit-box-sizing: border-box; }

.ui-tiled li {

  -webkit-box-flex: 1;

  width: 100%;

  text-align: center;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-box-pack: center;

  -webkit-box-align: center; }

.ui-row {

  display: block;

  overflow: hidden; }

.ui-col-20 {

  width: 20%; }

</style>