今天我們來學(xué)習(xí)如何使用純CSS制作一個(gè)漂亮的網(wǎng)頁導(dǎo)航欄。首先，我們需要使用HTML代碼來構(gòu)建導(dǎo)航欄的框架，然后使用CSS來進(jìn)行樣式設(shè)計(jì)。 以下是基本的HTML代碼：

<nav>
<ul class="menu">
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品介紹</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>

我們使用了HTML5中的新標(biāo)簽<nav>來包含導(dǎo)航欄。在該標(biāo)簽內(nèi)，我們使用<ul>和<li>標(biāo)簽來創(chuàng)建導(dǎo)航欄，其中<ul>使用了一個(gè)名為“menu”的class來為CSS提供樣式選擇器。 現(xiàn)在我們來添加CSS樣式代碼：

nav {
background-color: #333;
height: 50px;
width: 100%;
position: fixed;
top: 0;
overflow: hidden;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.menu li {
display: inline-block;
margin: 0;
padding: 0;
}
.menu li a {
display: block;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 15px 20px;
text-decoration: none;
}
.menu li a:hover {
background-color: #111;
}

在上述代碼中，我們?cè)O(shè)置了導(dǎo)航欄的背景顏色、高度、寬度、位置等基本樣式屬性。我們還應(yīng)用了一個(gè)名為“menu”的class來選擇導(dǎo)航欄中的所有項(xiàng)目，并使用CSS設(shè)置它們的樣式，例如刪除了項(xiàng)目標(biāo)記、設(shè)置文本居中、改變項(xiàng)目之間的空白以及將鏈接樣式應(yīng)用于項(xiàng)目等等。 最后，我們?cè)贑SS代碼中添加了:hover偽類，以為鼠標(biāo)懸停在導(dǎo)航欄上時(shí)添加一個(gè)反色背景顏色的效果。 通過上面的代碼，我們成功地創(chuàng)建了一個(gè)漂亮的網(wǎng)頁導(dǎo)航欄，而不需要使用任何JavaScript或其他外部框架。這不僅可以加快網(wǎng)頁的加載速度，還可以提高網(wǎng)頁的可訪問性和可維護(hù)性。