圖片等資源來源網路，如果侵犯了您的權利，請告知。謝謝！
翻轉門的優缺點以及實現
優點：1：普通的背景圖片和滑鼠浮上去的背景圖片是同一張圖片。所以只需要下載一次就可以了。減少了一個http的request請求，所以對頁面的效率提高有很大的好處（《如何提高網頁的效率》兩篇文章被it168編輯採用了，要等2周以後才能放出。抱歉。）。
2：因為採用的是同一張圖片，所以看到的時候就肯定已經下載到本地了。所以當滑鼠浮上去的時候，變換非常的快（因為是本地的），所以不會出現那種“滑鼠浮上去以後好久才能看到替換圖片”的情況。
缺點：
1：同一張圖片，隨意如果要改變的話，需要重新製作圖片。維護成本比較高（不過，如果有美工在的話，自然不成問題）。
2：有時候需要“算像素”以便顯示的正好。
實現：
看圖1。分別是普通狀態下和滑鼠浮上去後要顯示的樣子。我們只要普通的時候顯示上面一般，滑鼠浮上去的時候顯示下面一半，就可以達到想要的效果了。有了這個思想，實現起來就很簡單了。一個容器標籤，高設定為要變換圖片（1）的一半大小，寬設定為和變換圖片相等。然後將此容器的背景圖片設為變換圖片。普通的時候顯示top部分。然後滑鼠浮上去的時候利用css樣式的偽類:hover再將背景圖片顯示bottom部分即可。
為了便於理解和講解，下面將通過一個執行個體來講解。上面是此例的和。建議將將Demo下載到本地，以便更好的研究其代碼。
前台XHTML代碼很簡單，只是一個無序列表而已。
<body>
<ul id="menu">
<li><a href="#" class="home">Home<span></span></a></li>
<li><a href="#" class="about">About<span></span></a></li>
<li><a href="#" class="rss">RSS<span></span></a></li>
</ul>
</body>
</html>
關鍵是在CSS檔案裡面，下面以“Home”這個菜單為例，看看是如何?的。下面是“Home”菜單翻轉實現的關鍵代碼：
/*普通狀態下css樣式*/下面這個css樣式是最核心的一句代碼。通過偽類:hover將圖片“翻轉”：
#menu a:hover {就這樣一個簡單的翻轉門菜單就實現了。而且因為是通過“#menu a:hover”設定的樣式，所以對menu菜單下的所有a都適應，後面不同的欄目，只要通過形如“#menu .home”這樣的分別設定就可以了。當然，所有的背景變換圖片都要是一樣大小，而且上下的映像應該是通過中間水平線“對摺”的。
有得朋友可能會問，＜li＞裡面的＜a＞，再裡面的＜span＞是做什麼用的，其實，這個和“翻轉門”倒是沒有什麼關係，只是裝飾用的，是用來顯示菜單說明圖片用的，例如“home”菜單上的“go to home”（3所示）
再說幾句廢話很多的朋友已經感到web標準設計的重要性，也對此高度興趣，想要學習。但是很多的站在“web標準設計”門口的朋友都感覺很迷茫和混亂。感覺這些東西特別“煩”、特別“亂”。的確，因為沒有統一的標準，firefox和M$的IE也都有對頁面各自的解析方式，所以導致整個局面十分混亂。因此也造成了學習者“煩”和“亂”的感覺。這種感覺在現階段可能還無法得到徹底的解決，但是我們很欣慰的看到IE7對web標準的支援已經邁出了很大的一步。相信在不久的將來，web標準設計將會更加的普及。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
