预览效果：
重点：把图片合成一张
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>商品分类展示</title> 6 </head> 7 <style> 8 .catagory{height:60px; border-bottom:1px solid #EDA6AE; margin:0 auto; background:#fff; padding-left:44px; width:956px;/*1000-44*/} 9 .catagory li{ float:left; list-style:none;width:98px; height:59px;background-repeat:no-repeat;} 10 .catagory li a{ text-decoration:none;color:#3c3c3c;padding-top:36px;display:inline-block; width:98px; text-align:center; font-size:14px; height:24px; } 11 .catagory li a:hover{ text-decoration:none;} 12 13 .all{ background:url(images/qiao_catagory_ico.gif) 34px 0;} 14 .nav-t{background:url(images/qiao_catagory_ico.gif) -66px 0;} 15 .nav-bag{background:url(images/qiao_catagory_ico.gif) -164px 0;} 16 .nav-food{background:url(images/qiao_catagory_ico.gif) -270px 0;} 17 .nav-beauty{background:url(images/qiao_catagory_ico.gif) -366px 0;} 18 .nav-baby{background:url(images/qiao_catagory_ico.gif) -465px 0;} 19 .nav-digit{background:url(images/qiao_catagory_ico.gif) -562px 0;} 20 .nav-home{background:url(images/qiao_catagory_ico.gif) -668px 0;} 21 .nav-other{background:url(images/qiao_catagory_ico.gif) -770px 0;} 22 23 li.all .current,li.all a:hover{background:url(images/qiao_catagory_ico.gif) 34px -85px no-repeat;} 24 li.nav-t .current,li.nav-t a:hover{background:url(images/qiao_catagory_ico.gif) -66px -85px no-repeat;;} 25 li.nav-bag .current,li.nav-bag a:hover{background:url(images/qiao_catagory_ico.gif) -164px -85px no-repeat;;} 26 li.nav-food .current,li.nav-food a:hover{background:url(images/qiao_catagory_ico.gif) -270px -85px no-repeat;;} 27 li.nav-beauty .current,li.nav-beauty a:hover{background:url(images/qiao_catagory_ico.gif) -366px -85px no-repeat;;} 28 li.nav-baby .current,li.nav-baby a:hover{background:url(images/qiao_catagory_ico.gif) -465px -85px no-repeat;;} 29 li.nav-digit .current,li.nav-digit a:hover{background:url(images/qiao_catagory_ico.gif) -562px -85px no-repeat;;} 30 li.nav-home .current,li.nav-home a:hover{background:url(images/qiao_catagory_ico.gif) -668px -85px no-repeat;;} 31 li.nav-other .current,li.nav-other a:hover{background:url(images/qiao_catagory_ico.gif) -770px -85px no-repeat;;} 32 </style> 33 <body> 34 35 <div class="catagory"> 36 <ul> 37 <li class="all"><a href="#" class="current">全部分类</a></li> 38 <li class="nav-t"><a href="#">男女服饰</a></li> 39 <li class="nav-bag"><a href="#">鞋包配饰</a></li> 40 <li class="nav-food"><a href="#">食品保健</a></li> 41 <li class="nav-beauty"><a href="#">美容护肤</a></li> 42 <li class="nav-baby"><a href="#">母婴玩具</a></li> 43 <li class="nav-digit"><a href="#">数码家电</a></li> 44 <li class="nav-home"><a href="#">日用家居</a></li> 45 <li class="nav-other"><a href="#">其它分类</a></li> 46 </ul> 47 </div> 48 <!--catagory --> 49 </body> 50 </html>
整套下载：
https://files.cnblogs.com/tinyphp/divcss%E5%95%86%E5%93%81%E5%88%86%E7%B1%BB.zip
