本文目錄導(dǎo)讀：
CSS在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用廣泛，其中菜單跳轉(zhuǎn)頁(yè)面是常見(jiàn)的功能之一，下面將介紹如何使用CSS制作菜單并實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。
HTML結(jié)構(gòu)搭建
我們需要搭建基本的HTML結(jié)構(gòu)，我們會(huì)使用無(wú)序列表（ul）和列表項(xiàng)（li）來(lái)創(chuàng)建菜單項(xiàng)。
<ul id="menu"> <li><a href="page1.html">頁(yè)面1</a></li> <li><a href="page2.html">頁(yè)面2</a></li> <li><a href="page3.html">頁(yè)面3</a></li> </ul>
CSS樣式設(shè)計(jì)
我們可以使用CSS來(lái)設(shè)計(jì)菜單的樣式，我們可以設(shè)置菜單項(xiàng)的字體、顏色、背景等，我們還可以使用CSS的偽類(lèi)來(lái)改變鼠標(biāo)懸停時(shí)的樣式，提高用戶(hù)體驗(yàn)。
#menu {
list-style-type: none; /* 移除列表前的標(biāo)記 */
margin: 0; /* 移除外邊距 */
padding: 0; /* 移除內(nèi)邊距 */
}
#menu li {
display: inline-block; /* 使列表項(xiàng)水平排列 */
margin-right: 10px; /* 菜單項(xiàng)之間的間距 */
}
#menu li a {
color: #333; /* 文字顏色 */
text-decoration: none; /* 去除下劃線(xiàn) */
}
#menu li a:hover {
color: #fff; /* 鼠標(biāo)懸停時(shí)的文字顏色 */
background-color: #333; /* 鼠標(biāo)懸停時(shí)的背景顏色 */
}實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
上述HTML代碼中，我們已經(jīng)通過(guò)<a>標(biāo)簽的href屬性實(shí)現(xiàn)了頁(yè)面跳轉(zhuǎn)，當(dāng)用戶(hù)點(diǎn)擊某個(gè)菜單項(xiàng)時(shí)，瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，這是通過(guò)HTML的默認(rèn)行為實(shí)現(xiàn)的，不需要額外的CSS或JavaScript代碼。
使用CSS制作菜單并實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)是一個(gè)相對(duì)簡(jiǎn)單的過(guò)程，我們需要搭建基本的HTML結(jié)構(gòu)，然后使用CSS來(lái)設(shè)計(jì)菜單的樣式，***后通過(guò)<a>標(biāo)簽的href屬性實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，通過(guò)這種方式，我們可以創(chuàng)建出美觀(guān)且功能完善的網(wǎng)頁(yè)菜單。
