在網站設計中，導航條是至關重要的組成部分。它通常出現在網頁的頂部或側面，以幫助用戶快速瀏覽網站的主要部分。通過使用CSS，我們可以輕松地編寫具有吸引力和響應性的導航條。
/*導航條樣式*/
nav {
background-color: #333;
display: flex;
justify-content: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #555;
}首先，我們創建了一個
接下來，我們創建了一個帶有“ul”的無序列表。我們使用CSS樣式將列表樣式設置為“none”，并取消列表的所有margin和padding。我們還使用Flexbox布局將所有列表項放在同一行內。
對于每個列表項，我們將其周圍的間距設置為10px，并將其內部的錨標記樣式設置為漂亮的圓角邊框。我們還在錨標記上使用了過渡效果，使其在鼠標懸停時更加吸引人。最后，我們為錨標記設置了字體大小和粗細，使其更加易于閱讀。
通過這些CSS樣式，我們可以創建一種現代且易于使用的導航條，可以讓網站的用戶更加輕松地導航。我們只需要將這個代碼復制并粘貼到HTML文件的頭部就可以開始使用了。
上一篇$符號 json