CSS Sprite打造的个性化导航菜单代码
发布时间：2011-01-26 15:15:30 作者：佚名 
我要评论
我要评论最近在网上闲逛，然后发现了一个用css sprite技术打造的导航，颇为简便和易用。由于图片的切换没有用到任何js，所以显得干净整洁。具体想知道什么是css sprite技术的，可以到百度百科上去搜索这个关键字即可
下面先看效果：
首先，是在正常模式下浏览：
下面先看效果：
<!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的控制效果。
希望本文章有用。谢谢。
首先，是在正常模式下浏览：
下面先看效果：
首先，是在正常模式下浏览：
然后，是在鼠标悬停的时候浏览：
最后，是在鼠标点击链接的时候浏览：
可以看到 ，过渡的很自然。具体的素材如下：
其实，刚才的鼠标悬停和点击链接的图片切换，就是通过位置控制取自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的控制效果。
希望本文章有用。谢谢。
相关文章
css sprites技术将多个背景集成到一个png图片上css定位
美国YAHOO在页面制作中所用到的图片整合技术，首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位，感兴趣的朋友可以了解下具体的实现方法2013-04-02使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码
CSS sprites(CSS图片精灵)已经存在很久了。事实上，八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要2012-12-24css sprites技术 CSS Sprites图片切割术与图片优化深入理解
近段时间一直在做前台的一些东西，涉及到很多div+css的问题,原来这个叫CSS Sprites技术,我对前台这些个东西比较感兴趣，所以会去了解多一点2012-12-03- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢?下面让我2012-05-31
- 众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS2011-06-21
- CSS Sprites的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度2011-05-11
- 无处不在的 CSS sptites － 为数不多的几个可以直接跳过”流行”这个过程，而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。2010-04-17
- 众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS2009-09-16
- CSS Sprite 最大的好处是：减少 HTTP 链接数。提高页面质量2009-08-03
- 论坛上提到这样的问题：“css中用一张背景图做页面的技术有什么优势？” 简单介绍一下 CSS Sprites 的优点： 当用户往U盘中拷200张图片，会等很久。但是2009-06-21
最新评论