CSS 導航自適應代碼 在網頁設計中，導航欄是一個非常重要的組成部分。為了更好地適應不同屏幕大小的設備，我們需要使用 CSS 實現一個自適應的導航欄。下面是一個示例代碼： `````` 首先，在 HTML 中，我們使用了一個 nav 元素，并在其中編寫了一個無序列表，列表包含了四個鏈接。接著，在 CSS 中，我們設置了導航欄的一些基本樣式： - 設置背景顏色為 #333； - 設置高度為 50px； - 設置寬度為 100%； - 設置 display 為 flex，讓導航欄的子元素水平居中。 接著，我們對列表進行設置： - 設置 display 為 flex，讓列表項水平布局； - 設置 justify-content 為 space-between，讓列表項在空白處平均分布； - 設置 align-items 為 center，讓列表項在垂直方向上居中； - 設置 list-style 為 none，去除列表項的默認樣式； - 設置 margin 和 padding 為 0，消除列表項之間和內部的間距； - 設置 width 為 100%，讓列表項占滿導航欄的寬度； - 設置 max-width 為 1200px，限制列表項的最大寬度，防止過于寬大的屏幕顯示時會看起來很奇怪。 最后，我們對導航欄的鏈接進行設置： - 設置 text-decoration 為 none，消除鏈接的默認下劃線； - 設置 color 為 #fff，將鏈接的字體顏色設置為白色； - 設置 padding 為 10px，增加鏈接的點擊區域。 這樣，我們就實現了一個簡單的自適應導航欄。在不同的屏幕大小下，它會根據屏幕寬度自動調整列表項的位置和寬度，保證在任何設備上都能正常顯示。