快捷導(dǎo)航

MAC官方菜單純CSS實現(xiàn)灰色會換色

更新時間：2009年11月03日 23:03:24 作者：

MAC官方網(wǎng)站的菜單,實際上是看著好看,但看了代碼感覺不太實用,因為為了實現(xiàn)這么一個效果代碼太繁瑣,而且菜單修改起來也極不方便,建議大家以學(xué)習(xí)的態(tài)度閱讀源碼.

請注意里面的背景圖片是png透明，所以必須在 li 中設(shè)置顏色以擋住 ul 的背景圖與 a 的背景圖重復(fù)疊加。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MAC菜單</title> <style type="text/css">  </style> </head> <body> <div   class="vvxyksv9kd"   id="nav">     <ul>     <li id="vvxyksv9kd"    class="n01"><a href="#index" title="index">index</a></li>     <li id="vvxyksv9kd"    class="n02"><a href="#Store" title="Store">Store</a></li>     <li id="vvxyksv9kd"    class="n03"><a href="#Mac" title="Mac">Mac</a></li>     <li id="vvxyksv9kd"    class="n04"><a href="#iPod+iTunes" title="iPod + iTunes">iPod + iTunes</a></li>     <li id="vvxyksv9kd"    class="n05"><a href="#iPhone" title="iPhone">iPhone</a></li>     <li id="vvxyksv9kd"    class="n06"><a href="#Downloads" title="Downloads">Downloads</a></li>     <li id="vvxyksv9kd"    class="n07"><a href="#Support" title="Support">Support</a></li>     </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]