热搜：编程 Python Microsoft 编程语言 C++

CSS Sprite打造的个性化导航菜单代码

发布时间：2023-05-25 14:40:46 来源：互联网

.

有人这样描绘四姑娘山：四姑娘山孕育着银色冬天的梦幻，绿色春天的生命，金色秋天的希望，蓝色夏天的憧憬。四姑娘山，走进她，靠近她，你才知道什么是美，这种美带给你的是各种不同的感受，四季轮转中也无改她的美丽，四姑娘山如婉约的少女，又如豪壮的勇士，伫立在天地间，无比的圣洁，不愧是蜀山之后，东方的阿尔卑斯。

下面先看效果：
首先，是在正常模式下浏览：
下面先看效果：

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

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

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

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

其实，刚才的鼠标悬停和点击链接的图片切换，就是通过位置控制取自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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" href="#">Blog</a>
<a rel="nofollow noopener noreferrer" href="#">Themes</a>
<a rel="nofollow noopener noreferrer" href="#">Service</a>
<a rel="nofollow noopener noreferrer" href="#">About</a>
<a rel="nofollow noopener noreferrer" 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的控制效果。
希望本文章有用。谢谢。

到此这篇关于CSS Sprite打造的个性化导航菜单代码就介绍到这了。逆境，是上帝帮你淘汰竞争者的地方；要知道，你不好受，别人也不好受，你坚持不下去了，别人也一样，千万不要告诉别人你坚持不住了，那只能让别人获得坚持的信心，让竞争者看着你的面孔，失去信心，退出。胜利，属于那些有耐心的人！更多相关CSS Sprite打造的个性化导航菜单代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： CSS Sprite