前天網(wǎng)上有個朋友發(fā)給我一個頁面讓我?guī)退匆幌聻槭裁词髽朔D(zhuǎn)實現(xiàn)不了。我打開源文件看了一下，發(fā)現(xiàn)她根本沒有掌握一個鼠標翻轉(zhuǎn)的特性。并且對于傾斜導航的思考也不足。雖然我當時看出來了這些問題，但是由于手上一個項目正在收尾一時也沒有時間向她一個講解。正好昨天工作忙完了，現(xiàn)在又拿起那個文件看了一下，發(fā)現(xiàn)能過這個事件可以講解好多個知識點，有一些地方比較容易讓人不太注意，但是確實是非常關鍵的。下面我們通過制作一個傾斜的鼠標翻轉(zhuǎn)導航為過程來針對不同的地方做出一些提示，希望可以幫助一些對于鼠標翻轉(zhuǎn)導航制作上還存在疑問的朋友。

我們先看一下想要實現(xiàn)的效果，當然在沒做之前這些只能是存在于我們的腦子或是草圖上。我們首先要想到它是個什么樣子，然后才能去分析我們想要實理的效果是應該如何去做，閑言少敘，先看圖：

我們看到上圖，可以會覺得好像并沒什么，好像很容易做。好我們來細細的分析一下這個效果。我們用標準來實現(xiàn)就不能直接插入一張圖片在HTML里。用標準來做就需要把圖片作為背景的方式用CSS進行調(diào)用。那么我們來看一下這樣的導航是否可以直接就那么直接調(diào)用，其中是不是還有什么問題出現(xiàn)？下面請看一下這個導航效果的放大圖：

大家注意上圖中的“危險區(qū)”很明顯，如果我們把兩個傾斜的正塊放在一起就必然會有一段重復區(qū)，我們現(xiàn)在的CSS還不支持異形處理。要解決這個問題就必需要使得這兩個方塊進行重疊。重疊就需要把他們放在不同的層次上。這就要用到CSS中的定位：“position : static | absolute | fixed | relative ”。關于position的詳細請查看蘇昱的《CSS2中文手冊》，關于如何定位請查看我的《解讀absolute與relative》

做鼠標翻轉(zhuǎn)我們通常會把所有的背景做成一個圖，然后通過CSS來設置不同標簽下的圖片的不同位置。也許有人就會認為這個導航 的背景圖應該是這樣的：

#p#

如果你真的是這么想的那么問題就出來了：當在五個區(qū)塊中的任一個區(qū)塊中進行鼠標翻轉(zhuǎn)時，上面的危險區(qū)的重復部位就會把左側(cè)和是右側(cè)的導航擋去一個角。所以正常的方式是：

只有這樣在沒有危險區(qū)的情況下才能作為最終的背景圖片使用。當然還要注意的是背景并不是白色而是透明的，主要不是為了與網(wǎng)站的背景融合，關鍵是不要擋住在危險區(qū)的相鄰的背景。我使用的是GIF圖，GIF圖有透明的時候邊緣會有一點毛邊。如果希望應對不同的色彩的網(wǎng)站背景，最好使用PNG或是把GIF圖的邊緣做成點像素。

對于這個背景圖的思考完成之后我們就需要想想怎么制作這個導航了。先來分析一下這個鼠標翻轉(zhuǎn)，原來做鼠標翻轉(zhuǎn)是JS的事，現(xiàn)在可以通過CSS的：hover也可以實現(xiàn)這個翻轉(zhuǎn)效果，代碼少、結(jié)構(gòu)清晰。所以這里這五個導航的翻轉(zhuǎn)就是由A:hover來實現(xiàn)。關于a:hover的詳細解解釋可以查閱一下蘇昱的《CSS2中文手冊》。

首先我先寫下了這個導航的HTML代碼，由于是結(jié)構(gòu)，要盡可能的簡潔干凈：

• HOME




• ABOUT




• PRODUCT




• SEVICE




• FEEDBACK

這里的#nav為什么要加一個position:relative; 呢？請查閱《解讀absolute與relative》而 padding:0; margin:0; list-style:none;是為了去掉UL前的那個黑點，并且清除瀏覽器中UL的默認值。你也可以在CSS文件的開頭用一句 *{padding:0; margin:0; list-style:none;}來清理一下標簽在瀏覽器中的默認值。把他們放躺下之后我看了一下效果，不得了，所有的鏈接全都合到一起了。因為所有的LI都被定義成為絕對值大家都跑到原點對齊去了。我們需要把他們分開。所以接著寫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，為了讓代碼少一點我們把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標簽上，如果不然可能就會出現(xiàn)錯誤。當然也可以放在UL背景或是li上，但是那樣做法、圖片就都不一樣了，可能也不太好理解。這里只以放在A標簽上。

#nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}

這里我們把A標簽也定義為寬為82高為25的方塊，這里要注意一定要把A定義為塊：display:block; 因為只有這樣才可以完全顯示背景圖片。與overflow:hidden;相結(jié)合還可以把A標簽中的文字擠出顯示區(qū)，當然他的父級標簽也要有overflow:hidden;不然在IE下還是會出現(xiàn)溢出顯示的現(xiàn)象。加上一個背景圖，這時瀏覽一下我們發(fā)現(xiàn)五個區(qū)塊只出現(xiàn)圖片的第一區(qū)，五個塊都是一樣的。我們需要把五個塊應有的顯示內(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;}

#p#

我們這里看到其中并沒有 #a a 這是因為#a a的顯示內(nèi)容就是當前內(nèi)容，所以這句可以省了，由于#nav  a中已經(jīng)定義了背影圖片了由于#nav a包括了#a a、#b a…，所以這里只要做好背景的位置就好了。再瀏覽一下，是正確了，但是還沒有鼠標翻轉(zhuǎn)的效果。下面再來把這個鼠標翻轉(zhuǎn)的效果再補上：

#a a:hover {background-position: 0 -25px} 
#b a:hover {background-position: -82px -25px;} 
#c a:hover {background-position: -164px -25px;} 
#d a:hover {background-position: -246px -25px;} 
#e a:hover {background-position: -328px -25px;}

大家也看到了，這里也有很多重復的，可不可以再省略呢？如果只是針對IE流覽器是可以的，因為IE在背景兩個私有屬性叫：background-positionX，background-positionY。但是Firefox與Opera都不支持，所以這里就不能省?；旧鲜浅晒α瞬贿^還有一個小細節(jié)，細心的朋友一定發(fā)現(xiàn)了，LI的位置移動是以79PX為一個單位，而圖片則都是82PX的，鏈接也是82PX的大小。所以我們開頭的#nav 的長度是錯的，正常的是398px，為什么是398px那就自己想想算算吧！下面給出全部的CSS代碼：

#nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;} 
#nav li {width:82px; height:25px; position:absolute; top:0;} 

#b {left:79px;} 
#c {left:158px;} 
#d {left:237px;} 
#e {left:316px;} 

#nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;} 
#b a {background-position: -82px 0px;} 
#c a {background-position: -164px 0px;} 
#d a {background-position: -246px 0px;} 
#e a {background-position: -328px 0px;} 

#a a:hover {background-position: 0 -25px} 
#b a:hover {background-position: -82px -25px;} 
#c a:hover {background-position: -164px -25px;} 
#d a:hover {background-position: -246px -25px;} 
#e a:hover {background-position: -328px -25px;}

錯誤的效果：

運行代碼框
<!doctype html="" public="" dtd="" xhtml="" 1.0=""><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta http-equiv="Content-Language" content="zh-CN"/><meta name="Design Corp" content="jonmax.com"/><meta name="Designer mail" content="maozhenzhi(at)gmail.com"/><meta name="roots" content="jonmax.com"/><meta name="Keywords" content=""/><meta name="Description" content=""/><title></title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><link rel="stylesheet" rev="stylesheet" type="text/css" media="print" href="jonStyle/css/print.css"/><link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master.css"/><link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master_color.css"/><link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml"/><link rel="EditURI" type="application/rsd+xml" title="RSD" href="/rsd.xml"/><link rel="start" href title="Home"/><style type="text/css"><!-- #nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;} #nav li {width:82px; height:25px; position:absolute; top:0;} #b {left:79px;} #c {left:158px;} #d {left:237px;} #e {left:316px;} #nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; #b a {background-position: -79px 0px;} #c a {background-position: -158px 0px;} #d a {background-position: -237px 0px;} #e a {background-position: -316px 0px;} #a a:hover {background-position: 0 -25px} #b a:hover {background-position: -79px -25px;} #c a:hover {background-position: -158px -25px;} #d a:hover {background-position: -237px -25px;} #e a:hover {background-position: -316px -25px;} --></style></head><body id="" class=""><ul id="nav"><li id="a"><p><a href title="">HOME</a></p></li><li id="b"><p><a href title="">ABOUT</a></p></li><li id="c"><p><a href title="">PRODUCT</a></p></li><li id="d"><p><a href title="">SEVICE</a></p></li><li id="e"><p><a href title="">FEEDBACK</a></p></li></ul></body></html></!doctype>