CSS實(shí)例教程：紅藍(lán)炫CSS橫向菜單_DIV+CSS實(shí)例

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

效果圖如下：

　　HTML非常簡單：

示例代碼 [www.hl5o.cn]

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

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

示例代碼 [www.hl5o.cn]

* {
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)非常熟悉了，前面的三個(gè)案例MB5U.com這方面的知識已經(jīng)講了很多。我們看與前面的案例所不同的地方：

示例代碼 [www.hl5o.cn]

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

　　無序列表UL的邊框?yàn)橐幌笏氐膶?shí)線，顏色是#ccc，但是右邊框線為無。
　　這是為我們的菜單元素的邊框留下位置。

示例代碼 [www.hl5o.cn]

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

　　鏈接元素，我們設(shè)置了右邊框?yàn)橐幌笏氐膶?shí)線，顏色是#ccc。
　　這就形成了一個(gè)封閉的區(qū)域作為鏈接元素的容器�？瓷先ミ€不錯(cuò)。

示例代碼 [www.hl5o.cn]

#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。它就會(huì)以區(qū)別于其它菜單的樣式來顯示。這樣的設(shè)置還有其它的方法，可以給body賦予一個(gè)id。即可以控制整個(gè)頁面中需要標(biāo)注的部分，這樣的知識我們在以后的MB5U.com的文章是再具體的介紹。

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.hl5o.cn</title>
<style type="text/css">
* {
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;
}
</style>
</head>
<body>
<ul id="nav">
<li>Div CSS教程</li>
<li><a href="/tz.php?url=www.hl5o.cn/" _fcksavedurl="/tz.php?url=www.hl5o.cn/" id="current">CSS布局實(shí)例</li>
<li>CSS2.0教程</li>
<li>CSS酷站欣賞</li>
<li>CSS模板下載</li>
<li>CSS在線手冊</li>
<li>Web標(biāo)準(zhǔn)</li>
<li>XHTML教程</li>
</ul>
</body>
</html>

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