/* 转换块元素 */
display: inline-block;
/* 精灵图位置 */
background-image: url(../img/ico.png);
background-position: 0 -70px;

 

/* 第一张图片距离左边距离 */
.content .top li:first-child{
margin-left:0 ;
}
/* 最后图片距离右边距离 */
.content .top li:last-child{
margin-right:0 ;
}

 

background-image: url(../img/shop_title2.png);
/* 背景图像显示一次 */
background-repeat: no-repeat;
/* 位置 横坐标 纵坐标 */
background-position: 0 -50px;

 

/* 水平对齐 */
vertical-align: top;

精灵图

步骤 先写top距离上面 然后在写

.content .top{
margin-top: 30px;
}

.content .top .title{
background-image: url(../img/shop_title2.png);
/* 背景图像显示一次 */
background-repeat: no-repeat;
/* 位置 横坐标 纵坐标 */
background-position: 0 -50px;

height: 50px;
}

在该里面内容