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

需要实现的效果如下：

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

然后是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%;}}

最终实现的效果如下图：