導航欄是網站或應用程序中常見的一種布局元素，可以幫助我們快速找到我們需要的頁面或功能。本文將介紹如何使用 CSS 制作導航欄。

CSS 是一種用于樣式設計和布局的編程語言。它可以用于創建各種類型的網站布局，包括導航欄。在制作導航欄時，我們需要考慮以下幾個方面：

1. 導航欄的形狀和大小

我們需要決定導航欄的形狀和大小。常見的導航欄形狀有矩形、圓形、文本框等。大小可以通過設置行高和列寬來實現。

2. 導航欄的顏色和背景

3. 導航欄的文本

我們需要為導航欄添加文本。可以使用 CSS 的 text-align 和 text-decoration 屬性來設置導航欄的文本對齊方式，以及添加文本內容。

4. 導航欄的樣式

我們可以使用 CSS 的樣式來修改導航欄的樣式，包括字體、顏色、大小、對齊方式等。

下面是一個簡單的示例，展示了如何使用 CSS 制作一個簡單的導航欄：

/* 導航欄的樣式 */

nav {

width: 300px;

margin: 0 auto;

padding: 20px;

background-color: #f1f1f1;

/* 導航欄的形狀和大小 */

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

nav li {

display: inline-block;

width: 100%;

padding: 10px;

nav li a {

color: #111111;

text-decoration: none;

/* 導航欄的文本 */

nav li a:hover {

color: #333333;

通過使用 CSS，我們可以輕松地制作導航欄，并且可以根據不同的需求進行定制。