158基于matlab的用于分析弧齿锥齿轮啮合轨迹的程序

雪碧图CSS Sprite的应用

好处优点

条件

原理

background-position属性

拼图

代码

<div id="content">
  <ul class="content">
    <li class="cat-1">
      <i></i>
      <h3>女装/男装/内衣</h3>
    </li>
    <li class="cat-2">
      <i></i>
      <h3>鞋靴/箱包/配件</h3>
    </li>
    <li class="cat-3">
      <i></i>
      <h3>童装玩具/孕产/用品</h3>
    </li>
    <li class="cat-4">
      <i></i>
      <h3>家电/数码/手机</h3>
    </li>
    <li class="cat-5">
      <i></i>
      <h3>美妆/洗护/保健品</h3>
    </li>
    <li class="cat-6">
      <i></i>
      <h3>珠宝/眼镜/手表</h3>
    </li>
    <li class="cat-7">
      <i></i>
      <h3>运动/户外/乐器</h3>
    </li>
    <li class="cat-8">
      <i></i>
      <h3>游戏/动漫/影视</h3>
    </li>
    <li class="cat-9">
      <i></i>
      <h3>美食/生鲜/零食</h3>
    </li>
    <li class="cat-10">
      <i></i>
      <h3>鲜花/宠物/农资</h3>
    </li>
    <li class="cat-11">
      <i></i>
      <h3>房产/装修/建材</h3>
    </li>
  </ul>
</div>

#content{
  width: 180px;
  background: #f8f8f8;
  border: 1px solid #bbb;
}
h3{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
  padding: 0;
}
li h3{
  font-size: 14px;
  font-weight: 400;
}
li{  
  margin:  3px 10px 0 0;
  display: block;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  border-bottom: 1px solid #dedede;
 
}
li i{
  background:  url(sprite.png);
  display: inline;
  width: 40px;
  height: 28px;
  float: left;
}
.cat-1 i{
  background-position: -7px -5px;
}
.cat-2 i{
  background-position: -2px -35px;
}
.cat-3 i{
  background-position: -7px -65px;
}
.cat-4 i{
  background-position: -7px -105px;
}
.cat-5 i{
  background-position: -7px -129px;
}
.cat-6 i{
  background-position: -7px -151px;
}
.cat-7 i{
  background-position:-60px -4px;
}
.cat-8 i{
  background-position:-56px -33px;
}
.cat-9 i{
  background-position: -56px -66px;
}
.cat-10 i{
  background-position:-60px -103px;
}
.cat-11 i{
  background-position: -51px -128px;
}

效果图如下

}
.cat-10 i{
background-position:-60px -103px;
}
.cat-11 i{
background-position: -51px -128px;
}

## 效果图如下

[外链图片转存中...(img-Fny7k0g5-1707132877339)]

**本文转载自 忆桐之家的博客，<a href="http://hongyitong.github.io/2016/12/23/雪碧图CSS%20Sprite的应用/" rel="nofollow">《雪碧图CSS Sprite的应用》</a>**