用 CSS 設(shè)計(jì)導(dǎo)航欄是一種常見的網(wǎng)站設(shè)計(jì)技術(shù)，可以讓網(wǎng)站更加美觀，易于維護(hù)和擴(kuò)展。本文將介紹如何使用 CSS 設(shè)計(jì)導(dǎo)航欄，包括如何使用序號(hào)標(biāo)題，如何添加背景和導(dǎo)航欄圖標(biāo)等。

## 1. 設(shè)計(jì)導(dǎo)航欄

```html

<nav>

<ul>

<li><a href="#">首頁(yè)</a></li>

<li><a href="#">關(guān)于我們</a></li>

<li><a href="#">產(chǎn)品列表</a></li>

<li><a href="#">服務(wù)列表</a></li>

</ul>

</nav>

```css

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

nav li {

display: inline-block;

margin-right: 10px;

nav a {

color: #fff;

text-decoration: none;

padding: 8px 16px;

border-radius: 4px;

background-color: #007bff;

nav a:hover {

background-color: #0056b3;

## 2. 添加背景

為了添加背景，可以使用 CSS 的 `background` 屬性。例如，以下代碼演示了如何添加一個(gè)背景圖片到導(dǎo)航欄：

```css

nav {

background: url('background.jpg');

background-size: cover;

background-position: center;

在這個(gè)例子中，我們使用了 `background-size` 屬性和 `background-position` 屬性來(lái)設(shè)置背景圖片的大小和位置。我們使用了 `cover` 值，這意味著背景圖片將覆蓋整個(gè)頁(yè)面。`background-position` 屬性用于指定背景圖片的位置。

## 3. 添加導(dǎo)航欄圖標(biāo)

```css

nav {

background: url('background.jpg');

background-size: cover;

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

nav li {

display: inline-block;

margin-right: 10px;

nav a {

color: #fff;

text-decoration: none;

padding: 8px 16px;

border-radius: 4px;

background-color: #007bff;

border: none;

cursor: pointer;

nav a:hover {

background-color: #0056b3;

通過(guò)使用 CSS 設(shè)計(jì)導(dǎo)航欄，可以輕松地創(chuàng)建美觀、易于維護(hù)和擴(kuò)展的網(wǎng)站導(dǎo)航欄。