Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>DIV+CSS實(shí)例>

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

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

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

　　韓國(guó)風(fēng)格的網(wǎng)站設(shè)計(jì)思路之所以受到大家的喜歡，因?yàn)槠渖首兓S富，韓國(guó)風(fēng)格的網(wǎng)站有一個(gè)最明顯的特點(diǎn)就是對(duì)于表格或是標(biāo)題欄常會(huì)加上橫或豎的一條色帶。我們平常是常過(guò)圖象圖片軟件來(lái)制作這樣的效果，圖片體積大，下載較慢。我們完全可以用CSS來(lái)做這樣的風(fēng)格，因?yàn)橛肅SS只是對(duì)樣式定義，不需要應(yīng)用圖片，下載速度會(huì)大大加快。

　　我們可以建立一個(gè)無(wú)序列表，一個(gè)菜單行就是一個(gè)列表項(xiàng)。我們來(lái)看下面的XTHML代碼：

示例代碼 [m.dounai2.com]

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

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

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

　　我們來(lái)看看最終的運(yùn)行效果：

代碼調(diào)試框 [m.dounai2.com]

[ 可先修改部分代碼再運(yùn)行查看效果 ]