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

news2024/11/24 19:31:28

需要实现的效果如下：

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

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

最终实现的效果如下图：

将页面缩小布局也能正常按比例缩放（采用flex弹性布局）：

当页面的宽度小于830px时，将主体部分的每张图片修改为各占一行（这样响应完后会比较流畅与美观）（采用媒体查询实现）：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2212396.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

解决element-ui图标不出现，或者乱码问题（已解决）复制粘贴

解决element-ui图标不出现，或者乱码问题（已解决）复制粘贴

其实就是资源没找到&#xff0c;需要你手动添加。 下载个文件 通过百度网盘分享的文件&#xff1a;css 链接&#xff1a;https://pan.baidu.com/s/1jLngnKV3PuDYu2ohSlE5IQ?pwdt1z9 提取码&#xff1a;t1z9 https://pan.baidu.com/s/1jLngnKV3PuDYu2ohSlE5IQ?pwdt1z9 提取…
阅读更多...
Python_函数式编程（生成器、迭代器、动态性）

Python_函数式编程（生成器、迭代器、动态性）

简单说&#xff1a;时间换空间&#xff01;想要得到庞大的数据&#xff0c;又想让它占用空间少&#xff0c;那就用生成器&#xff01;延迟计算&#xff01;需要的时候&#xff0c;再计算出数据&#xff01; 创建生成器的方式二(生成器函数)生成器函数&#xff1a; 如果一个函数…
阅读更多...
Spirng事务的传播学习

Spirng事务的传播学习

事务传播&#xff1a;一个事务方法在被调用时&#xff0c;如何与现有事务的交互行为。当方法被事务性地调用时&#xff0c;他应该加入当前事务还是开启一个新事物。 常见的事务传播机制&#xff08;7种&#xff09;&#xff1a; Propagation枚举类&#xff0c;定义了传播机制…
阅读更多...
【D3.js in Action 3 精译_034】4.1 D3 中的坐标轴的创建（中一）

【D3.js in Action 3 精译_034】4.1 D3 中的坐标轴的创建（中一）

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…
阅读更多...
文件与fd

文件与fd

访问文件前&#xff0c;为什么必须要打开文件&#xff1f;/ 打开文件的实质 访问文件前&#xff0c;都必须先打开它&#xff0c; 如fopen 访问文件时&#xff0c;是进程在访问 所以文件必须加载到内存中 我们要访问文件时&#xff0c;一定要通过内存访问 文件没有被打开时&am…
阅读更多...
UML（统一建模语言）

UML（统一建模语言）

面向对象设计主要就是使用UML的类图&#xff0c;类图用于描述系统中所包含的类以及它们之间的相互关系&#xff0c;帮助人们简化对系统的理解&#xff0c;它是系统分析和设计阶段的重要产物&#xff0c;也是系统编码和测试的重要模型依据。 画图软件&#xff1a;ProcessOn思维…
阅读更多...
人工智能和机器学习之线性代数（一）

人工智能和机器学习之线性代数（一）

人工智能和机器学习之线性代数&#xff08;一&#xff09; 人工智能和机器学习之线性代数一将介绍向量和矩阵的基础知识以及开源的机器学习框架PyTorch。 文章目录 人工智能和机器学习之线性代数&#xff08;一&#xff09;基本定义标量&#xff08;Scalar&#xff09;向量&a…
阅读更多...
通过观测云 DataKit Extension 接入 AWS Lambda 最佳实践

通过观测云 DataKit Extension 接入 AWS Lambda 最佳实践

前言 AWS Lambda 是一项计算服务&#xff0c;使用时无需预配置或管理服务器即可运行代码。AWS Lambda 只在需要时执行代码并自动缩放。借助 AWS Lambda&#xff0c;几乎可以为任何类型的应用程序或后端服务运行代码&#xff0c;而且无需执行任何管理。 Lambda Layer 是一个包…
阅读更多...
5 个免费高清无水印视频素材库

5 个免费高清无水印视频素材库

短视频创作&#xff0c;素材是关键。以下为你推荐 5 个超棒的免费且无版权的高清无水印短视频素材网站&#xff0c;助你获取创作资源。 蛙学网 国内顶级素材站&#xff0c;有海量高质量素材&#xff0c;领域涉及自然风光、情感生活、游戏动漫以及社会人文等。其素材均为 4K 高…
阅读更多...
集合框架07：LinkedList使用

集合框架07：LinkedList使用

1.视频链接&#xff1a;13.14 LinkedList使用_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p142.LinkedList集合的增删改查操作 package com.yundait.Demo01;im…
阅读更多...
Vmware开箱即用win7系统

Vmware开箱即用win7系统

下载文件 下载VMWare与win7成品虚拟机资料&#xff08;PS&#xff1a;里面有Win10 和Win11&#xff0c;使用方法都是一样的&#xff09; ⏬下载链接⏬ 下载链接 使用虚拟机打开成品虚拟机
阅读更多...
python怎么引用文件

python怎么引用文件

新建python文件 &#xff1a;在同目录lib下创建mylib.py和loadlib.py两个文件。 在mylib.py文件中创建一个Hello的类&#xff0c;并且给这个类添加一个sayHello的方法&#xff0c;让它输出hello python 在loadlib.py 文件中引入mylib import mylib 在loadlib中调用引用过来的py…
阅读更多...
QT开发--串口通信

QT开发--串口通信

第十六章 串口通信 16.1 串口通信基础 串口通信主要通过DB9接口&#xff0c;适用于短距离&#xff08;<10米&#xff09;。关键参数包括&#xff1a; 波特率&#xff1a;每秒传输bit数&#xff0c;如9600。数据位&#xff1a;信息包中的有效数据位数。停止位&#xff1a;…
阅读更多...
Excel：vba实现禁止新增工作表

Excel：vba实现禁止新增工作表

实现效果&#xff1a;禁止新增工作表 步骤如下&#xff1a; 1.点击开发工具里面的Visual Basic 2.不要自己创建&#xff0c;点击ThisWorkbook&#xff0c;点击选择Workbook&#xff0c;点击选择NewSheet 这里的NewSheet就是工作簿事件 代码如下&#xff1a; 这是事件处理程序…
阅读更多...
day∞-过滤器-拦截器

day∞-过滤器-拦截器

一、过滤器 二、拦截器
阅读更多...
【Java面试——基础知识——Day5】

【Java面试——基础知识——Day5】

1. 异常 1.1 Exception 和 Error 有什么区别&#xff1f; 在 Java 中&#xff0c;所有的异常都有一个共同的祖先 java.lang 包中的 Throwable 类。Throwable 类有两个重要的子类: Exception :程序本身可以处理的异常&#xff0c;可以通过 catch 来进行捕获。Exception 又可以…
阅读更多...
二叉树LeetCode刷题

二叉树LeetCode刷题

二叉树LeetCode刷题 1. 检查两颗树是否相同2. 另一颗树的子树3. 翻转二叉树4. 判断一颗二叉树是否是平衡二叉树5. 二叉搜索树与双向链表6. 对称二叉树7. 二叉树的构建及遍历8. 二叉树的分层遍历9. 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先10. 根据一棵树的前序遍…
阅读更多...
算法竞赛（Python）-AI的思维模式（搜索）

算法竞赛（Python）-AI的思维模式（搜索）

文章目录 一 、深度优先搜索1 零钱搭配2“油漆桶”与连通性 二 、记忆化三、在游戏中制胜的AI1 永远的平局——井字棋2 一起来解谜——数独3 数字华容道 一 、深度优先搜索 深度优先搜索是最基本的搜索方法&#xff0c;在深度优先搜索的过程中&#xff0c;如果把所有的可行解看…
阅读更多...
如果你的YOLO环境已经配置好了，如何打开项目文件

如果你的YOLO环境已经配置好了，如何打开项目文件

1.首先将【目标检测系统源码】下载完成之后&#xff0c;解压到某个路径下&#xff08;可以解压在D盘或者F盘都可&#xff09;。然后使用Pycharm打开这个项目文件。 2.使用 pip 命令安装所需的依赖&#xff0c;可以通过requirements.txt文件进行安装。请务必按照 requirements.t…
阅读更多...
springboot第76集：线程，ThreadGroup

springboot第76集：线程，ThreadGroup

导出数据&#xff1a; 查询结果可以使用脚本或工具&#xff08;如 Python 的 Pandas 库&#xff09;将数据导出为 Excel 格式。例如&#xff0c;使用 Python&#xff1a; 当查询数组中有大量数据&#xff08;如一千多条&#xff09;时&#xff0c;可以使用 _mget&#xff08;多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023