CSS Sprite打造个性化导航

最近在网上闲逛，然后发现了一个用css sprite技术打造的导航，颇为简便和易用。由于图片的切换没有用到任何js，所以显得干净整洁。具体想知道什么是css sprite技术的，可以到百度百科上去搜索这个关键字即可，下面先看效果：

首先，是在正常模式下浏览：

然后，是在鼠标悬停的时候浏览：

最后，是在鼠标点击链接的时候浏览：

可以看到 ，过渡的很自然。具体的素材如下：

其实，刚才的鼠标悬停和点击链接的图片切换，就是通过位置控制取自bg2_btn.jpg，下面是具体实现方法：

首先是html页面源代码：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 20个web2.0导航样式 </ title >
     < link  href ="mydemo.css"  rel ="stylesheet"  type ="text/css"   />
</ head >
< body >
   < div >
     < img  src ="image/logo/logo2.jpg"  alt ="wenqi's blog"   />
   </ div >
   <!-- ----- 导航2 ----- -->
   < div  class ="menu2" >
     < div  class ="left2" ></ div >
     < div  class ="center2" >
       < a  href ="#" > Blog </ a >
       < a  href ="#" > Themes </ a >
       < a  href ="#" > Service </ a >
       < a  href ="#" > About </ a >
       < a  href ="#" > Help </ a >
       < del ></ del >
     </ div >
     < div  class ="right2" ></ div >
     < div  class ="clear" ></ div >
   </ div >
 
</ body >
</ html >

 

其次就是css的代码：

html
{
    width : 100% ;
    height : 100% ;
}
body 
{
    background-color : #fff ;
    font-size : 18px ;
    font-family : "Arial","Tahoma","微软雅黑","雅黑" ;
    line-height : 18px ;
    padding : 0px ;
    margin : 0px ;
    text-align : center ;
}
/*  www.codefans.net  */
a
{
    display : block ;
    float : left ;
}
del,div.clear
{
    height : 0px ;
    font-size : 0px ;
    line-height : 0px ;
    padding : 0px ;
    margin : 0px ;
    display : block ;
    clear : both ;
    overflow : hidden ;
}
div
{
    width : 550px ;
    text-align : left ;
    margin : auto auto auto auto ;
}
.menu2
{
    font-size : 14px ;
    line-height : 14px ;
    margin-bottom : 24px ;
}
.menu2 .left2
{
    width : 5px ;
    height : 47px ;
    background : url("image/navigation/bg2_left.jpg") no-repeat left top ;
    float : left ;     
}
.menu2 .center2
{
    width : 540px ;
    height : 47px ;
    background : url("image/navigation/bg2_center.jpg") repeat-x left top ;
    float : left ;
}
.menu2 .right2
{
    width : 5px ;
    height : 47px ;
    background : url("image/navigation/bg2_right.jpg") no-repeat left top ;
    float : left ;
}
.menu2 a:link,.menu2 a:visited

{
    color : #585858 ;
    width : 77px ;
    height : 30px ;
    padding-top : 17px ;
    background : url("image/navigation/bg2_btn.jpg") no-repeat left -94px ;
    text-align : center ;
    text-decoration : none ;     
}
.menu2 a:hover
{     
    color : #fff ;
    background-position : left 0px ;     
}
.menu2 a:active
{
    color : #fff ;
    background-position : left -47px ;
}

 

其实 重头戏是在上面的这句代码下：

.menu2 a:link,.menu2 a:visited

{
    color:#585858;
    width:77px;
    height:30px;
    padding-top:17px;
    background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px;
    text-align:center;
    text-decoration:none;    
}

利用了css sprite技术，将图片通过精确的切割，并且利用background-position来控制，就可以达到js的控制效果。

希望本文章有用。谢谢。