CSS實驗導航條是一個練習CSS技能的非常好的例子。在這個教程中，我們將使用HTML和CSS來創建一個簡單的導航條。

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
.nav {
list-style: none;
text-align: center;
background-color: #333;
padding: 0;
}
.nav li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.nav li a {
color: white;
padding: 10px 15px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.nav li a:hover {
background-color: white;
color: black;
}

在上面的代碼中，我們首先使用HTML標簽“ul”和“li”創建一個簡單的導航欄。我們然后將其添加到我們的CSS文件中進行樣式設置。

我們設置了導航欄的背景顏色、無序列表樣式、文本對齊方式、內邊距。我們還將項目設置為塊狀元素，并使用“display: inline-block”屬性使它們排成一行。

在設置鏈接樣式方面，我們更改了字體顏色、字體大小、加粗字體，以及鏈接上的文本無下劃線，并在當鼠標懸停在鏈接上時更改字體顏色和背景顏色。

通過這樣的方式，我們可以創建一個簡單而美觀的導航欄。當然，你可以繼續調整CSS屬性并確保它符合你的設想。