導航欄是網站設計中的重要組成部分之一，它能夠幫助用戶快速定位到需要瀏覽的頁面或功能模塊。下面是一個簡單的導航欄例子，采用基礎的HTML和CSS技術實現。 HTML代碼： `````` CSS代碼： ``` nav { background-color: #333; height: 50px; line-height: 50px; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; width: 80%; margin: 0 auto; } nav ul li { margin: 0; padding: 0; } nav ul li a { text-decoration: none; color: #fff; padding: 0 10px; } nav ul li a:hover { color: #f00; } ``` 以上代碼實現了一個基本的導航欄效果，其中主要采用了flex布局實現水平排列，并通過:hover偽類實現鼠標懸停效果。添加更多的導航條目只需在HTML代碼中添加更多的li元素，無需修改CSS代碼。 需要注意的是，導航欄的設計應以用戶體驗為第一位，應該盡量簡潔易懂，不要過分復雜或使用過多的動畫效果。此外，導航欄的排版應該適應各種屏幕大小，具有響應式布局的特點。