商品分类导航,div+css

预览效果:

重点:把图片合成一张

 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>

整套下载:

http://files.cnblogs.com/tinyphp/divcss%E5%95%86%E5%93%81%E5%88%86%E7%B1%BB.zip

你可能感兴趣的:(div+css)