CSS Sprite打造的個(gè)性化導(dǎo)航菜單代碼
發(fā)布時(shí)間：2011-01-26 15:15:30 作者：佚名 
我要評(píng)論
我要評(píng)論最近在網(wǎng)上閑逛，然后發(fā)現(xiàn)了一個(gè)用css sprite技術(shù)打造的導(dǎo)航，頗為簡便和易用。由于圖片的切換沒有用到任何js，所以顯得干凈整潔。具體想知道什么是css sprite技術(shù)的，可以到百度百科上去搜索這個(gè)關(guān)鍵字即可
下面先看效果：
首先，是在正常模式下瀏覽：
下面先看效果：
<!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>
<!------- 導(dǎo)航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;
}
其實(shí) 重頭戲是在上面的這句代碼下：
.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ù)，將圖片通過精確的切割，并且利用background-position來控制，就可以達(dá)到j(luò)s的控制效果。
希望本文章有用。謝謝。
首先，是在正常模式下瀏覽：
下面先看效果：
首先，是在正常模式下瀏覽：
然后，是在鼠標(biāo)懸停的時(shí)候?yàn)g覽：
最后，是在鼠標(biāo)點(diǎn)擊鏈接的時(shí)候?yàn)g覽：
可以看到 ，過渡的很自然。具體的素材如下：
其實(shí)，剛才的鼠標(biāo)懸停和點(diǎn)擊鏈接的圖片切換，就是通過位置控制取自bg2_btn.jpg，下面是具體實(shí)現(xiàn)方法：
首先是html頁面源代碼：
復(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>
<!------- 導(dǎo)航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的代碼：
復(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ù)，將圖片通過精確的切割，并且利用background-position來控制，就可以達(dá)到j(luò)s的控制效果。
希望本文章有用。謝謝。
相關(guān)文章
css sprites技術(shù)將多個(gè)背景集成到一個(gè)png圖片上css定位
美國YAHOO在頁面制作中所用到的圖片整合技術(shù)，首先將小圖片整合到一張大的圖片上，然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位，感興趣的朋友可以了解下具體的實(shí)現(xiàn)方法2013-04-02使用css sprites來優(yōu)化你的網(wǎng)站在Retina屏幕下顯示實(shí)現(xiàn)原理與代碼
CSS sprites(CSS圖片精靈)已經(jīng)存在很久了。事實(shí)上，八年前就有CSS Sprites的詳細(xì)介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要2012-12-24css sprites技術(shù) CSS Sprites圖片切割術(shù)與圖片優(yōu)化深入理解
近段時(shí)間一直在做前臺(tái)的一些東西，涉及到很多div+css的問題,原來這個(gè)叫CSS Sprites技術(shù),我對(duì)前臺(tái)這些個(gè)東西比較感興趣，所以會(huì)去了解多一點(diǎn)2012-12-03網(wǎng)頁設(shè)計(jì)中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
CSS Sprites 技術(shù)對(duì)于廣大的前端工程師來說應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個(gè)技術(shù)呢?下面讓我2012-05-31什么是CSS Sprites（圖片合并）技術(shù) 圖文介紹
眾所周知，減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過CSS Sprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS2011-06-21- CSS Sprites的目的就是通過整合圖片，減少對(duì)服務(wù)器的請(qǐng)求數(shù)量，從而加快頁面加載速度2011-05-11
- 無處不在的 CSS sptites － 為數(shù)不多的幾個(gè)可以直接跳過”流行”這個(gè)過程，而可以馬上并且牢牢地躋身于最佳 CSS 實(shí)踐之中的幾個(gè)技術(shù)之一。2010-04-17
- 眾所周知，減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過CSS Sprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS2009-09-16
CSS Sprite優(yōu)化 減少HTTP鏈接數(shù)
CSS Sprite 最大的好處是：減少 HTTP 鏈接數(shù)。提高頁面質(zhì)量2009-08-03- 論壇上提到這樣的問題：“css中用一張背景圖做頁面的技術(shù)有什么優(yōu)勢(shì)？” 簡單介紹一下 CSS Sprites 的優(yōu)點(diǎn)： 當(dāng)用戶往U盤中拷200張圖片，會(huì)等很久。但是2009-06-21