以下是一个简单的水平导航条的 CSS 实现代码示例,以及一些基本的图标素材,你可以根据需要进行修改和扩展:

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