使用 Display 属性创建导航菜单
在这一步中,你将使用之前学到的 display 属性创建一个水平导航菜单。这个实际示例将展示如何使用 inline-block display 来创建一个响应式且整洁的导航布局。
让我们创建一个包含导航菜单的 HTML 文件。打开 WebIDE,在 ~/project
目录下创建一个名为 navigation-menu.html
的新文件。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Menu</title>
<style>
.nav-menu {
background-color: #333;
padding: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 20px;
}
.nav-menu a {
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
transition: color 0.3s ease;
}
.nav-menu a:hover {
color: #ffd700;
}
</style>
</head>
<body>
<nav class="nav-menu">
<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>
</nav>
</body>
</html>
在这个导航菜单中使用的关键技术:
- 使用
display: inline-block
实现菜单项
- 移除默认的列表样式
- 添加悬停效果
- 创建水平布局
让我们验证文件内容:
cat ~/project/navigation-menu.html
示例输出:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Menu</title>
<style>
.nav-menu {
background-color: #333;
padding: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 20px;
}
.nav-menu a {
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
transition: color 0.3s ease;
}
.nav-menu a:hover {
color: #ffd700;
}
</style>
</head>
<body>
<nav class="nav-menu">
<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>
</nav>
</body>
</html>
导航菜单的最佳实践:
- 使用语义化的 HTML5 标签,如
<nav>
- 保持菜单结构简单
- 确保良好的可读性和可访问性
- 添加悬停和活动状态以提升用户交互体验