DIVCSS圖形菜單之仿DreamWeaver_DIV+CSS實例
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      


						　　這是為了實現一個效果，而提前作的測試代碼！看起來很簡單的一個東西，到這會，大約四個小時過去了。不知道是IE6的BUG；還是我自已的BUG！有人問，你的CSS里邊寫的太麻煩了，呵呵， 你可以用簡單的方法試一試；IE6，7，FIREFOX都走一次就知道了。



      HTML代碼：
      示例代碼 [www.wf0088.com]
      <div id="info">
        <ul>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/1.gif" alt="A" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/2.gif" alt="B" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/3.gif" alt="C" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/4.gif" alt="D" align="absmiddle" /></a></li>
          <li><img src="http://p1.mb5u.com/divcss/m.gif" alt="M" align="absmiddle" /></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/5.gif" alt="E" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/6.gif" alt="F" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/7.gif" alt="G" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/8.gif" alt="H" align="absmiddle" /></a></li>
          <li><img src="http://p1.mb5u.com/divcss/m.gif" alt="M" align="absmiddle" /></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/9.gif" alt="I" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/10.gif" alt="J" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/11.gif" alt="K" align="absmiddle" /></a></li>
          <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/12.gif" alt="L" align="absmiddle" /></a></li>
        </ul>
      </div>

      加了hidefocus，是為了去掉點擊鏈接時的虛線。

      示例代碼 [www.wf0088.com]
      hidefocus="true"

      CSS代碼：

      示例代碼 [www.wf0088.com]
      *{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}

      #info{ background:#5F768B; padding:10px;}
      #info ul{background:url(http://www.zishu.cn/attachments/month_0706/images/bg.gif) repeat-x left top; padding:2px 10px;height:31px;}
      #info li{float:left;padding:2px;}

      a:link,a:visited{ background:none;float:left;display:block; padding:4px;}
      a:hover{background:url(http://www.zishu.cn/attachments/month_0706/images/on.gif) no-repeat left top; float:left; display:block;}
      a:active{background:url(http://www.zishu.cn/attachments/month_0706/images/on2.gif) no-repeat left top; float:left; display:block;}

      看最終的運行效果：

       代碼調試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運行查看效果 ]

      　　說實話，直到寫到這里，直到我再次修改這篇文章的時候，這個BUG我才終于處理完。但正常使用是不會有問題的！
      　　本文作者：zishu




      

      



      


      來源：無憂整理//所屬分類：DIV+CSS實例/更新時間：2007-07-19


      

      



      


      



      相關DIV+CSS實例：