CSS應用實例(6)-導覽列

要使用CSS製作像這樣美觀的導覽列(目錄),其實是很容易的。由於網誌撰寫限制的關係,我沒有辦法設定當滑鼠移過去時產生的變化,所以在每個項目外加了白色的框線,比較好辨別它的範圍。下面的程式碼和上面的範例結果略有不同,在滑鼠移過去時,會產生顏色的變化,也沒有白色的框線。

導覽列的HTML語法很簡單,其實就是項目符號。只要按照下面這樣簡單地標示即可。


接下來CSS的部份才是重頭戲,參考下面程式碼的註解應該就能夠理解。比較需要注意的是第7行的float,它會決定導覽列是垂直或是水平排列。如果對語法不清楚,可以參考圖層控制文字段落樣式等文章。

ul {
    list-style-type:none;       /* 刪除項目符號 */
    margin:0px;         /* 取消項目符號的外距 */
    padding:0px;            /* 取消項目符號的內距 */
}
li {
    float:left;         /* 文繞圖,讓所有項目變成水平排列 */
}
li a {
    display:block;          /* 將inline元素改為block */
    width:60px;         /* 設定方塊寬度 */
    padding:3px;            /* 設定方塊內距 */

    font-variant:small-caps;    /* 將小寫字母轉換成大寫 */
    font-weight:bold;       /* 文字粗體 */
    text-align:center;      /* 文字置中 */
    text-decoration:none;       /* 消除連結底線 */

    color:#996633;          /* 文字顏色 */
    background-color:#FBDC9B;   /* 連結背景 */
}
li a:hover {
    color:white;            /* 滑鼠經過時的文字顏色 */
    background-color: #996633;  /* 滑鼠經過時的背景 */
}

參考網站:W3Schools - CSS Navigation Bar