利用弹性盒子完成移动端布局（第二次实验作业）
需要实现的效果如下：
下面是首先是这个项目的框架：
然后是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时，将主体部分的每张图片修改为各占一行（这样响应完后会比较流畅与美观）（采用媒体查询实现）：
相关文章：
利用弹性盒子完成移动端布局（第二次实验作业）
需要实现的效果如下： 下面是首先是这个项目的框架： 然后是html页面的代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…...
C# 字符串（string）三个不同的处理方法：IsNullOrEmpty、IsInterned 、IsNullOrWhiteSpace
在C#中，string.IsNullOrEmpty、string.IsInterned 和 string.IsNullOrWhiteSpace 是三个不同的字符串处理方法，它们各自有不同的用途： 1.string.IsNullOrEmpty： 这个方法用来检查字符串是否为null或者空字符串（"…...
读书笔记 - 虚拟化技术 - 0 QEMU/KVM概述与历史
《QEMU/KVM源码解析与应用》 - 王强 概述 虚拟化简介 虚拟化思想 David Wheeler：计算机科学中任何问题都可以通过增加一个中间层来解决。 虚拟化思想存在与计算机科学的各个领域。 主要思想：通过分层将底层的复杂，难用的资源虚拟抽象为简…...
常见的负载均衡
1.常见的负载均衡服务 负载均衡服务是分布式系统中用于分配网络流量和请求的关键组件，它可以帮助提高应用程序的可用性、可扩展性和响应速度。以下是一些常用的负载均衡服务： Nginx：一个高性能的Web服务器和反向代理，广泛用于实现…...
利用sessionStorage收集用户访问信息，然后传递给后端
这里只是简单的收集用户的停留时间、页面加载时间、当前页面URL及来源页面，以做示例 <html><head><meta http-equiv"content-type" content"text/html; charsetUTF-8"/><title>测试sessionStorage存储用户访问信息<…...
什么是Qseven？模块电脑（核心板）规范标准简介二
1.概念 Qseven是一种通用的、小尺寸计算机模块标准，适用于需要低功耗、低成本和高性能的应用。 Qseven模块电脑（核心板）采用230Pin金手指连接器 2.Qseven的起源 Qseven最初是由Congatec、SECO、MSC三家欧洲公司于2008年发起，旨在…...
leetcode数组（三）-有序数组的平方
题目 . - 力扣（LeetCode） 给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。 例1 输入：nums [-4,-1,0,3,10] 输出：[0,1,9,16,100] 解释&#…...
HCIP-HarmonyOS Application Developer 习题（五）
1、以下哪种原子化布局能力属于自适应变化能力? A. 拉伸 B.占比 C. 隐藏 D.拆行 答案：A 分析：划分为“自适应变化能力”和“自适应布局能力”两类。 其中，自适应变化能力包含了缩放能力和拉伸能力，自适应布局能力包含了隐藏、折…...
【详细教程】如何使用YOLOv11进行图像与视频的目标检测
《博主简介》 小伙伴们好，我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源，可关注公-仲-hao:【阿旭算法与机器学习】，共同学习交流~ 👍感谢小伙伴们点赞、关注！ 《------往期经典推…...
H7-TOOL的LUA小程序教程第14期：任意波形信号发生器，0-20mA输出和微型数控电源(2024-10-11，已更新)
LUA脚本的好处是用户可以根据自己注册的一批API（当前TOOL已经提供了几百个函数供大家使用），实现各种小程序，不再限制Flash里面已经下载的程序，就跟手机安装APP差不多，所以在H7-TOOL里面被广泛使用ÿ…...
Redis面试篇3
1、Redis的数据类型，以及每种数据类型的使用场景？ 常见的几种数据类型和使用场景如下： 字符串(String)：字符串类型是Redis最基本的数据结构，一个键最大能存储512MB。 使用场景：适用于计数器、分布式锁、缓…...
集成方案 | 借助 Microsoft Copilot for Sales 与 Docusign，加速销售流程！
加速协议信息提取，随时优化邮件内容~ 在当今信息爆炸的时代，销售人员掌握着丰富的数据资源。他们能够通过 CRM 平台、电子邮件、合同库以及其他多种记录系统，随时检索特定个人或组织的关键信息。这些数据对于销售沟通至关重要。然而&#x…...
k8s 1.28.2 集群部署 MinIO 分布式集群
文章目录 [toc]MinIO 介绍MinIO 生产硬件要求MinIO 存储要求MinIO 内存要求MinIO 网络要求MinIO 部署架构分布式 MinIO复制的 MinIO 部署 MinIO创建目录节点打标签创建 namespace创建 pv创建 MinIO配置 ingress问题记录通过代理服务器访问 MinIO 的 Object Browser 界面一直显示…...
HAL库常用的函数：
目录 HAL库： 1.GPIO常用函数： 1.HAL_GPIO_ReadPin( ) 2.HAL_GPIO_WritePin( ) 3.HAL_GPIO_TogglePin( ) 4.HAL_GPIO_EXTI_IRQHandler( ) 5.HAL_GPIO_EXTI_Callback( ) 2.UART常用函数： 1.HAL_U…...
如何捕捉行情爆发的前兆
在金融市场的激烈角逐中，每一次行情的爆发都是投资者获取丰厚回报的关键时刻。然而，如何识别并把握这些时刻，却是一门需要深厚金融专业知识和敏锐洞察力的艺术。今天，我们就来深入探讨行情爆发的初期信号，揭示那些能够…...
【万字长文】Word2Vec计算详解（一）CBOW模型
【万字长文】Word2Vec计算详解（一）CBOW模型 写在前面 本文用于记录本人学习NLP过程中，学习Word2Vec部分时的详细过程，本文与本人写的其他文章一样，旨在给出Word2Vec模型中的详细计算过程，包括每个模块的计…...
React Native源码学习
核心组件 基础组件：View、Text、Image、TextInput、ScrollView（性能没有FlatList好，因为它会一次性把子元素渲染出来）、StyleSheet交互组件：button列表视图：FlatList（优先渲染屏幕上可见的元素&…...
【计网】从零开始认识https协议 --- 保证安全的网络通信
在每个死胡同的尽头， 都有另一个维度的天空， 在无路可走时迫使你腾空而起， 那就是奇迹。 --- 廖一梅 --- 从零开始认识https协议 1 什么是https协议2 https通信方案2.1 只使用对称加密2.2 只使用非对称加密2.3 双方都使用非对称加密2.4 …...
Ubuntu安装 MySQL【亲测有效】
在Ubuntu上安装MySQL数据库的步骤通常包括更新软件包列表、安装MySQL服务器、启动并配置MySQL服务等。以下是一个详细的安装指南： 一、更新软件包列表 首先，打开终端并输入以下命令来更新Ubuntu的软件包列表： sudo apt update二、安装MySQ…...
Unity 从零开始搭建一套简单易用的UGUI小框架 扩展与优化篇（完结）
一个通用的UGUI小框架就算是写完了，下面是一步步的思考与优化过程 Unity 从零开始搭建一套简单易用的UGUI小框架 基础分析篇-CSDN博客 Unity 从零开始搭建一套简单易用的UGUI小框架 功能撰写与优化篇-CSDN博客 从使用者的角度来整理一下可能会发出的疑问 0. Panel…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...