準備使用 DIV 和 CSS 將您的網站提升到一個新的境界嗎？從基本的導航欄開始，到掌握高級技巧，我們的指南將指導您完成整個過程。

基礎：創建導航欄

導航欄是任何網站的關鍵元素。讓我們使用 DIV 和 CSS 創建一個簡單的導航欄：

HTML:
首頁關于聯系我們

CSS:
.nav {background-color: f1f1f1;width: 100%;height: 50px;display: flex;justify-content: space-around;align-items: center;
}
.nav-link {text-decoration: none;color: 000;font-size: 16px;padding: 0 20px;transition: all 0.2s;
}

運行這段代碼，您將看到一個帶有一些鏈接的白色水平導航欄。

進階技巧：添加視覺效果

除了基礎的導航欄，我們還可以通過添加視覺效果使其更具吸引力：

CSS:
.nav-link:hover {background-color: ccc;
}

此代碼將鼠標懸停在導航欄鏈接上時添加灰色的背景色。

高級技巧：創建響應式導航欄

在當今以移動設備為主導的世界中，創建響應式導航欄非常重要：

CSS:
@Media (max-width: 768px) {.nav {height: 100px;flex-direction: column;justify-content: center;}.nav-link {width: 100%;
text-align: center;}
}

此代碼會在屏幕寬度小于 768px 時將導航欄從水平導航欄轉換為垂直導航欄。

結論

使用 DIV 和 CSS 創建和樣式化網站導航欄是一個強大的工具集。通過使用基礎和高級技巧，您可以創建亮眼的在線體驗，讓用戶輕松瀏覽您的網站。

立即開始將您的網站升級到一個新的水平，成為 DIV和 CSS 的大師！