要制作一個 CSS 導航條,可以按照以下步驟進行:
<ul>
和 <li>
元素創建一個無序列表,每個 <li>
元素代表一個導航項。<ul class="navbar">
<li><a href="#">首頁</a></li>
<li><a href="#">關于</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f2f2f2;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #ddd;
}
.navbar li a.active {
background-color: #4CAF50;
color: white;
}
<link rel="stylesheet" href="styles.css">
這樣就完成了一個簡單的 CSS 導航條的制作。你可以根據需要對 CSS 樣式進行調整,以滿足特定的設計要求。