利用弹性盒子完成移动端布局（第二次实验作业）
需要实现的效果如下：
下面是首先是这个项目的框架：
然后是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…...
深入解析瑞芯微RK3399/RK3288平台ISP驱动：从V4L2框架到Camera Sensor联动
1. 项目概述 在嵌入式Linux开发，特别是涉及多媒体处理的项目中，图像信号处理器（ISP）驱动的理解往往是打通摄像头应用链路的关键一环，也是很多开发者感觉“黑盒”最多的地方。最近在调试基于瑞芯微RK3399和RK3288平台的…...
用FM收音机也能玩双声道？手把手教你复刻电赛G题双路语音同传系统（48.5MHz频点）
用FM收音机玩转双声道：48.5MHz双路语音同传系统实战指南 在电子设计竞赛中，双路语音同传系统一直是考验学生综合能力的经典题型。但你知道吗？这套看似专业的无线收发系统，其实可以用身边最常见的FM收音机来验证和体验。本文将带你…...
英雄联盟终极自动化工具：LeagueAkari 免费完整指南，告别繁琐操作
英雄联盟终极自动化工具：LeagueAkari 免费完整指南，告别繁琐操作 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否…...
H3C HCL模拟器实战：IS-IS单区域基础配置与排错指南
1. 实验目标与网络环境准备如果你正在学习网络路由协议，特别是运营商级网络常用的IS-IS，那么通过模拟器进行实操是绕不开的一步。这次我用H3C的HCL模拟器，带大家走一遍IS-IS单区域的基本配置。这个实验的目标很明确：不是让你死记硬…...
【独家首发】ElevenLabs尚未官方支持的希伯来文增强模式：基于phoneme-level微调的48小时快速部署方案
更多请点击： https://intelliparadigm.com 第一章：希伯来文语音合成的技术挑战与ElevenLabs生态定位 希伯来文是一种自右向左（RTL）书写的辅音音素文字，其语音合成面临多重语言学与工程学挑战：元音符号&…...
终极解决Windows风扇控制难题：FanControl完全指南
终极解决Windows风扇控制难题：FanControl完全指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/Fan…...
构筑城市“数字底座”！全要素数据标准建设
城市运行管理服务平台的核心竞争力在于其建立了统一、规范的城市运行管理服务数据库。依据《城市运行管理服务平台数据标准》（CJ/T545），我们的技术方案实现了对城市管理全要素的数字化映射。这不仅仅是简单的数据录入，而是构建了一…...
CellProfiler：生物图像分析的瑞士军刀，让科研更智能更高效
CellProfiler：生物图像分析的瑞士军刀，让科研更智能更高效 【免费下载链接】CellProfiler An open-source application for biological image analysis 项目地址: https://gitcode.com/gh_mirrors/ce/CellProfiler 你是否曾经面对成百上千张细胞图…...
Flutter项目构建提速：告别‘gradle assembleDebug’卡顿的实战配置指南
1. 为什么Flutter项目构建会卡在gradle assembleDebug？ 每次看到Android Studio卡在"Running Gradle task assembleDebug..."这个界面，我都忍不住想砸键盘。作为一个踩过无数坑的老Flutter开发者，我完全理解这种痛苦。其实这个问题…...
C++定时器实战：从线程轮询到时间轮算法的演进与选型
1. 定时器技术选型的核心痛点 当我们需要在C项目中实现定时任务调度时，最直观的做法可能就是直接开个线程轮询了。我刚开始做网络服务开发时也这么干过，结果上线后CPU直接飙到90%——这就是典型的"新手陷阱"。实际上，定时器的实现方…...