HTML 结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Bar</title>
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS 样式(styles.css):
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav-list li {
margin-right: 20px;
}
.nav-list li:last-child {
margin-right: 0;
}
.nav-list a {
text-decoration: none;
color: #fff;
font-weight: bold;
padding: 10px;
transition: background-color 0.3s ease;
}
.nav-list a:hover {
background-color: #555;
}
图标素材:
你可以使用免费的图标库,比如 [Font Awesome](https://fontawesome.com/)。在你的 HTML 文件头部添加以下代码,即可使用 Font Awesome 提供的图标:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-aGl3q0G9pzMf6gHLK83ZLuh4P6d2fi+1dzEnfiqeFfcjzTVFhp8F6GoTrN5NhLOb" crossorigin="anonymous">
然后,你可以在导航列表中的每个 <a> 元素中使用 Font Awesome 提供的图标类,例如:
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
<li><a href="#"><i class="fas fa-info-circle"></i> About</a></li>
<li><a href="#"><i class="fas fa-cogs"></i> Services</a></li>
<li><a href="#"><i class="fas fa-envelope"></i> Contact</a></li>
请记住,确保你的项目能够访问 Font Awesome 的 CSS 文件。以上代码只是一个基础示例,你可以根据项目需求进一步扩展和修改。
转载请注明出处:http://www.zyzy.cn/article/detail/4044/CSS