導航條是網頁中常見的一個組件，它可以幫助用戶快速找到需要的頁面或功能。CSS是一種用于控制網頁樣式的語言，下面介紹如何使用CSS來實現一個漂亮的導航條。

/* 第一步：創建導航條容器 *//* 第二步：設置導航條樣式 */
.nav-container {
display: flex; /* 將導航項橫向排列 */
justify-content: space-between; /* 將導航項平均分配寬度，對齊 */
align-items: center; /* 將導航項居中對齊 */
background-color: #f2f2f2; /* 設置導航條背景色 */
}
.nav-list {
display: flex; /* 將導航項橫向排列 */
list-style: none; /* 去除列表樣式 */
margin: 0;
padding: 0;
}
.nav-list li {
padding: 10px;
}
.nav-list li a {
text-decoration: none; /* 去除下劃線 */
font-weight: bold; /* 設置字體加粗 */
color: #333; /* 設置字體顏色 */
}
.nav-list li a:hover {
color: #fff;
background-color: #333; /* 鼠標懸停時設置背景色 */
}

這段代碼包含兩步操作。第一步是創建導航條容器，其中包含了一個無序列表（ul）以及若干個列表項（li），每個列表項包含一個超鏈接（a）。第二步是設置導航條的樣式，包括將導航項橫向排列、設置背景色、去除下劃線、設置字體加粗、設置字體顏色和鼠標懸停時設置背景色。其中，flex布局是實現導航條橫向布局的關鍵，它可以使導航項根據容器的寬度自動分配寬度。