今天我們來講一下如何使用CSS制作一個帶有顏色塊的導航欄。導航欄作為網站的重要組成部分之一，需要有良好的視覺效果來吸引用戶的注意。加上顏色塊不僅可以讓導航欄看起來更加鮮明，還能為用戶提供更直觀的視覺反饋。
首先，我們需要在HTML文檔中創建一個導航欄的容器，可以使用< nav>標簽來表示。在容器中添加< ul>和< li>標簽，用于創建導航欄的列表項。如下所示：

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

接下來，我們需要使用CSS來添加顏色塊。可以在樣式表中為每個列表項設置不同的背景顏色，或者使用偽類選擇器來為當前激活的導航項添加背景顏色。例如：

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
<br>
  nav li a {
display: block;
padding: 1em;
text-decoration: none;
color: #333;
}
<br>
  nav li:first-of-type a {
border-radius: 5px 0 0 5px;
}
<br>
  nav li:last-of-type a {
border-radius: 0 5px 5px 0;
}
<br>
  nav li.active a {
background-color: #e74c3c;
color: #fff;
}

以上是利用CSS為導航欄添加顏色的一個示例，你可以根據你的需求適當地修改代碼。同時，我們也需要注意到一些細節問題，例如為容器設置display: flex，來使導航項居中對齊；同時利用偽類選擇器為第一個和最后一個列表項設置圓角邊框。
總之，通過運用CSS中的一些技巧和知識，我們可以很方便地為導航欄添加顏色塊。這不僅能夠增強網站的視覺效果，還能夠提高用戶的操作體驗。所以，如果你想要制作一個好看、好用的導航欄，趕快去試試吧！