完成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>
相关推荐
贵沫末3 分钟前
React——基础
前端·react.js·前端框架
每天开心8 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry15 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9322 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子22 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982423 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug25 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo25 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js