当前位置：首页 > news >正文

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

news 2025/10/1 11:56:20

需要实现的效果如下：

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

然后是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…...

编程日记 2024/10/14 0:28:32

C# 字符串（string）三个不同的处理方法：IsNullOrEmpty、IsInterned 、IsNullOrWhiteSpace

在C#中，string.IsNullOrEmpty、string.IsInterned 和 string.IsNullOrWhiteSpace 是三个不同的字符串处理方法，它们各自有不同的用途： 1.string.IsNullOrEmpty： 这个方法用来检查字符串是否为null或者空字符串（"…...

编程日记 2024/10/14 0:27:31

读书笔记 - 虚拟化技术 - 0 QEMU/KVM概述与历史

《QEMU/KVM源码解析与应用》 - 王强概述虚拟化简介虚拟化思想 David Wheeler：计算机科学中任何问题都可以通过增加一个中间层来解决。虚拟化思想存在与计算机科学的各个领域。主要思想：通过分层将底层的复杂，难用的资源虚拟抽象为简…...

编程日记 2024/10/14 0:26:30

常见的负载均衡

1.常见的负载均衡服务负载均衡服务是分布式系统中用于分配网络流量和请求的关键组件，它可以帮助提高应用程序的可用性、可扩展性和响应速度。以下是一些常用的负载均衡服务： Nginx：一个高性能的Web服务器和反向代理，广泛用于实现…...

编程日记 2024/10/14 0:25:28

利用sessionStorage收集用户访问信息，然后传递给后端

这里只是简单的收集用户的停留时间、页面加载时间、当前页面URL及来源页面，以做示例 <html><head><meta http-equiv"content-type" content"text/html; charsetUTF-8"/><title>测试sessionStorage存储用户访问信息<…...

编程日记 2024/10/14 0:24:27

什么是Qseven？模块电脑（核心板）规范标准简介二

1.概念 Qseven是一种通用的、小尺寸计算机模块标准，适用于需要低功耗、低成本和高性能的应用。 Qseven模块电脑（核心板）采用230Pin金手指连接器 2.Qseven的起源 Qseven最初是由Congatec、SECO、MSC三家欧洲公司于2008年发起，旨在…...

编程日记 2024/10/14 0:23:26

leetcode数组（三）-有序数组的平方

题目 . - 力扣（LeetCode） 给你一个按非递减顺序排序的整数数组 nums，返回每个数字的平方组成的新数组，要求也按非递减顺序排序。例1 输入：nums [-4,-1,0,3,10] 输出：[0,1,9,16,100] 解释&#…...

编程日记 2024/10/14 0:21:24

HCIP-HarmonyOS Application Developer 习题（五）

1、以下哪种原子化布局能力属于自适应变化能力? A. 拉伸 B.占比 C. 隐藏 D.拆行答案：A 分析：划分为“自适应变化能力”和“自适应布局能力”两类。其中，自适应变化能力包含了缩放能力和拉伸能力，自适应布局能力包含了隐藏、折…...

编程日记 2024/10/14 0:20:23

【详细教程】如何使用YOLOv11进行图像与视频的目标检测

《博主简介》小伙伴们好，我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源，可关注公-仲-hao:【阿旭算法与机器学习】，共同学习交流~ 👍感谢小伙伴们点赞、关注！ 《------往期经典推…...

编程日记 2024/10/14 0:16:19

H7-TOOL的LUA小程序教程第14期：任意波形信号发生器，0-20mA输出和微型数控电源(2024-10-11，已更新)

LUA脚本的好处是用户可以根据自己注册的一批API（当前TOOL已经提供了几百个函数供大家使用），实现各种小程序，不再限制Flash里面已经下载的程序，就跟手机安装APP差不多，所以在H7-TOOL里面被广泛使用&#xff…...

编程日记 2024/10/14 0:13:17

Redis面试篇3

1、Redis的数据类型，以及每种数据类型的使用场景？ 常见的几种数据类型和使用场景如下： 字符串(String)：字符串类型是Redis最基本的数据结构，一个键最大能存储512MB。使用场景：适用于计数器、分布式锁、缓…...

编程日记 2024/10/14 0:11:15

集成方案 | 借助 Microsoft Copilot for Sales 与 Docusign，加速销售流程！

加速协议信息提取，随时优化邮件内容~ 在当今信息爆炸的时代，销售人员掌握着丰富的数据资源。他们能够通过 CRM 平台、电子邮件、合同库以及其他多种记录系统，随时检索特定个人或组织的关键信息。这些数据对于销售沟通至关重要。然而&#x…...

编程日记 2024/10/14 0:10:14

k8s 1.28.2 集群部署 MinIO 分布式集群

文章目录 [toc]MinIO 介绍MinIO 生产硬件要求MinIO 存储要求MinIO 内存要求MinIO 网络要求MinIO 部署架构分布式 MinIO复制的 MinIO 部署 MinIO创建目录节点打标签创建 namespace创建 pv创建 MinIO配置 ingress问题记录通过代理服务器访问 MinIO 的 Object Browser 界面一直显示…...

编程日记 2024/10/14 0:06:09

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…...

编程日记 2024/10/14 0:05:08

如何捕捉行情爆发的前兆

在金融市场的激烈角逐中，每一次行情的爆发都是投资者获取丰厚回报的关键时刻。然而，如何识别并把握这些时刻，却是一门需要深厚金融专业知识和敏锐洞察力的艺术。今天，我们就来深入探讨行情爆发的初期信号，揭示那些能够…...

编程日记 2024/10/14 0:03:06

【万字长文】Word2Vec计算详解（一）CBOW模型

【万字长文】Word2Vec计算详解（一）CBOW模型写在前面本文用于记录本人学习NLP过程中，学习Word2Vec部分时的详细过程，本文与本人写的其他文章一样，旨在给出Word2Vec模型中的详细计算过程，包括每个模块的计…...

编程日记 2024/10/14 0:02:05

React Native源码学习

核心组件基础组件：View、Text、Image、TextInput、ScrollView（性能没有FlatList好，因为它会一次性把子元素渲染出来）、StyleSheet交互组件：button列表视图：FlatList（优先渲染屏幕上可见的元素&…...

编程日记 2024/10/13 23:55:59

【计网】从零开始认识https协议 --- 保证安全的网络通信

在每个死胡同的尽头， 都有另一个维度的天空， 在无路可走时迫使你腾空而起， 那就是奇迹。 --- 廖一梅 --- 从零开始认识https协议 1 什么是https协议2 https通信方案2.1 只使用对称加密2.2 只使用非对称加密2.3 双方都使用非对称加密2.4 …...

编程日记 2024/10/13 23:51:55

Ubuntu安装 MySQL【亲测有效】

在Ubuntu上安装MySQL数据库的步骤通常包括更新软件包列表、安装MySQL服务器、启动并配置MySQL服务等。以下是一个详细的安装指南： 一、更新软件包列表首先，打开终端并输入以下命令来更新Ubuntu的软件包列表： sudo apt update二、安装MySQ…...

编程日记 2024/10/13 23:48:53

Unity 从零开始搭建一套简单易用的UGUI小框架扩展与优化篇（完结）

一个通用的UGUI小框架就算是写完了，下面是一步步的思考与优化过程 Unity 从零开始搭建一套简单易用的UGUI小框架基础分析篇-CSDN博客 Unity 从零开始搭建一套简单易用的UGUI小框架功能撰写与优化篇-CSDN博客从使用者的角度来整理一下可能会发出的疑问 0. Panel…...

编程日记 2024/10/13 23:46:51

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令范围操作示例指定行范围处理复合命令示例实用技…...

编程新知 2025/9/21 2:23:14

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/29 9:32:02

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/29 21:04:15

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性：电力载波技术在楼宇自控中的核心价值在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...

编程新知 2025/9/27 2:43:26

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程新知 2025/9/30 16:13:37

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/8/16 14:02:21