如何制作垂直導航欄：HTML與CSS實現

在網頁設計中，導航欄是一個至關重要的元素，它可以幫助用戶輕松瀏覽網站內容。本文將介紹如何通過HTML和CSS制作一個垂直導航欄。 使用Dreamweaver創建新的HTML文檔首先，打開Dreamwe

在網頁設計中，導航欄是一個至關重要的元素，它可以幫助用戶輕松瀏覽網站內容。本文將介紹如何通過HTML和CSS制作一個垂直導航欄。

使用Dreamweaver創建新的HTML文檔

首先，打開Dreamweaver軟件并新建一個HTML文檔。在body標簽中輸入以下代碼：

```html

• 主頁
• 日志
• 聯系
• 關于我們

```

去除默認列表樣式并設置導航欄樣式

為了去除默認的列表樣式，我們需要在style標簽中添加以下CSS代碼：

```css

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: f1f1f1;

}

li a {

display: block;

color: 000;

padding: 8px 16px;

text-decoration: none;

}

li a:hover {

background-color: 555;

color: white;

}

```

預覽導航欄效果

完成以上步驟后，按下F12預覽你的網頁。你會看到你的導航欄已經以垂直的方式展示出來了。這樣的導航欄不僅簡潔美觀，而且易于用戶點擊瀏覽。

通過以上簡單的HTML和CSS代碼，你可以輕松制作一個垂直導航欄，為你的網站增添更多交互性和吸引力。嘗試將這個垂直導航欄應用到你的網頁設計中，提升用戶體驗和頁面美感吧！