CSS導航欄制作網站
在網站設計中，導航欄是用戶快速找到自己想要的信息的重要組成部分。通過使用CSS，我們可以輕松地創建一個可定制的導航欄，以滿足你的需求和風格。下面是一份使用CSS制作導航欄的教程。
第一步：HTML結構
首先，在HTML中創建一個基本的導航欄結構。可以使用無序列表（ul）和鏈接標簽（a）來實現這個結構。例如：

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

這將創建一個包含四個導航鏈接的基本結構。
第二步：CSS樣式
接下來，我們將使用CSS來為這個導航欄添加樣式。我們可以設置導航欄的顏色、字體大小、間距和邊框等屬性。例如：

nav {
background-color: #333;
font-size: 18px;
}
<br>
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
<br>
nav li {
display: inline-block;
padding: 10px 20px;
}
<br>
nav a {
color: #ffffff;
text-decoration: none;
}
<br>
nav a:hover {
background-color: #ffffff;
color: #333333;
}

這將為導航欄添加一個深色背景以及白色文字和鏈接。當鼠標懸停在鏈接上時，背景顏色和文字顏色將更改。
第三步：響應式設計
最后，我們需要采用響應式設計，以便在各種設備上都能正確地顯示導航欄。一種簡單的方法是使用CSS媒體查詢來設置不同的樣式規則。例如：

@media (max-width: 768px) {
nav ul {
display: none;
}
<br>
  nav ul.show {
display: block;
}
<br>
  nav li {
display: block;
text-align: center;
}
}

這將在屏幕寬度小于768像素時隱藏導航鏈接，并在點擊菜單按鈕時顯示它們。它還將更改列表項的顯示方式，以使它們垂直居中。
通過這些簡單的步驟，你可以創建一個定制和響應式的導航欄，以滿足你在網站設計中的需求。