CSS網(wǎng)頁導(dǎo)航條是網(wǎng)頁設(shè)計(jì)中常見的一種元素，通過以下步驟可以實(shí)現(xiàn)一個簡單的導(dǎo)航條。

/* 以下是CSS樣式代碼 */
.navigation{
display: flex;
list-style-type: none;
background-color: #333;
padding: 0;
margin: 0;
}
.navigation li {
flex: 1;
text-align: center;
padding: 12px 16px;
color: white;
}
.navigation li:hover {
background-color: #555;
}
.active {
background-color: #4CAF50;
}

以上代碼中，.navigation是導(dǎo)航條的類名，通過display:flex屬性將導(dǎo)航項(xiàng)水平排列，list-style-type:none將列表樣式設(shè)為無，background-color設(shè)置背景色，padding和margin設(shè)置內(nèi)外間距。

.navigation li是導(dǎo)航條里每一項(xiàng)的樣式，通過flex:1屬性讓導(dǎo)航項(xiàng)均分寬度，text-align:center使文本居中對齊，padding設(shè)置內(nèi)間距，color設(shè)置文本顏色。

.navigation li:hover是導(dǎo)航條里每一項(xiàng)鼠標(biāo)懸停時(shí)的樣式，通過background-color設(shè)置背景色。

.active是當(dāng)前活動導(dǎo)航項(xiàng)的樣式，通過background-color設(shè)置背景色。

使用以上代碼，并設(shè)置導(dǎo)航條的HTML結(jié)構(gòu)，如下所示：

<ul class="navigation">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品介紹</a></li>
<li><a href="#">新聞動態(tài)</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>

以上代碼定義了一個包含四項(xiàng)的導(dǎo)航條，其中第一項(xiàng)為當(dāng)前活動導(dǎo)航項(xiàng)。

通過以上步驟，我們可以實(shí)現(xiàn)一個簡單的CSS網(wǎng)頁導(dǎo)航條。