精灵图

精灵图就是把多张图片合成一张图片来减少网页http请求,提高页面加载速度,优化网站性能;

 

 

 

精灵图

html核心代码

1 <ul>
2                 <li><a href="#">预定商品</a></li>
3                 <li><a href="#">专辑价格</a></li>
4                 <li><a href="#">发货周期</a></li>
5                 <li><a href="#">快递</a></li>
6                 <li><a href="#">退换货相关</a></li>
7             </ul>

 

 css效果代码如下:

 1 .content ul li{
 2     display: inline-block;
 3     background-image: url(../img/buyer/mod_circle.png);
 4     background-position: center 5px;
 5     background-repeat: no-repeat;
 6     width: 85px;
 7     height: 30px;
 8 }
 9 .content ul li:hover{
10     background-position: center -95px;
11 }

材料图:

精灵图

 

上一篇:Flex布局


下一篇:echarts改变图例位置