HTML 课程 | 创建导航菜单

简介

HTML 是网页开发的基础，其中导航菜单是网页中不可或缺的一部分。本课程将教你如何使用 HTML 和 CSS 创建一个简单的导航菜单。

目标

本课程将让你学会：

• 创建 HTML 结构来呈现导航菜单
• 使用 CSS 美化导航菜单
• 实现导航菜单的基本交互效果

步骤

1. 创建 HTML 结构

   首先，你需要创建一个 HTML 结构来放置导航菜单。你可以使用 <ul> 和 <li> 元素来创建一个有序列表。然后，在每个列表项中添加一个链接元素 <a>。

   <ul>
     <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>
   

2. 添加 CSS 样式

   接下来，你需要使用 CSS 来美化导航菜单。你可以使用 display: inline-block 来让导航菜单呈现在一行中，使用 padding 和 border-radius 添加边框和圆角效果。你也可以使用 text-decoration: none 来去掉链接的下划线。

   ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #333;
   }
   
   li {
     display: inline-block;
     border-radius: 5px;
   }
   
   li a {
     display: block;
     padding: 10px 20px;
     text-decoration: none;
     color: #fff;
   }
   
   li a:hover {
     background-color: #111;
   }
   

3. 实现基本交互效果

   最后，你需要使用 JavaScript 来实现基本交互效果。你可以使用 addEventListener 来监听鼠标移入和移出事件，并设置 background-color 的值来改变导航菜单的颜色。

   const menuItems = document.querySelectorAll('li');
   
   menuItems.forEach(item => {
     item.addEventListener('mouseover', () => {
       item.style.backgroundColor = '#111';
     });
     item.addEventListener('mouseout', () => {
       item.style.backgroundColor = '';
     });
   });
   

总结

在本课程中，你学会了如何用 HTML 创建导航菜单，如何用 CSS 美化导航菜单，以及如何用 JavaScript 实现基本交互效果。希望这个简单的例子可以帮助你更好地理解 HTML、CSS 和 JavaScript 在网页开发中的应用。

# HTML 课程 | 创建导航菜单

## 简介

HTML 是网页开发的基础，其中导航菜单是网页中不可或缺的一部分。本课程将教你如何使用 HTML 和 CSS 创建一个简单的导航菜单。

## 目标

本课程将让你学会：

- 创建 HTML 结构来呈现导航菜单
- 使用 CSS 美化导航菜单
- 实现导航菜单的基本交互效果

## 步骤

1. 创建 HTML 结构

   首先，你需要创建一个 HTML 结构来放置导航菜单。你可以使用 `<ul>` 和 `<li>` 元素来创建一个有序列表。然后，在每个列表项中添加一个链接元素 `<a>`。

   ```html
   <ul>
     <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>

2. 添加 CSS 样式

   接下来，你需要使用 CSS 来美化导航菜单。你可以使用 display: inline-block 来让导航菜单呈现在一行中，使用 padding 和 border-radius 添加边框和圆角效果。你也可以使用 text-decoration: none 来去掉链接的下划线。

   ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #333;
   }
   
   li {
     display: inline-block;
     border-radius: 5px;
   }
   
   li a {
     display: block;
     padding: 10px 20px;
     text-decoration: none;
     color: #fff;
   }
   
   li a:hover {
     background-color: #111;
   }
   

3. 实现基本交互效果

   最后，你需要使用 JavaScript 来实现基本交互效果。你可以使用 addEventListener 来监听鼠标移入和移出事件，并设置 background-color 的值来改变导航菜单的颜色。

   const menuItems = document.querySelectorAll('li');
   
   menuItems.forEach(item => {
     item.addEventListener('mouseover', () => {
       item.style.backgroundColor = '#111';
     });
     item.addEventListener('mouseout', () => {
       item.style.backgroundColor = '';
     });
   });
   

总结

在本课程中，你学会了如何用 HTML 创建导航菜单，如何用 CSS 美化导航菜单，以及如何用 JavaScript 实现基本交互效果。希望这个简单的例子可以帮助你更好地理解 HTML、CSS 和 JavaScript 在网页开发中的应用。