|
小毅的blog：http://andymao.com/
前天網(wǎng)上有個朋友發(fā)給我一個頁面讓我?guī)退匆幌聻槭裁词髽朔D(zhuǎn)實現(xiàn)不了。我打開源文件看了一下，發(fā)現(xiàn)她根本沒有掌握一個鼠標翻轉(zhuǎn)的特性。并且對于傾斜導航的思考也不足。雖然我當時看出來了這些問題，但是由于手上一個項目正在收尾一時也沒有時間向她一個講解。正好昨天工作忙完了，現(xiàn)在又拿起那個文件看了一下，發(fā)現(xiàn)通過這個事件可以講解好多個知識點，有一些地方比較容易讓人不太注意，但是確實是非常關(guān)鍵的。下面我們通過制作一個傾斜的鼠標翻轉(zhuǎn)導航為過程來針對不同的地方做出一些提示，希望可以幫助一些對于鼠標翻轉(zhuǎn)導航制作上還存在疑問的朋友。
我們先看一下想要實現(xiàn)的效果，當然在沒做之前這些只能是存在于我們的腦子或是草圖上。我們首先要想到它是個什么樣子，然后才能去分析我們想要實理的效果是應(yīng)該如何去做，閑言少敘，先看圖：
我們看到上圖，可以會覺得好像并沒什么，好像很容易做。好我們來細細的分析一下這個效果。我們用標準來實現(xiàn)就不能直接插入一張圖片在HTML里。用標準來做就需要把圖片作為背景的方式用CSS進行調(diào)用。那么我們來看一下這樣的導航是否可以直接就那么直接調(diào)用，其中是不是還有什么問題出現(xiàn)？下面請看一下這個導航效果的放大圖：
大家注意上圖中的“危險區(qū)”很明顯，如果我們把兩個傾斜的正塊放在一起就必然會有一段重復區(qū)，我們現(xiàn)在的CSS還不支持異形處理。要解決這個問題就必需要使得這兩個方塊進行重疊。重疊就需要把他們放在不同的層次上。這就要用到CSS中的定位：“position : static | absolute | fixed | relative ”。關(guān)于position的詳細請查看蘇昱的《CSS2中文手冊》，關(guān)于如何定位請查看我的《解讀absolute與relative》
做鼠標翻轉(zhuǎn)我們通常會把所有的背景做成一個圖，然后通過CSS來設(shè)置不同標簽下的圖片的不同位置。也許有人就會認為這個導航 的背景圖應(yīng)該是這樣的：
出處：藍色理想
責任編輯：blue
上一頁 下一頁 傾斜的鼠標翻轉(zhuǎn)導航制作上的煩惱 [2]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 傾斜的鼠標翻轉(zhuǎn)導航制作上的煩惱 [1]
第 2 頁 
