CSS Sprite打造的個(gè)性化導(dǎo)航菜單代碼

發(fā)布時(shí)間：2011-01-26 15:15:30 作者：佚名

最近在網(wǎng)上閑逛，然后發(fā)現(xiàn)了一個(gè)用css sprite技術(shù)打造的導(dǎo)航，頗為簡(jiǎn)便和易用。由于圖片的切換沒(méi)有用到任何js，所以顯得干凈整潔。具體想知道什么是css sprite技術(shù)的，可以到百度百科上去搜索這個(gè)關(guān)鍵字即可

下面先看效果：
首先，是在正常模式下瀏覽：
下面先看效果：

首先，是在正常模式下瀏覽：

然后，是在鼠標(biāo)懸停的時(shí)候?yàn)g覽：

最后，是在鼠標(biāo)點(diǎn)擊鏈接的時(shí)候?yàn)g覽：

可以看到，過(guò)渡的很自然。具體的素材如下：

其實(shí)，剛才的鼠標(biāo)懸停和點(diǎn)擊鏈接的圖片切換，就是通過(guò)位置控制取自bg2_btn.jpg，下面是具體實(shí)現(xiàn)方法：

首先是html頁(yè)面源代碼：

復(fù)制代碼

代碼如下:

<!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個(gè)web2.0導(dǎo)航樣式</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的代碼：

復(fù)制代碼

代碼如下:

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

其實(shí) 重頭戲是在上面的這句代碼下：

復(fù)制代碼

代碼如下:

.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技術(shù)，將圖片通過(guò)精確的切割，并且利用background-position來(lái)控制，就可以達(dá)到j(luò)s的控制效果。
希望本文章有用。謝謝。

Tag：Sprite 導(dǎo)航菜單

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

CSS Sprite打造的個(gè)性化導(dǎo)航菜單代碼

相關(guān)文章

最新評(píng)論

文章分類(lèi)

大家感興趣的內(nèi)容

最近更新的內(nèi)容