CSS自適應(yīng)響應(yīng)導(dǎo)航欄是一種非常流行的技術(shù)，它可以幫助我們在不同大小的屏幕上展現(xiàn)出更好的用戶體驗。下面我們來看看如何實現(xiàn)這種導(dǎo)航欄。

// HTML代碼
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">關(guān)于</a></li>
<li><a href="#">聯(lián)系</a></li>
</ul>
</nav>
// CSS代碼
nav ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
background-color: #333;
}
nav li {
display: inline-block;
margin: 0 5px;
}
nav a {
display: inline-block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
font-size: 16px;
}
// 媒體查詢，屏幕寬度小于750px時，導(dǎo)航欄變?yōu)橄吕?
@media (max-width: 750px) {
nav ul {
display: none;
}
nav li {
display: block;
margin: 0;
}
nav a {
display: block;
padding: 10px;
border-bottom: 1px solid #ccc;
}
}

在上面的代碼中，我們首先定義了一個nav標簽，內(nèi)部包含一個ul標簽，用來包含導(dǎo)航鏈接。我們將ul設(shè)置了一些樣式，如去除了padding和margin，并設(shè)置了背景色等。我們還將li標簽設(shè)置成display:inline-block，這樣鏈接就在一行中顯示了。

在媒體查詢中，我們設(shè)置了在屏幕寬度小于750px時，整個導(dǎo)航欄都會被隱藏。此時，頁面上會顯示一個下拉菜單按鈕，當(dāng)按鈕被點擊時，下拉菜單就會顯示出來。

最后，我們用pre標簽包含了我們的CSS代碼，這樣可以使代碼更加清晰易懂。