在網頁布局中，任務欄是一個常見的效果。它可以讓用戶輕松快速地找到自己所需要的功能或選項，提高了網站的可用性和用戶體驗。下面我們來學習一下如何用 CSS 實現任務欄效果。

首先，我們需要在 HTML 文件中創建一個包含多個選項的列表。可以使用無序列表（ul）或有序列表（ol）來實現。例如，以下代碼創建了一個包含三個選項的無序列表：

<ul class="taskbar">
<li>選項一</li>
<li>選項二</li>
<li>選項三</li>
</ul>

然后，我們需要用 CSS 對這個列表進行樣式設置，使它具有任務欄的效果。比如，我們可以設置列表項的背景、邊框、字體樣式等等。下面是一個簡單的樣式設置示例：

.taskbar {
list-style: none;
display: flex; /* 使用 Flex 布局 */
justify-content: space-between; /* 在列表項之間平均分配空間 */
padding: 0;
margin: 0;
background-color: #333;
color: #fff;
}
.taskbar li {
padding: 10px 20px;
border: 1px solid #fff;
border-radius: 3px;
font-size: 16px;
text-align: center;
}
.taskbar li:hover {
background-color: #fff;
color: #333;
cursor: pointer;
}

上面的代碼中，我們使用了 Flex 布局將列表項水平排列。同時，我們給列表添加了一個背景色、字體顏色，并用邊框和圓角來美化每個列表項。最后，當鼠標懸浮在任何一個列表項上時，我們將其背景色和字體顏色進行反轉，并將光標變為手型。

通過這些樣式設置，我們就可以創建一個簡單的任務欄效果了。當然，你也可以繼續在樣式上進行優化和調整，以滿足更高的需求。