任務欄是很多網站常見的一種導航欄，用于快速切換頁面或進行重要操作。在網頁設計中，合理的任務欄設計可以提高用戶體驗，讓用戶更輕松地操作網站。下面來介紹一些常用的任務欄CSS樣式。

/* 任務欄基礎樣式 */
.task-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fafafa;
height: 60px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
/* 任務欄按鈕樣式 */
.task-bar__button {
display: inline-block;
padding: 10px;
font-size: 16px;
color: #333;
text-decoration: none;
}
.task-bar__button:hover {
color: #666;
}
/* 任務欄當前頁面按鈕樣式 */
.task-bar__button--current {
color: #009688;
border-bottom: 2px solid #009688;
}

任務欄基礎樣式中，采用了flex布局，讓任務欄中的按鈕以水平方向展示，并且在垂直方向上居中顯示。同時，為了增加任務欄的可讀性，設置了背景色和陰影效果。

任務欄按鈕樣式中，選用了簡單的文本樣式。在懸浮狀態下，字體顏色將變為灰色，使用戶了解到該按鈕可以點擊。這里沒有使用過多的鼠標懸浮效果，以免過于繁瑣。

任務欄當前頁面按鈕樣式中，用了不同的顏色和下劃線來區分當前頁面，讓用戶更容易理解當前狀態。這種樣式可以讓用戶更快速地從任務欄中定位當前所在頁面，并節省用戶的行為時間。

以上是常用的任務欄CSS樣式，開發者可以根據自己的需求進行靈活地修改和調整。同時，在制作任務欄時，也可以考慮使用JavaScript實現更多交互效果，增強用戶體驗。