CSS導航在網(wǎng)站的設計中扮演著重要的角色。它不僅為用戶提供了方便的導航功能，也可以美化網(wǎng)頁的設計。而如何創(chuàng)建一個自適應的CSS導航呢？下面我們通過代碼演示來學習。

<div class="navbar">
<a href="#">首頁</a>
<a href="#">服務</a>
<a href="#">關于我們</a>
<a href="#">聯(lián)系我們</a>
</div>

首先，在HTML中我們創(chuàng)建一個包含4個鏈接的div元素。

.navbar {
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
height: 50px;
}
.navbar a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}

接下來，我們使用CSS對navbar樣式進行設計。我們使用flex布局來讓鏈接水平居中對齊，背景色為黑色，高度為50個像素。針對每個鏈接，我們設置顏色為白色，去掉下劃線，并設置每個鏈接之間的間距為10個像素。

@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
.navbar a {
margin: 5px;
}
}

最后，我們創(chuàng)建媒體查詢，針對小于等于600像素寬的屏幕設備，將鏈接設置為垂直布局，并設置每個鏈接之間的上下間距為5個像素。

綜上所述，通過以上的CSS代碼和一定的HTML結構，我們可以創(chuàng)建一個自適應的CSS導航。這樣，在不同的屏幕大小下，用戶都可以方便地瀏覽您的網(wǎng)站。