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

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

　　韓國網(wǎng)站的設(shè)計風(fēng)格特征鮮明，色彩明快，現(xiàn)在越來越多的人正在模擬這種風(fēng)格，
下圖為一個韓式風(fēng)格的網(wǎng)站效果：

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

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

示例代碼 [www.hl5o.cn]

<ul id="nav">
<li class="aa"><a href="http://www.hl5o.cn/">CSS Templates Free Download</a></li>
<li class="bb"><a href="http://www.hl5o.cn/">CSS WebSites Showcase</a></li>
<li class="cc"><a href="http://www.hl5o.cn/">CSS Web Design Article </a></li>
</ul>

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

示例代碼 [www.hl5o.cn]

#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代碼中，首先我們定義了列表項，寬度外邊距及內(nèi)邊距。再設(shè)置鏈接文字的樣式。我們使用類aa、bb、cc來定義不同列表項的色彩，在這三個類的定義中，我們定義了上邊框為4px。也就是韓國風(fēng)格中最常見的色帶。

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

代碼調(diào)試框 [www.hl5o.cn]

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