CSS中膠囊式導航怎么做？ 膠囊式導航是一種具有現代感的導航樣式，可以使您的網站看起來更加專業和現代化。在這篇文章中，我們將學習如何使用CSS創建膠囊式導航。 首先，我們需要創建一個基本的導航結構。以下是一個簡單的例子：

<nav class="navigation">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

現在，我們需要添加CSS樣式以創建膠囊式導航。以下是一個簡單的CSS代碼塊：

.navigation {
width: 100%;
background-color: #333;
display: flex;
justify-content: center;
}
.nav-list {
display: flex;
justify-content: center;
align-items: center;
}
.nav-list li {
margin: 0 10px;
border-radius: 20px;
overflow: hidden;
}
.nav-list a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #fff;
transition: background-color 0.3s ease;
}
.nav-list a:hover {
background-color: #f44336;
}

現在，我們來逐步解釋每一行CSS代碼。 首先，我們定義了導航欄的寬度和背景顏色。我們通過"flex"屬性使導航欄中的元素居中對齊。 接下來，我們定義了"nav-list"類，該類將導航欄列表項設置為靈活的容器，我們在其中定義了每個列表項的外邊距和邊框半徑。 最后，我們定義了在鼠標懸停時要應用到鏈接的背景顏色。 現在，您已經掌握了如何創建膠囊式導航的基本概念。您可以進一步探索如何使用CSS自定義導航欄中的其他元素，例如字體，顏色等等。