完成flex布局与float布局

一、flex布局

html 复制代码
<style>
  .nav {
    display: flex;
    background-color: #f8f8f8; /* 导航栏背景颜色 */
  }
  
  .nav a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #555555; /* 导航栏文字颜色 */
  }
  
  .nav a:hover {
    background-color: #dddddd; /* 鼠标悬停时的背景颜色 */
  }
</style>
 
<div class="nav">
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">服务</a>
  <a href="#">联系我们</a>
</div>

二、float布局

html 复制代码
<style>
    .nav {
      overflow: hidden;
      background-color: #6adfd0; /* 导航栏背景颜色 */
    }
    
    .nav a {
      float: left;
      display: block;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      color: #000000; /* 导航栏文字颜色 */
    }
    
    .nav a:hover {
      background-color: #21c2c7; /* 鼠标悬停时的背景颜色 */
    }
  </style>
  
  <div class="nav">
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">服务</a>
    <a href="#">联系我们</a>
  </div>
相关推荐
RoyLin1 分钟前
TypeScript设计模式:单例模式
前端·后端·node.js
小公主1 分钟前
我的第一个 React Flow 小实验
前端
RoyLin4 分钟前
TypeScript设计模式:工厂方法模式
前端·后端·node.js
掘金酱6 分钟前
🎉 2025年8月金石计划开奖公示
前端·人工智能·后端
Cache技术分享7 分钟前
191. Java 异常 - 捕获与处理异常
前端·后端
RoyLin7 分钟前
TypeScript设计模式:模板方法模式
前端·后端·node.js
小桥风满袖19 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
云舟吖27 分钟前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户94818176754430 分钟前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明33 分钟前
vue双向数据绑定失效
前端