1、 常見實用的水平導航條
建立一個html檔案：
代碼：
<!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>常用水平導航製作方式</title>
</head>
<style type="text/css">
#globallink{
margin:0px; padding:0px; /*邊界、填充均為0*/
clear:both; /*清除浮動*/
}
#globallink ul{
list-style:none; /*不顯示列表圖象，預設實心圓等*/
padding:0px; margin:0px;
display:inline; /*內聯對象的預設值。用該值將從對象中刪除行 */
}
#globallink li{
float:left; /*這是關鍵語句，li不換行 實現橫向排列*/
text-align:center; /* 文字置中對齊*/
width:100px; /*每個串連塊的寬度為100px*/
}
#globallink li a{
display:block; /*當然區塊層級元素來顯示，使得連結變成一個按鈕 */
padding:9px 6px 11px 6px; /*填充上、右、下 、左*/
margin:0px; /*邊界為0px*/
}
#globallink li a:link, #globallink li a:visited{
color:#FFF; /*字型顏色設定為白色，在css中可以縮寫 例如：#f98與ff9988是一樣的*/
font-size:17px; /*字型大小為17px值*/
text-decoration:none; /*不顯示底線*/
background-color:#3366CC; /*設定導航條背景色為藍色*/
}
#globallink li a:hover{ /*設定對象在其滑鼠移至上方時的樣式表屬性*/
background-color:#ff9933; /*改變背景顏色*/
text-decoration:underline; /*加上底線*/
font-size:20px; /*滑鼠移至上方時字型放大為20px*/
}
</style>
<body>
<div id="globallink">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">網上校園</a></li>
<li><a href="#">管理培訓</a></li>
<li><a href="#">網上課堂</a></li>
<li><a href="#">我要報名</a></li>
<li><a href="#">文化沙龍</a></li>
<li><a href="#">學院論壇</a></li>
<li><a href="#">關於我們</a></li>
</ul>
</div>
</body>
</html>
這個就是最常見的導航條製作過程了，實現了滑鼠訪問前懸停，以及釋放離去的效果。
以下是開啟網頁的顯示效果：
以下為IE滑鼠移至上方的效果：
感興趣的朋友可以把 background-color:#ff9933; 換成background-image:XXXXX;來試下，放入喜歡的圖片，就能做出屬於自己的個性導航了喔。
2、 垂直紅色立體導航
<!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>垂直紅色立體導航</title>
</head>
<style type="text/css">
#navigation {
width:115px;
font-size:13px;
}
#navigation ul {
list-style-type:none; /* 不顯示項目符號 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加底線 */
}
#navigation li a{
display:block; /* 區塊顯示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊 */
border-right:1px solid #711515; /* 右側陰影 */
background-image:url(img/17.JPG);
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 滑鼠經過時 */
background-color:#990020; /* 改變背景色 */
color:#ffff00; /* 改變文字顏色 */
}
</style>
<body>
<div id="navigation">
<ul>
<li><a href="http://www.cnblogs.com/">部落格園首頁</a></li>
<li><a href="http://space.cnblogs.com/">社區</a></li>
<li><a href="http://space.cnblogs.com/">快閃記憶體</a></li>
<li><a href="http://space.cnblogs.com/q">博問</a></li>
<li><a href="http://news.cnblogs.com/">news</a></li>
<li><a href="http://space.cnblogs.com/myfriends">好友</a></li>
<li><a href="http://wz.cnblogs.com/">網摘</a></li>
<li><a href="http://www.cnblogs.com/csn0721/">我的部落格</a></li>
</ul>
</div>
</body>
</html>
FF瀏覽效果：
IE滑鼠點擊效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
