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

1. 準(zhǔn)備HTML結(jié)構(gòu)
2. 應(yīng)用CSS樣式
3. 添加交互效果（可選）

如何用CSS制作網(wǎng)頁(yè)左邊的導(dǎo)航欄

在網(wǎng)頁(yè)設(shè)計(jì)中，導(dǎo)航欄是不可或缺的元素，它可以幫助用戶快速找到所需內(nèi)容，而CSS作為網(wǎng)頁(yè)設(shè)計(jì)的核心語(yǔ)言，可以實(shí)現(xiàn)各種樣式的導(dǎo)航欄，下面，我們將介紹如何用CSS制作網(wǎng)頁(yè)左邊的導(dǎo)航欄。

準(zhǔn)備HTML結(jié)構(gòu)

我們需要準(zhǔn)備HTML結(jié)構(gòu)來(lái)承載導(dǎo)航欄的內(nèi)容，可以創(chuàng)建一個(gè)包含多個(gè)列表項(xiàng)的無(wú)序列表，每個(gè)列表項(xiàng)代表一個(gè)導(dǎo)航鏈接。

<ul id="nav">
  <li><a href="#">鏈接1</a></li>
  <li><a href="#">鏈接2</a></li>
  <li><a href="#">鏈接3</a></li>
  <li><a href="#">鏈接4</a></li>
  <li><a href="#">鏈接5</a></li>
</ul>

應(yīng)用CSS樣式

我們將應(yīng)用CSS樣式來(lái)制作左邊的導(dǎo)航欄，以下是一個(gè)基本的樣式示例：

#nav {
  list-style-type: none; /* 去除列表樣式 */
  margin: 0; /* 去除外邊距 */
  padding: 0; /* 去除內(nèi)邊距 */
  overflow: hidden; /* 隱藏超出容器的內(nèi)容 */
}
#nav li {
  float: left; /* 讓列表項(xiàng)浮動(dòng)到左邊 */
  width: 200px; /* 設(shè)置列表項(xiàng)的寬度 */
  height: 50px; /* 設(shè)置列表項(xiàng)的高度 */
  margin: 10px; /* 設(shè)置列表項(xiàng)的外邊距 */
  padding: 15px; /* 設(shè)置列表項(xiàng)的內(nèi)邊距 */
  border: 1px solid #ccc; /* 添加邊框 */
  text-align: center; /* 文本居中顯示 */
  line-height: 50px; /* 設(shè)置文本的行高 */
}
#nav li a {
  text-decoration: none; /* 去除下劃線 */
  color: #333; /* 設(shè)置文本顏色 */
}

在這個(gè)樣式中，我們使用了float: left;來(lái)讓列表項(xiàng)浮動(dòng)到左邊，并使用width和height屬性來(lái)設(shè)置列表項(xiàng)的大小，我們還設(shè)置了列表項(xiàng)的外邊距、內(nèi)邊距、邊框樣式以及文本的樣式。

添加交互效果（可選）

為了讓導(dǎo)航欄更加實(shí)用，我們可以添加一些交互效果，比如鼠標(biāo)懸停時(shí)改變顏色或添加動(dòng)畫(huà)效果，以下是一個(gè)示例：

#nav li:hover {
  background-color: #f8f8f8; /* 鼠標(biāo)懸停時(shí)改變背景顏色 */
}

在這個(gè)示例中，我們使用了:hover偽類(lèi)來(lái)添加鼠標(biāo)懸停時(shí)的樣式，當(dāng)鼠標(biāo)懸停在列表項(xiàng)上時(shí)，背景顏色會(huì)變?yōu)?code>#f8f8f8。

通過(guò)以上步驟，我們可以使用CSS制作出左邊的導(dǎo)航欄，并根據(jù)需要添加交互效果來(lái)提升用戶體驗(yàn)，希望這篇文章對(duì)你有所幫助！