请结合超链接相关知识，应用元素的类型，对元素进行转换，制作网站导航条，并加上鼠标效果。 请同学们将HTML关键代码、CSS关键代码和预览效果分别截图上传。

制作一个简单的网站导航栏，我们可以使用HTML的`<ul>`、`<li>`和`<a>`标签组合，配合CSS来添加链接样式和鼠标悬停效果。下面是一个基础的示例：

**HTML 部分：**

<nav id="navbar">
  <ul class="nav-list">
    <li><a href="#home" class="nav-item active">主页</a></li>
    <li><a href="#about" class="nav-item">关于</a></li>
    <li><a href="#services" class="nav-item">服务</a></li>
    <li><a href="#contact" class="nav-item">联系我们</a></li>
  </ul>
</nav>

**CSS 部分：**

#navbar {
  background-color: #333;
  overflow: hidden;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

在这个例子中，我们创建了一个包含四个链接（主页、关于、服务、联系我们）的无序列表。`.nav-item`默认显示为白色文字，背景为深色。当鼠标悬停在链接上时，背景变为浅灰色，文字变回黑色，以提供视觉反馈。`active`类用于标记当前选中的页面，其背景为绿色。

同学们可以在本地创建这个HTML和CSS文件，打开它们并在浏览器中查看效果。记得保存图片并上传到指定位置。