在網頁設計中，導航欄是網頁設計的一個重要組成部分。一個好看、實用的導航欄可以為用戶提供良好的網頁體驗。而自適應導航欄CSS則是在設計和開發中最常用的一種類型。下面，我們就來了解一下如何打造一個好看的自適應導航欄CSS。

.nav {
width: 100%;
height: 60px;
background-color: #fff;
z-index: 99;
position: fixed;
top: 0;
left: 0;
text-align: center;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.nav ul li a {
display: block;
color: #333;
text-decoration: none;
font-size: 16px;
line-height: 60px;
padding: 0 15px;
}
.nav ul li:hover {
background-color: #f5f5f5;
}
@media only screen and (max-width: 768px) {
.nav ul li {
display: none;
}
.nav ul li.responsive-menu {
display: inherit;
}
.nav-icon {
display: inline-block;
margin-right: 20px;
position: absolute;
top: 18px;
right: 30px;
z-index: 101;
}
.nav-icon i {
font-size: 24px;
color: #333;
cursor: pointer;
}
}
@media only screen and (max-width: 768px) {
.nav.responsive {
position: absolute;
width: 100%;
top: 60px;
left: 0;
background-color: #333;
z-index: 100;
overflow: hidden;
}
.nav.responsive li a {
display: block;
color: #fff;
line-height: 60px;
text-align: center;
}
}

上面的代碼就是一個基本的自適應導航欄CSS樣式。其中，主要使用了CSS的@media查詢來實現在不同設備上的自適應效果。在移動設備上，我們使用了一個圖標來展開和關閉菜單，使得網頁在小屏幕上也可以方便地使用。

除了基本的樣式設置外，我們還可以根據自己的需求進行一些美化和定制。比如，增加鼠標懸停效果、使用不同的字體和顏色、改變菜單的形狀等等。

總之，自適應導航欄CSS是網頁設計中的一項基本功。只要我們充分運用這項技術，就可以輕松地打造出好看、實用的網頁導航欄。