導航條該怎麼做？

考慮你需要導航的內容是一些無序的鏈結這種情況：

用 <ul> 標籤來編輯它們。

• link1
• link2
• link3
• link4
• link5

水準導航條

我們可以用 CSS 來控制這個列表顯示在網頁上的外觀。

通過使用 display:inline 我們可以創建水準導航條。

這是上面這個導航條用到的代碼：

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

垂直導航條

這是垂直導航條的代碼：

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

想瞭解更多？看看 Mark Newhouse 的文章吧，在 A List Apart 的 Taming lists， 以及在 CSS-Discuss wiki 的 "Styling lists"。