CSS實例教程：紅藍(lán)炫CSS橫向菜單_DIV+CSS實例
      
編輯Tag賺U幣
      


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


      
效果圖如下：

      

      

      　　HTML非常簡單：

      

      

       示例代碼 [www.wf0088.com]
      

      <ul id="nav">
      <li><a href="http://www.wf0088.com/">Div CSS教程</a></li>
      <li><a href="http://www.wf0088.com/" id="current">CSS布局實例</a></li>
      <li><a href="http://www.wf0088.com/">CSS2.0教程</a></li>
      <li><a href="http://www.wf0088.com/">CSS酷站欣賞</a></li>
      <li><a href="http://www.wf0088.com/">CSS模板下載</a></li>
      <li><a href="http://www.wf0088.com/">CSS在線手冊</a></li>
      <li><a href="http://www.wf0088.com/">Web標(biāo)準(zhǔn)</a></li>
      <li><a href="http://www.wf0088.com/">XHTML教程</a></li>
      </ul>
      

      

      　　我們主要學(xué)習(xí)理解CSS代碼中的一些知識：

      

      

       示例代碼 [www.wf0088.com]
      

      * {
      font-size:12px;
      text-align:center;
      }
      #nav {
      width:683px;
      margin:20px auto 0 auto;
      border:1px solid #ccc;
      border-right:none;
      }
      #nav li {
      display: inline;
      list-style-type: none;
      }
      #nav li a:link,#nav li a:visited {
      float:left;
      padding:3px 10px;
      text-decoration: none;
      color:#bbb;
      background:#f0f0f0;
      border-right:1px solid #ccc;
      }
      #nav li a:hover {
      color:#fff;
      background:#06c;
      }
      #nav li a#current {
      color:#fff;
      background:#f60;
      }
      

      

      　　看這一段代碼，或許你已經(jīng)非常熟悉了，前面的三個案例MB5U.com這方面的知識已經(jīng)講了很多。我們看與前面的案例所不同的地方：

      

      

       示例代碼 [www.wf0088.com]
      

      #nav {
      border:1px solid #ccc;
      border-right:none;
      }
      

      

      　　無序列表UL的邊框為一象素的實線，顏色是#ccc，但是右邊框線為無。
      　　這是為我們的菜單元素的邊框留下位置。

      

      

       示例代碼 [www.wf0088.com]
      

      #nav li a:link,#nav li a:visited {
      border-right:1px solid #ccc;
      }
      

      

      　　鏈接元素，我們設(shè)置了右邊框為一象素的實線，顏色是#ccc。
      　　這就形成了一個封閉的區(qū)域作為鏈接元素的容器。看上去還不錯。

      

      

       示例代碼 [www.wf0088.com]
      

      #nav li a#current {
      color:#fff;
      background:#f60;
      }
      

      

      　　這表示鏈接元素中id為current的屬性。文字顏色是#fff，背景色是#f60。
      　　這一設(shè)置是我們應(yīng)該記住的東西，它可以設(shè)置為當(dāng)前頁面的菜單的id。例如我們現(xiàn)在位于MB5U.com的Div CSS教程這一版塊。我們就將“Div CSS教程”菜單的id設(shè)為current。它就會以區(qū)別于其它菜單的樣式來顯示。這樣的設(shè)置還有其它的方法，可以給body賦予一個id。即可以控制整個頁面中需要標(biāo)注的部分，這樣的知識我們在以后的MB5U.com的文章是再具體的介紹。

      　　我們看最終的運行效果：

      

      

      div css xhtml xml 代碼調(diào)試框 代碼調(diào)試框 [www.wf0088.com]
      


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

      


      

      



      


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


      

      



      


      



      相關(guān)DIV+CSS實例：