完成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>
相关推荐
轻口味17 分钟前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
荆州克莱3 小时前
mysql中局部变量_MySQL中变量的总结
spring boot·spring·spring cloud·css3·技术
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js