web前端之float布局与flex布局

float布局 

<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>

flex布局

<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>