在網(wǎng)頁設(shè)計中，導(dǎo)航欄是非常重要的一部分，通過合理的設(shè)計可以有效提高網(wǎng)頁的易用性和導(dǎo)航性。CSS技術(shù)是現(xiàn)代網(wǎng)頁設(shè)計中不可或缺的部分，它可以用來控制HTML文檔的樣式和布局。下面我們將介紹如何使用CSS來制作一個簡單的導(dǎo)航欄，并且提供配套的制作視頻。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
width: 100%;
height: 60px;
}
.nav ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav a {
padding: 15px;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
}
.nav a:hover {
background-color: #fff;
color: #333;
}

代碼中的.nav類定義了導(dǎo)航欄的樣式，使用了flex布局方便對子元素進(jìn)行排列。ul和a標(biāo)簽則定義了導(dǎo)航欄的具體內(nèi)容和鏈接樣式，其中hover偽類實現(xiàn)了鼠標(biāo)懸停時的效果。該代碼可以直接使用或者根據(jù)實際需求進(jìn)行適當(dāng)調(diào)整。

為了更好的理解和學(xué)習(xí)，我們提供了以下導(dǎo)航欄制作視頻，希望對想要學(xué)習(xí)CSS導(dǎo)航欄制作的朋友有所幫助。