CSS導航菜單制作教程-代碼實戰
編輯：CSS詳解
用CSs實戰一個簡潔實用的橫向導航菜單，為了讓您便於理解，我們為每一條CSS的定義都加上了注釋，相信你年地本篇菜單制作教程，你肯定能用CSS寫出更漂亮的導航菜單來，下面開始言歸正傳。請直接看代碼吧：
01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
02
<Html XMLns="http://www.w3.org/1999/xHtml">
03
<head>
04
<meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
05
<title>CSS導航欄制作實例</title>
06
<style type="text/CSS">
07
#nav {height:26px;/*定義整個導航欄高度，並讓菜單下面顯示一條2像素的線*/
08
border-bottom:2px solid #2788da;
09
font:16px "微軟雅黑";
10
}
11
#nav li{float:left;/*使li向左浮動,這樣每個LI就自動橫向排列了*/list-style-type: none; /*定義每個LI列表前的圓形標號為無，如果你想要顯示圓點標號，可去掉此定義*/}
12
#nav li a{
13
color:#336699; /*定義菜單中的鏈接文字顏色*/
14
text-decoration:none;/*菜單鏈接下劃線為無*/
15
padding-top:4px; /*文字距頂端為4px,調整文字上下居中用*/
16
display:block; /*使a鏈接對象的顯示方式由一段文本改為一個塊狀對象(block)，就可以使用CSS的外邊距、內邊距、邊框等屬性了*/
17
width:80px;/*每個a的block寬度*/
18
height:22px;/*每個a的block高度*/
19
text-align:center; /*文字格式居中(水平)*/
20
background-color:#ececec;
21
margin-left:2px;/*控制每個block間距2px*/
22
}
23
#nav li a:hover{/*定義鏈接文字的鼠標懸停樣式*/
24
background-color:green;
25
color:#ffffff;
26
}
27
#nav li a#current{/*控制當前頁導航項特殊顯示*/
28
background-color:#2788da;
29
color:#ffffff;
30
}
31
</style>
32
</head>
33
<body>
34
<ul id="nav">
35
<li><a href="#" id="current">網站首頁</a></li>
36
<li><a href="#">文章參考</a></li>
37
<li><a href="#">VB參考</a></li>
38
<li><a href="#">Blog推薦</a></li>
39
<li><a href="#">論壇交流</a></li>
40
<li><a href="#">RSS</a></li>
41
</ul>
42
</body>
43
</Html>
怎麼樣，不錯吧，認真看下代碼，相信聰明的你一定會學會CSS菜單制作方法的。菜單效果如下：
小編推薦
熱門推薦