精灵图

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

材料图：

 

posted @ 2021-10-26 08:10  小小不小阿  阅读(59)  评论(2)  编辑  收藏  举报