CSS網頁導航條是網頁設計中常見的一種元素，通過以下步驟可以實現一個簡單的導航條。

/* 以下是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是導航條的類名，通過display:flex屬性將導航項水平排列，list-style-type:none將列表樣式設為無，background-color設置背景色，padding和margin設置內外間距。

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

.navigation li:hover是導航條里每一項鼠標懸停時的樣式，通過background-color設置背景色。

.active是當前活動導航項的樣式，通過background-color設置背景色。

使用以上代碼，并設置導航條的HTML結構，如下所示：

<ul class="navigation">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">新聞動態</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

以上代碼定義了一個包含四項的導航條，其中第一項為當前活動導航項。

通過以上步驟，我們可以實現一個簡單的CSS網頁導航條。