flex实战之响应式导航-前端开发-阁主学习小站

摘要：

本文记录PHP中文网23期前端部分的flex实战之响应式导航笔记。

## 实现效果
下图为实战效果。
![](https://www.mainblog.cn/zb_users/upload/2023/07/202307251639483636779.png)

## 示例代码
```html
<!DOCTYPE html>
<html lang="zh-CN">

nav {
      display: flex;
      /* 水平垂直居中 */
      text-align: center;
      line-height: 50px;
    }

nav a {
      /* 项目: 行内块 inline-block */
      min-width: 5em;
      color: #ccc;
      text-decoration: none;
      flex: 1;
    }

nav a:hover {
      color: white;
      background-color: seagreen;
      transition: 0.3s;
    }

header button {
      border: none;
      width: 5em;
      background-color: seagreen;
      color: white;
    }

header button:hover {
      cursor: pointer;
      background-color: coral;
      transition: 0.3s;
    }
  </style>
</body>

</html>
```

本文地址：https://www.mainblog.cn/322.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。