菜鸟教程
教程 css tutorial

实战案例

利用 Flexbox 创建一个响应式导航栏，实现菜单项水平排列，支持居中对齐和空间均匀分布。

实现目标

  • 水平排列菜单项
  • 菜单项居中显示
  • 两端间距自动填充
  • 鼠标悬停高亮效果

实战案例示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>Flex 实战案例：响应式导航栏</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}


nav {
  display: flex;
  justify-content: center;
  background-color: #1976d2;
  padding: 10px 0;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

nav ul li {
  color: white;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 4px;
}

nav ul li:hover {
  background-color: #1565c0;
}



</style>
</head>


<body>
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>
</body>


</html>

相关内容