精灵图就是把多张图片合成一张图片来减少网页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 }
材料图: