今天我們將學習如何使用CSS制作簡易導航圖。導航圖是網站的重要組成部分，它可以幫助用戶快速找到所需頁面。我們將通過以下步驟來制作導航圖。
第一步，我們需要創建一個HTML文件來定義導航圖的結構。我們創建一個ul元素，用li元素來定義每個導航項。以下代碼將創建一個包含三個導航項的導航圖。
<ul id="nav"> <li><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">聯系我們</a></li> </ul>
在上面的代碼中，我們使用了id屬性來給ul元素命名為“nav”以便在CSS中引用。
第二步，我們需要定義CSS樣式來美化導航圖。以下代碼將為導航項添加樣式。
#nav {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
}
#nav li {
display: inline-block;
margin-right: 10px;
}
#nav li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
display: block;
}
#nav li a:hover {
background-color: #555;
}在上面的代碼中，我們使用了#nav和li選擇器來定義導航圖和導航項的樣式。我們將列表樣式設置為“none”來刪除默認的列表樣式，將內邊距和外邊距設置為0來讓導航圖占據整個屏幕。我們還定義了導航項的樣式如邊距、顏色和文本裝飾。當鼠標懸停在導航項上時，我們還將添加一個背景色。
最后，我們將CSS代碼添加到HTML文件中的header元素中。
<head> <style> /* CSS代碼在此處 */ </style> </head>
現在您已經學會了如何使用CSS制作簡易導航圖。您可以嘗試添加更多樣式和交互效果來美化您的導航圖。