CSS是一種強(qiáng)大的樣式語(yǔ)言，我們可以使用它來(lái)制作各種各樣的UI界面，其中導(dǎo)航條是很常見(jiàn)的一個(gè)UI組件。下面我將向大家演示如何使用CSS來(lái)制作導(dǎo)航條。

<!-- HTML結(jié)構(gòu) -->
<ul class="nav-bar">
<li class="active"><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
<!-- CSS樣式 -->
.nav-bar {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
.nav-bar li {
float: left;
border-right: 1px solid #bbb;
}
.nav-bar li:last-child {
border-right: none;
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-bar li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}

首先，我們需要定義一個(gè)ul標(biāo)簽，并賦予其class為nav-bar，然后在其中添加我們需要的li標(biāo)簽。其中，我們可以可以使用偽類選擇器來(lái)為當(dāng)前選中的導(dǎo)航項(xiàng)添加active類，并使用CSS樣式來(lái)為不同狀態(tài)的導(dǎo)航項(xiàng)添加不同的樣式。比如，我們可以為鼠標(biāo)懸浮在導(dǎo)航項(xiàng)上時(shí)添加hover樣式，為當(dāng)前選中的導(dǎo)航項(xiàng)添加active樣式等。

通過(guò)這些簡(jiǎn)單的CSS樣式設(shè)置，我們可以用很簡(jiǎn)單的HTML代碼來(lái)實(shí)現(xiàn)一個(gè)美觀并且功能豐富的導(dǎo)航條。