本文目錄導(dǎo)讀：

1. 設(shè)計(jì)基本的導(dǎo)航欄結(jié)構(gòu)
2. 利用CSS進(jìn)行樣式設(shè)置
3. 響應(yīng)式設(shè)計(jì)

用CSS打造精美導(dǎo)航欄

在網(wǎng)頁設(shè)計(jì)中，導(dǎo)航欄作為用戶訪問網(wǎng)站各個(gè)頁面的主要途徑，其設(shè)計(jì)***關(guān)重要，而利用CSS（層疊樣式表）進(jìn)行導(dǎo)航欄的設(shè)置，可以極大地豐富導(dǎo)航欄的樣式和用戶體驗(yàn)，本文將向你介紹如何用CSS設(shè)置導(dǎo)航欄。

設(shè)計(jì)基本的導(dǎo)航欄結(jié)構(gòu)

我們需要在HTML中創(chuàng)建一個(gè)基本的導(dǎo)航欄結(jié)構(gòu)，我們會(huì)使用無序列表（ul）和列表項(xiàng)（li）來創(chuàng)建導(dǎo)航鏈接。

<ul id="navbar">
  <li><a href="#">首頁</a></li>
  <li><a href="#">關(guān)于我們</a></li>
  <li><a href="#">服務(wù)</a></li>
  <li><a href="#">產(chǎn)品</a></li>
  <li><a href="#">聯(lián)系我們</a></li>
</ul>

利用CSS進(jìn)行樣式設(shè)置

我們可以通過CSS來設(shè)置導(dǎo)航欄的樣式，我們可以設(shè)置導(dǎo)航欄的位置、顏色、字體、鼠標(biāo)懸停效果等。

/* 設(shè)置導(dǎo)航欄的基本樣式 */
#navbar {
  list-style-type: none; /* 移除列表前的標(biāo)記 */
  margin: 0; /* 移除上下邊距 */
  padding: 0; /* 移除左右邊距 */
  background-color: #333; /* 設(shè)置背景色 */
}
#navbar li {
  display: inline; /* 使列表項(xiàng)水平排列 */
}
#navbar li a {
  display: block; /* 使鏈接占據(jù)整個(gè)列表項(xiàng) */
  color: #fff; /* 設(shè)置文字顏色 */
  text-align: center; /* 文字居中對(duì)齊 */
  padding: 14px 16px; /* 設(shè)置內(nèi)邊距 */
  text-decoration: none; /* 移除下劃線 */
}
/* 設(shè)置鼠標(biāo)懸停效果 */
#navbar li a:hover {
  background-color: #111; /* 鼠標(biāo)懸停時(shí)的背景色 */
}

響應(yīng)式設(shè)計(jì)

為了讓導(dǎo)航欄在各種設(shè)備上都能良好地顯示，我們還需要對(duì)其進(jìn)行響應(yīng)式設(shè)計(jì)，可以通過媒體查詢（media queries）來實(shí)現(xiàn)，當(dāng)屏幕寬度小于某個(gè)值時(shí)，我們可以將水平排列的導(dǎo)航欄改為垂直排列。

就是如何用CSS設(shè)置導(dǎo)航欄的基本方法，通過不斷地實(shí)踐和嘗試，你可以創(chuàng)建出各種樣式豐富、用戶體驗(yàn)優(yōu)良的導(dǎo)航欄。