|
如果你真的是這么想的那么問題就出來了：當(dāng)在五個(gè)區(qū)塊中的任一個(gè)區(qū)塊中進(jìn)行鼠標(biāo)翻轉(zhuǎn)時(shí)，上面的危險(xiǎn)區(qū)的重復(fù)部位就會把左側(cè)和是右側(cè)的導(dǎo)航擋去一個(gè)角。所以正常的方式是：
只有這樣在沒有危險(xiǎn)區(qū)的情況下才能作為最終的背景圖片使用。當(dāng)然還要注意的是背景并不是白色而是透明的，主要不是為了與網(wǎng)站的背景融合，關(guān)鍵是不要擋住在危險(xiǎn)區(qū)的相鄰的背景。我使用的是GIF圖，GIF圖有透明的時(shí)候邊緣會有一點(diǎn)毛邊。如果希望應(yīng)對不同的色彩的網(wǎng)站背景，最好使用PNG或是把GIF圖的邊緣做成點(diǎn)像素。
對于這個(gè)背景圖的思考完成之后我們就需要想想怎么制作這個(gè)導(dǎo)航了。先來分析一下這個(gè)鼠標(biāo)翻轉(zhuǎn)，原來做鼠標(biāo)翻轉(zhuǎn)是JS的事，現(xiàn)在可以通過CSS的：hover也可以實(shí)現(xiàn)這個(gè)翻轉(zhuǎn)效果，代碼少、結(jié)構(gòu)清晰。所以這里這五個(gè)導(dǎo)航的翻轉(zhuǎn)就是由A:hover來實(shí)現(xiàn)。關(guān)于a:hover的詳細(xì)解解釋可以查閱一下蘇昱的《CSS2中文手冊》。
首先我先寫下了這個(gè)導(dǎo)航的HTML代碼，由于是結(jié)構(gòu)，要盡可能的簡潔干凈：
<ul id="nav">
<li id="a"><a href="" title="">HOME</a></li>
<li id="b"><a href="" title="">ABOUT</a></li>
<li id="c"><a href="" title="">PRODUCT</a></li>
<li id="d"><a href="" title="">SEVICE</a></li>
<li id="e"><a href="" title="">FEEDBACK</a></li>
</ul>
這里的#nav為什么要加一個(gè)position:relative; 呢？請查閱《解讀absolute與relative》而 padding:0; margin:0; list-style:none;是為了去掉UL前的那個(gè)黑點(diǎn)，并且清除瀏覽器中UL的默認(rèn)值。你也可以在CSS文件的開頭用一句 *{padding:0; margin:0; list-style:none;}來清理一下標(biāo)簽在瀏覽器中的默認(rèn)值。把他們放躺下之后我看了一下效果，不得了，所有的鏈接全都合到一起了。因?yàn)樗械腖I都被定義成為絕對值大家都跑到原點(diǎn)對齊去了。我們需要把他們分開。所以接著寫CSS把他們都分開：
#a {left:0px; top:0px; }
#b {left:79px; top:0px;}
#c {left:158px; top:0px;}
#d {left:237px; top:0px;}
#e {left:316px; top:0px;}
我們發(fā)現(xiàn)他們的TOP值都是0，為了讓代碼少一點(diǎn)我們把CSS再做一次修改：
#nav {padding:0; margin:0; width:410px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;}
#nav li {width:82px; height:25px; position:absolute; top:0px;}
#a {left:0px;}
#b {left:79px;}
#c {left:158px;}
#d {left:237px;}
#e {left:316px;}
都已經(jīng)區(qū)分開，下面就是加背景圖片了。這里要注意：圖片要加在A標(biāo)簽上，如果不然可能就會出現(xiàn)錯(cuò)誤。當(dāng)然也可以放在UL背景或是li上，但是那樣做法、圖片就都不一樣了，可能也不太好理解。這里只以放在A標(biāo)簽上。
#nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}
這里我們把A標(biāo)簽也定義為寬為82高為25的方塊，這里要注意一定要把A定義為塊：display:block; 因?yàn)橹挥羞@樣才可以完全顯示背景圖片。與overflow:hidden;相結(jié)合還可以把A標(biāo)簽中的文字?jǐn)D出顯示區(qū)，當(dāng)然他的父級標(biāo)簽也要有overflow:hidden;不然在IE下還是會出現(xiàn)溢出顯示的現(xiàn)象。加上一個(gè)背景圖，這時(shí)瀏覽一下我們發(fā)現(xiàn)五個(gè)區(qū)塊只出現(xiàn)圖片的第一區(qū)，五個(gè)塊都是一樣的。我們需要把五個(gè)塊應(yīng)有的顯示內(nèi)容表現(xiàn)出來。就需要再加一些指令：
#b a {background-position: -82px 0px;}
#c a {background-position: -164px 0px;}
#d a {background-position: -246px 0px;}
#e a {background-position: -328px 0px;}
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁 傾斜的鼠標(biāo)翻轉(zhuǎn)導(dǎo)航制作上的煩惱 [1] 下一頁 傾斜的鼠標(biāo)翻轉(zhuǎn)導(dǎo)航制作上的煩惱 [3]
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 傾斜的鼠標(biāo)翻轉(zhuǎn)導(dǎo)航制作上的煩惱 [2]
