<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

    <listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

      <address id="jxdzp"></address>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

          訂閱本欄目 RSS您所在的位置: 深山工作室 > HTML > 正文

          仿MAC官網導航菜單

          www.as1983.com 2007/11/25 22:05:58 深山行者 字體: 瀏覽 12162
          使用圖片:



          完全應用背景圖像X,Y定位;
          仿MAC官網導航菜單
          注意:
          #nav li,#nav li a { background:#fff; }
          因為該圖片是png透明,所以必須在 li 中設置顏色以擋住 ul 的背景圖與 a 的背景圖重復疊加。
           
          以下是引用片段:

          <!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" />
          <meta name="keywords" content="html,css,js" />
          <meta name="description" content="深山行者個人主頁" />
          <meta name="Author" content="565449214" />
          <title>MAC菜單</title>
          <style type="text/css">
          <!--
          html,body { height:100%; background:#fff; }
          body { font:12px "宋體",Arial,sans-serif; color:#333; }
          body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { padding:0; margin:0; }
          ul,ol,dl { list-style:none; }

          #nav { width:982px; height:38px; margin:15px 0 0 10px; overflow:hidden; background:url(http://images.apple.com/global/nav/images/globalnavbg.png) no-repeat; }
          #nav li,#nav li a { float:left; display:block; width:117px; height:38px; background:#fff; }
          #nav li a { width:100%; text-indent:-9999px; background:url(http://images.apple.com/global/nav/images/globalnavbg.png) no-repeat 0 0; }

          #nav .n01 { width:118px; }
          #nav .n01 a:visited { background-position:0 -114px; }
          #nav .n01 a:hover { background-position:0 -38px; }
          #nav .n01 a:active { background-position:0 -76px; }

          #nav .n02 a:link { background-position:-118px 0; }
          #nav .n02 a:visited { background-position:-118px -114px; }
          #nav .n02 a:hover { background-position:-118px -38px; }
          #nav .n02 a:active { background-position:-118px -76px; }

          #nav .n03 a:link { background-position:-235px 0; }
          #nav .n03 a:visited { background-position:-235px -114px; }
          #nav .n03 a:hover { background-position:-235px -38px; }
          #nav .n03 a:active { background-position:-235px -76px; }

          #nav .n04 a:link { background-position:-352px 0; }
          #nav .n04 a:visited { background-position:-352px -114px; }
          #nav .n04 a:hover { background-position:-352px -38px; }
          #nav .n04 a:active { background-position:-352px -76px; }

          #nav .n05 a:link { background-position:-469px 0; }
          #nav .n05 a:visited { background-position:-469px -114px; }
          #nav .n05 a:hover { background-position:-469px -38px; }
          #nav .n05 a:active { background-position:-469px -76px; }

          #nav .n06 a:link { background-position:-586px 0; }
          #nav .n06 a:visited { background-position:-586px -114px; }
          #nav .n06 a:hover { background-position:-586px -38px; }
          #nav .n06 a:active { background-position:-586px -76px; }

          #nav .n07 a:link { background-position:-703px 0; }
          #nav .n07 a:visited { background-position:-703px -114px; }
          #nav .n07 a:hover { background-position:-703px -38px; }
          #nav .n07 a:active { background-position:-703px -76px; }
          -->
          </style>
          </head>
          <body>
          <div id="nav">
           <ul>
           <li class="n01"><a href="#index" title="index">index</a></li>
           <li class="n02"><a href="#Store" title="Store">Store</a></li>
           <li class="n03"><a href="#Mac" title="Mac">Mac</a></li>
           <li class="n04"><a href="#iPod+iTunes" title="iPod + iTunes">iPod + iTunes</a></li>
           <li class="n05"><a href="#iPhone" title="iPhone">iPhone</a></li>
           <li class="n06"><a href="#Downloads" title="Downloads">Downloads</a></li>
           <li class="n07"><a href="#Support" title="Support">Support</a></li>
           </ul>
          </div>
          </body>
          </html>

          相關閱讀
          深山旅行社網站管理系統 v1.8
          UL與LI 標簽詳解
          AJAX彈出提示信息效果與lightbox效果一樣
          兩個ASP中防止SQL注入式攻擊
          [轉]javascript緩沖效果
          成都中國青年旅行社開心旅游網
          Dreamweaver錯誤:在onload運行_beforeSave.htm時,發生了一個JavaScript錯誤
          css改變頁面中的文字顏色與字體粗體
          共有0條關于《仿MAC官網導航菜單》的評論
          發表評論
          正在加載評論......
          返回頂部發表評論
          呢 稱:
          表 情:
          內 容:
          評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
          驗證碼: 驗證碼 
          網友評論聲明,請自覺遵守互聯網相關政策法規。

          您發布的評論即表示同意遵守以下條款:
          一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
          二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
          三、本站對您所發布內容擁有處置權。

          更多信息>>欄目類別選擇
          百度小程序開發
          微信小程序開發
          微信公眾號開發
          uni-app
          asp函數庫
          ASP
          DIV+CSS
          HTML
          python
          更多>>同類信息
          dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
          javascript獲取瀏覽器指紋可以用來做投票
          火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
          DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
          js指定日期加n天加n月加n年
          jquery中動態生成的代碼使用on hover事件時不出現效果
          更多>>最新添加文章
          dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
          Android移動端自動化測試:使用UIAutomatorViewer與Selenium定位元素
          抖音直播音掛載小雪花 懂車帝小程序
          javascript獲取瀏覽器指紋可以用來做投票
          火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
          在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
          python通過代碼修改pip下載源讓下載庫飛起
          python里面requests.post返回的res.text還有其它的嗎
          更多>>隨機抽取信息
          黑色精靈留言板模板
          可以用于考試系統中試卷上交的javascript倒計時
          asp獲得系統Unix時間戳與將Unix時間戳轉為正常日期
          利用DateAdd把時間差轉換為正常日期格式
          在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
          asp利用函數生成指定位數的隨機數字符串
          88国产精品视频一区二区三区