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

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

news 2026/3/28 1:16:27

需要实现的效果如下：

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

然后是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时，将主体部分的每张图片修改为各占一行（这样响应完后会比较流畅与美观）（采用媒体查询实现）：

相关文章：

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

需要实现的效果如下&#xff1a; 下面是首先是这个项目的框架&#xff1a; 然后是html页面的代码&#xff1a; <!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#中&#xff0c;string.IsNullOrEmpty、string.IsInterned 和 string.IsNullOrWhiteSpace 是三个不同的字符串处理方法&#xff0c;它们各自有不同的用途&#xff1a; 1.string.IsNullOrEmpty&#xff1a; 这个方法用来检查字符串是否为null或者空字符串&#xff08;"…...

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

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

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

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

常见的负载均衡

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

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

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

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

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

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

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

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

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

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

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

HCIP-HarmonyOS Application Developer 习题（五）

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

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

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

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

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

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

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

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

Redis面试篇3

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

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

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

加速协议信息提取&#xff0c;随时优化邮件内容~ 在当今信息爆炸的时代&#xff0c;销售人员掌握着丰富的数据资源。他们能够通过 CRM 平台、电子邮件、合同库以及其他多种记录系统&#xff0c;随时检索特定个人或组织的关键信息。这些数据对于销售沟通至关重要。然而&#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库&#xff1a; 1.GPIO常用函数&#xff1a; 1.HAL_GPIO_ReadPin( ) 2.HAL_GPIO_WritePin( ) 3.HAL_GPIO_TogglePin( ) 4.HAL_GPIO_EXTI_IRQHandler( ) 5.HAL_GPIO_EXTI_Callback( ) 2.UART常用函数&#xff1a; 1.HAL_U…...

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

如何捕捉行情爆发的前兆

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

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

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

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

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

React Native源码学习

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

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

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

在每个死胡同的尽头&#xff0c; 都有另一个维度的天空&#xff0c; 在无路可走时迫使你腾空而起&#xff0c; 那就是奇迹。 --- 廖一梅 --- 从零开始认识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服务等。以下是一个详细的安装指南&#xff1a; 一、更新软件包列表 首先&#xff0c;打开终端并输入以下命令来更新Ubuntu的软件包列表&#xff1a; sudo apt update二、安装MySQ…...

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

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

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

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

医药行业用友 YonSuite 一体化管理方案

医保新规 4 月 1 日落地&#xff5c;医药企业破局&#xff1a;数智化 合规 精细化&#xff0c;活下去且活得好2026 年 4 月 1 日&#xff0c;医保新规全面执行&#xff0c;集采深化、价格严控、全链路监管&#xff0c;医药行业正式告别高毛利、粗放式、渠道为王的旧时代&…...

编程新知 2026/3/28 1:09:38

Null 安全的 BigDecimal 比较器

本文旨在解决这个问题 Java 中对包含 BigDecimal 排序类型对象列表时&#xff0c;如何处理可能出现的空指针异常。自定义 BigDecimal 并结合比较器 Comparator.nullsFirst 可以实现正确的方法 BigDecimal 空值安全排序字段&#xff0c;避免程序崩溃&#xff0c;确保排序结果的正…...

编程新知 2026/3/27 23:38:42

计算机毕设 java 基于 BS 的驾校在线学习考试系统 SpringBoot 驾校在线学习与考试管理平台 JavaWeb 驾校理论学习与模拟考试系统

计算机毕设 java 基于 BS 的驾校在线学习考试系统 43i2x9&#xff0c;末尾的数字和英文也要加上 &#xff08;配套有源码 程序 mysql 数据库 论文&#xff09;本套源码可以先看具体功能演示视频领取&#xff0c;文末有联 xi 可分享随着驾考需求的不断增长&#xff0c;传统驾校理…...

编程新知 2026/3/27 22:46:24

LWIP内存管理踩坑实录：从pbuf泄漏到pcb耗尽，我的嵌入式网络调试日记

LWIP内存管理踩坑实录&#xff1a;从pbuf泄漏到pcb耗尽&#xff0c;我的嵌入式网络调试日记 凌晨三点&#xff0c;调试器上的红色LED还在闪烁。这是我连续第三个通宵追踪LWIP的内存问题——设备在运行48小时后必然崩溃&#xff0c;日志里满是"pbuf_alloc failed"和&q…...

编程新知 2026/3/27 22:28:16

别再死记硬背了！用Python和SymPy库5分钟可视化理解泰勒公式的逼近过程

用Python动态可视化泰勒公式&#xff1a;5行代码理解多项式逼近本质 数学公式的抽象性常常成为学习者的障碍&#xff0c;尤其是泰勒公式这种涉及无限逼近概念的内容。传统的静态图示和理论推导虽然严谨&#xff0c;却难以直观展示"以直代曲"的动态过程。本文将用Pyth…...

编程新知 2026/3/27 21:58:02

Pixel Fashion Atelier保姆级教程：如何将生成结果无缝导入Aseprite进行二次编辑

Pixel Fashion Atelier保姆级教程&#xff1a;如何将生成结果无缝导入Aseprite进行二次编辑 1. 教程概述 Pixel Fashion Atelier是一款基于Stable Diffusion与Anything-v5的像素风格图像生成工具&#xff0c;特别适合创作复古RPG风格的时尚设计。本教程将手把手教你如何将生成…...

编程新知 2026/3/27 21:09:46

Qwen3.5-4B-Claude-Opus部署教程：supervisor托管+健康检查全流程详解

Qwen3.5-4B-Claude-Opus部署教程&#xff1a;supervisor托管健康检查全流程详解 1. 模型介绍 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF 是一个基于 Qwen3.5-4B 的推理蒸馏模型&#xff0c;重点强化了结构化分析、分步骤回答、代码与逻辑类问题的处理能力。该版本…...

编程新知 2026/3/27 20:59:43

5个维度掌握wechat-api：从入门到生产的微信机器人开发指南

5个维度掌握wechat-api&#xff1a;从入门到生产的微信机器人开发指南 【免费下载链接】wechat-api &#x1f5ef; wechat-api by java7. 项目地址: https://gitcode.com/gh_mirrors/we/wechat-api 核心价值&#xff1a;企业为什么需要微信机器人&#xff1f; 在数字化…...

编程新知 2026/3/27 20:35:37

注意力机制融合新范式：从GCNet与DANet看全局建模的演进与实战

1. 视觉注意力机制的进化之路 记得我第一次接触视觉注意力机制是在2016年&#xff0c;那时ResNet刚掀起深度学习的新浪潮。当时最让我困惑的是&#xff1a;为什么神经网络需要"注意力"&#xff1f;后来在ImageNet数据集上做实验时才明白&#xff0c;传统CNN就像近视眼…...

编程新知 2026/3/27 20:17:08

大模型应用开发：从Demo到生产，小白程序员必看！收藏这份实战指南

本文深入剖析了将大模型应用从原型阶段推向生产环境所面临的关键挑战&#xff0c;涵盖数据处理&#xff08;格式多样性、切块策略、数据更新&#xff09;、检索质量&#xff08;找不到、找不准、找太多&#xff09;、生成阶段&#xff08;幻觉、引用溯源&#xff09;、规模化工…...

编程新知 2026/3/27 19:59:04