完成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>
相关推荐
excel26 分钟前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip1 小时前
JavaScript事件流
前端·javascript
赵得C1 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904271 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路1 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa1 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事1 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss1 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
striver_#1 小时前
百度前端社招面经二
前端