在網(wǎng)站建設(shè)中響應(yīng)式導航欄應(yīng)該易于在任何設(shè)備上使用，并且無論在什么尺寸的屏幕上查看它都應(yīng)該看起來很棒。在本文中，我們將向您展示如何僅使用 CSS 創(chuàng)建響應(yīng)式導航欄。導航欄是任何網(wǎng)站上最重要的設(shè)計元素之一。它可以幫助用戶瀏覽您的網(wǎng)站，也可以用來傳達重要信息。

您需要做的第一件事是創(chuàng)建一個導航元素。這將是您的導航欄的容器。接下來，您需要創(chuàng)建一個 li 元素列表。這些將是導航欄中的單獨鏈接。每個 li 元素都應(yīng)該顯示 inline-block 。這將確保鏈接水平顯示，并且它們在屏幕上占據(jù)相同的空間。您還可以為 li 元素添加邊距和填充。這將有助于控制鏈接之間的間距。默認情況下，鏈接的背景顏色為 #ccc 。但是，您可以通過添加 :hover 選擇器來更改此設(shè)置。當鼠標懸停在鏈接上時，這將應(yīng)用不同的背景顏色。您還可以使用 :active 選擇器在單擊鏈接時更改背景顏色。最后，您可以使用@media 屏幕和 (max-width: 767px) 規(guī)則在屏幕小于 767 像素時更改導航欄的布局。這將確保導航欄顯示為單行鏈接，而不是多列布局。

演示中顯示的響應(yīng)式導航欄的代碼如下：

nav { margin: 0; padding: 0; list-style: none; } nav > li { display: inline-block; margin: 0 10px; } nav > li:hover { background-color: #ddd; } nav > li.active { background-color: #fff; color: #000; } @media screen and (max-width: 767px) { nav > li { margin: 0; } nav > li:hover { background-color: #fff; } nav > li.active { background-color: #000; color: #fff; } }

CSS 導航欄示例