用“ul li”及css制作韓國風格菜單_DIV+CSS實例

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!
        韓國網站的設計風格特征鮮明,色彩明快,現在越來越多的人正在模擬這種風格,
      下圖為一個韓式風格的網站效果:



        韓國風格的網站設計思路之所以受到大家的喜歡,因為其色彩變化豐富,韓國風格的網站有一個最明顯的特點就是對于表格或是標題欄常會加上橫或豎的一條色帶。我們平常是常過圖象圖片軟件來制作這樣的效果,圖片體積大,下載較慢。我們完全可以用CSS來做這樣的風格,因為用CSS只是對樣式定義,不需要應用圖片,下載速度會大大加快。

        我們可以建立一個無序列表,一個菜單行就是一個列表項。我們來看下面的XTHML代碼:

      示例代碼 [www.wf0088.com]
      <ul id="nav">
      <li class="aa"><a href="http://www.wf0088.com/">CSS Templates Free Download</a></li>
      <li class="bb"><a href="http://www.wf0088.com/">CSS WebSites Showcase</a></li>
      <li class="cc"><a href="http://www.wf0088.com/">CSS Web Design Article </a></li>
      </ul>

        我們用CSS定義上面的無序列表,形成我們想要的菜單。CSS代碼如下:

      示例代碼 [www.wf0088.com]
      #nav li {list-style:none; width:200px; margin-top:5px;padding:4px 6px;}
      #nav li a {text-decoration:none; color:#666;}
      #nav li a:hover {color:#000;}
      .aa {border-top:4px solid #7BC110; background:#be6;}
      .bb {border-top:4px solid #ff9900; background:#fc3;}
      .cc {border-top:4px solid #ff66ff; background:#fcf;}

        上面的CSS代碼中,首先我們定義了列表項,寬度外邊距及內邊距。再設置鏈接文字的樣式。我們使用類aa、bb、cc來定義不同列表項的色彩,在這三個類的定義中,我們定義了上邊框為4px。也就是韓國風格中最常見的色帶。

        我們來看看最終的運行效果:

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

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

        

      來源:無憂整理//所屬分類:DIV+CSS實例/更新時間:2007-02-24
      相關DIV+CSS實例