随笔 - 394 文章 - 0 评论 - 946 阅读 - 143万

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>
  
  <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;
}