如何使用HTML將導航欄水平固定在頭部

Step 1: 打開DW并新建HTML文檔首先，打開Adobe Dreamweaver（DW）軟件，并創建一個新的HTML文檔。Step 2: 輸入導航欄代碼在新建的HTML文檔中，輸入以下代碼以創建

Step 1: 打開DW并新建HTML文檔

首先，打開Adobe Dreamweaver（DW）軟件，并創建一個新的HTML文檔。

Step 2: 輸入導航欄代碼

在新建的HTML文檔中，輸入以下代碼以創建導航欄：

```

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

```

Step 3: 去除小圓點

為了去除導航欄中的小圓點，添加以下CSS樣式：

```

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

```

Step 4: 導航欄左對齊

為了使導航欄水平固定在頭部上方，將導航欄列表項設置為左浮動：

```

li {

float: left;

}

```

Step 5: 定義背景顏色

如果當鼠標懸停在導航欄鏈接上時想要改變其背景顏色（例如，黑色），可以添加以下CSS樣式：

```

li a:hover {

background-color: #111;

}

```

Step 6: 定義字體樣式

最后，定義導航欄鏈接的字體大小、顏色以及其他樣式：

```

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

```

Step 7: 預覽導航欄

按下F12鍵預覽你的HTML文檔，你會看到導航欄水平固定在頭部上方。完成！

這些步驟將幫助你將導航欄水平固定在頭部上方，并可以自定義其樣式和外觀。使用以上提供的HTML和CSS代碼，你可以輕松創建一個漂亮且功能完善的導航欄。