利用弹性盒子完成移动端布局（第二次实验作业）

需要实现的效果如下：

下面是首先是这个项目的框架：

然后是html页面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <!-- head部分开始 -->
    <div class="nav1">
      <div class="nav1-1">热点</div>
      <div class="nav1-2">关注</div>
    </div>
    <div class="nav2">
      <ul>
        <li>校园生活</li>
        <li>校园学习</li>
        <li>校园活动</li>
      </ul>
    </div>
    <!-- head部分结束 -->

    <!-- 主体部分开始 -->
    <div class="main">
      <ul>
        <li><img src="images/1.jpg" alt=""><span>秋天来了</span></li>
        <li><img src="images/2.jpg" alt=""><span>南华大学</span></li>
        <li><img src="images/2.jpg" alt=""><span>南华大学</span></li>
        <li><img src="images/2.jpg" alt=""><span>南华大学</span></li>
        <li><img src="images/2.jpg" alt=""><span>南华大学</span></li>
        <li><img src="images/2.jpg" alt=""><span>南华大学</span></li>
        <li><img src="images/2.jpg" alt=""><span>南华大学</span></li>
        <li><img src="images/2.jpg" alt=""><span>南华大学</span></li>
      </ul>
    </div>
    <!-- 主体部分结束 -->

    <!-- 尾部部分开始 -->
    <div class="footer">
      <ul>
        <li><img src="images/卡券.png" alt=""><span>卡券</span></li>
        <li><img src="images/游戏充值.png" alt=""><span>游戏充值</span></li>
        <li><img src="images/去中.png" alt="" style="height: 15vh; width: 15vh;"></li>
        <li><img src="images/转账.png" alt=""><span>转账</span></li>
        <li><img src="images/口碑外卖.png" alt=""><span>口碑外卖</span></li>
      </ul>
    </div>
    <!-- 尾部部分结束 -->
  </div>

  <script>
    const hot = document.querySelector('.nav1-1');
    const attention = document.querySelector('.nav1-2');
    hot.addEventListener('mouseover', () => {
      hot.style.backgroundColor = 'rgb(110, 230, 174)';
      attention.style.backgroundColor = '#1ead6a';
    })
    hot.addEventListener('mouseout', () => {
      hot.style.backgroundColor = '#1ead6a';
      attention.style.backgroundColor = 'rgb(110, 230, 174)';
    })
    attention.addEventListener('mouseover', () => {
      attention.style.backgroundColor = '#1ead6a';
      hot.style.backgroundColor = 'rgb(110, 230, 174)';
    })
    attention.addEventListener('mouseout', () => {
      attention.style.backgroundColor = 'rgb(110, 230, 174)';
      hot.style.backgroundColor = '#1ead6a';
    })

  </script>
</body>

</html>

然后是CSS代码（标全了注释）：

* {
  /* 去除页面中所有元素的内、外边距 */
  padding: 0;
  margin: 0;
}

.container {
  /* 为整个容器添加弹性布局 */
  display: flex;
  /* 确定为竖向布局 */
  flex-direction: column;
  /* 容器高度占满整个视口，即看到的窗口大小 */
  height: 100vh;
  /* 设置整个容器的背景 */
  background-color: #f4f2f2;
}


.nav1 {
  /* 为导航栏添加弹性布局 */
  display: flex;
  /* 设置为横向布局 */
  flex-direction: row;
  /* 设置最上面的绿色导航栏占视口的8份 */
  height: 8vh;
  /* 设置元素在主轴上居中对齐 */
  justify-content: center;
  /* 设置元素在交叉轴上居中对齐 */
  align-items: center;
  /* 设置导航栏的背景颜色 */
  background-color: #4CAF50;
}

.nav1 div {
  /* 设置宽高 */
  width: 15vh;
  height: 5vh;
  /* 保持文字上下左右居中 */
  text-align: center;
  line-height: 5vh;
  /* 设置文字颜色为白色 */
  color: white;
 
}

.nav1-1{
  /* 为热点单独设置圆角 */
   border-radius: 2.5vh 0 0 2.5vh;
  /* 设置背景颜色 */
  /* 默认选择热点模块 */
   background-color: #1ead6a;
  }



.nav1-2{
  /* 为关注单独设置圆角 */
   border-radius: 0 2.5vh 2.5vh 0;
 /* 设置背景颜色 */
  background-color: rgb(110, 230, 174);
  }

  .nav2 {
    /* 设置导航栏2占视口的6份 */
   height: 6vh;
   /* 设置背景颜色 */
   background-color: #f5f5f5;
  }

  .nav2 ul {
  /* 设置为弹性布局 */
    display: flex;
  /* 设置为横向布局 */
   flex-direction: row;
   /* 宽高占满 */
   width: 100%;
   height: 100%;
  }

  .nav2 ul li {
    /* 设置为弹性布局 */
      display: flex;
    /* 去除小圆点的默认样式 */
    list-style: none;
    /* 设置每个li的宽高 */
    height: 6vh;
    width: 33%;       
    /* 设置字体的大小 */
    font-size: large;
    /* 设置元素在交叉轴上居中对齐 */
    align-items: center;
    /* 设置元素在主轴上居中对齐 */
     justify-content: center;
  }

  .main {
    /* 设置主体部分的高度为占整个视口的75份 */
    height: 75vh;
    /* 设置为弹性布局 */
    display: flex;
    /* 设置为纵向布局 */
    flex-direction: column;
    /* 加入垂直滚动条 */
    overflow-y: scroll;
  }

  .main ul{
    /* ul的宽占满整个主体部分 */
    width: 100%;
    /* height: 100%; 不知道为什么这里设置高上下的li就无法贴合在一起 */
    /* 设置为弹性布局 */
    display: flex;
    /* 设置为横向布局 */
    flex-direction: row;
    /* 允许Flex项目换行 */
    flex-wrap: wrap;
  }

  .main ul li{
    /* 设置为弹性布局 */
    display: flex;
    /* 设置为纵向布局 */
    flex-direction: column;
    /* 设置每个li的宽高 */
    width:49%;
    height: 30vh;
    /* 设置边距 */
    margin: 4px;
    /* 设置背景颜色 */
    background-color: white;
    /* 设置边框 */
    border: 1px solid #000;
    /* 边框大小不影响盒子的长和宽 */
    box-sizing: border-box;
    /* 设置字体大小 */
    font-size: 2.5vh;
    /* 设置文字的行高 */
    line-height: 6vh;
  }

   .main ul li span{
     /* 设置文字的左边距 */
     padding-left: 2vh;
   }

  .main ul li img{
    /* 设置图片的宽高 */
    width: 100%;
    height: 80%;
  }

  .footer {
    /* 设置底部高度 */
    height: 11vh;
    /* 设置底部的背景颜色 */
    background-color: rgb(249, 244, 245);
  }

  .footer ul {
    /* 设置ul的宽度 */
   width: 100%;
   /* 设置ul的高度 */
   height: 11vh; 
   /* 设置弹性布局 */
   display: flex;
   /* 设置为横向布局 */
   flex-direction: row;
  }

  .footer ul li {
    /* 设置li的宽高 */
    height: 11vh;
    width: 25%;
    /* 设置弹性布局 */
    display: flex;
    /* 设置为纵向布局 */
    flex-direction: column;
    /* 设置元素在交叉轴上居中对齐 */
    align-items: center;
    /* 设置元素在主轴上居中对齐 */
    justify-content: center;
    /* 取消小圆点的默认样式 */
    list-style: none;
  }

  .footer ul li img {
    /* 设置图片的宽高 */
    width: 8vh;
    height: 8vh;  
  }

  /* 主体的CSS样式已经全部写完，下面开始写媒体查询的代码，使页面的响应式布局更加完善 */
  /* 当页面的宽度小于830px时， <div class="main"> 即主体部分中的每张图片各占一行 */
  @media screen and (max-width: 830px) {
    .main ul li {
      width: 100%;
    }
  }

最终实现的效果如下图：