微信导航条案例

页面效果

html

  <div class="box">
   	  <ul>
   	  	 <li>
   	  	 	<a href="#">
   	  	 		 <span>首页</span>
   	  	 	</a>
   	  	 </li>
   	  	 <li>
   	  	 	<a href="#">
   	  	 		 <span>下载吧</span>
   	  	 	</a>
   	  	 </li>
   	  	 <li>
   	  	 	<a href="#">
   	  	 		 <span>公共平台</span>
   	  	 	</a>
   	  	 </li>
   	  </ul>
  </div>

css

*{
 	 margin: 0;
	 padding: 0;
 }

 .box{
 	 height:74px;
 	 background-image: url("weixin_bg1d20af.jpg");
 	 padding-left: 300px;
 }
li{
	 list-style: none;
	 float:left;
	 margin-right: 20px;
	 margin-top:20px;
}
li a{  
	  height:33px;
	  display: inline-block;
	  background-image:url("bg.png");
	  background-position: 0 -192px;
	  line-height: 33px;
	  padding-left: 17px;
	  color: white;
	  text-decoration: none;
}

li span{
	 height: 33px;
	 display: inline-block;
	 background-image: url("bg.png");
	 background-position: right -192px;
	 padding-right: 17px;
}


li a:hover{
	 color: green;
}

引用精灵图

背景图

注意

精灵图显示图片的位置
background-position属性，它有两个参数，分别是水平方向移动的像素、竖直方向移动的像素，都用负数表示。

background-image: url(“图片地址”);
background-position: x坐标 y坐标;