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

html中一个div中平均一行分配四个盒子，可展开与收起所有的盒子

news 2026/2/10 2:58:03

html中一个div中平均一行分配四个盒子，可展开与收起所有的盒子

1.截图显示部分
在这里插入图片描述
在这里插入图片描述
2.代码展示部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.container {position: relative;display: flex;flex-wrap: wrap;border: 3px solid;border-color: #D4E3FC;}.box {position: relative;width: 23%;height: 100px;box-sizing: border-box;padding: 10px;background-color: #D4E3FC;margin: 5px;display: none;border-radius: 10px;}#toggleButton {position: absolute;bottom: 0;right: 0;margin: 10px;cursor: pointer;color: blue;text-decoration: underline;}</style><title>缩放盒子</title>
</head>
<body><div class="container" id="boxContainer"><div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div><div class="box">Box 4</div><div class="box">Box 5</div><div class="box">Box 6</div><div class="box">Box 7</div><div class="box">Box 8</div><div class="box">Box 9</div><div class="box">Box 10</div><div class="box">Box 11</div><div class="box">Box 12</div><div class="box">Box 13</div><div class="box">Box 14</div><div class="box">Box 15</div><div class="box">Box 16</div><div id="toggleButton">展开/收缩</div></div><script>var boxes = document.querySelectorAll('.box');for(var i = 0; i < 4; i++) {boxes[i].style.display = 'block';}var toggleState = false;document.getElementById('toggleButton').addEventListener('click', function () {toggleState = !toggleState;for(var i = 4; i < boxes.length; i++) {boxes[i].style.display = toggleState ? 'block' : 'none';}});</script>
</body></html>

相关文章：

html中一个div中平均一行分配四个盒子，可展开与收起所有的盒子

html中一个div中平均一行分配四个盒子&#xff0c;可展开与收起所有的盒子 1.截图显示部分 2.代码展示部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…...

编程日记 2023/12/15 20:54:49

Python虚拟环境指南：告别依赖地狱

一、背景 在SAAS&#xff08;软件即服务&#xff09;平台中&#xff0c;用户使用自行定制的Python脚本已经成为司空见惯的做法&#xff0c;然而&#xff0c;由于不同用户对Python三方库的需求各不相同&#xff0c;而底层服务器一般只安装了一个Python版本。举例来说&#xff0…...

编程日记 2023/12/15 20:50:46

【Jeecg Boot 3 - 第二天】第2节 前后端docker部署云服务器

更新完成&#xff0c;点击下面章节进入 一、后端部署 1.1、后端 docker-compose 部署 JEECGBOOT 1.2、jar 包和 lib 依赖分离&#xff0c;部署包缩小100倍 二、前端部署 2.1、nginx 部署 JEECGBOOT VUE3 2.2、开启Nginx压缩&#xff0c;解决前端访问慢问题...

编程日记 2023/12/15 20:49:45

2020年第九届数学建模国际赛小美赛A题自由泳解题全过程文档及程序

2020年第九届数学建模国际赛小美赛 A题 自由泳 原题再现&#xff1a; 在所有常见的游泳泳姿中&#xff0c;哪一种最快&#xff1f;哪个冲程推力最大&#xff1f;在自由泳项目中&#xff0c;游泳者可以选择他们的泳姿&#xff0c;他们通常选择前面的爬行。然而&#xff0c;游泳…...

编程日记 2023/12/15 20:47:44

双端队列和优先级队列

文章目录 前言dequedeque底层设计迭代器设计 priority仿函数数组中的第k个最大元素优先级队列模拟实现pushpop调整仿函数存储自定义类型 前言 今天要介绍比较特殊的结构&#xff0c;双端队列。 还有一个适配器&#xff0c;优先级队列。 deque 栈的默认容器用了一个deque的东西…...

编程日记 2023/12/15 20:46:43

c#读取CSV文件跟Excel导入成DataTble

1.读取CSV文件 /// <summary>/// 读取CSV文件/// </summary>/// <param name"fileName">文件路径</param>public static DataTable ReadCSV(string fileName){DataTable dt new DataTable();FileStream fs new FileStream(fileName, FileM…...

编程日记 2023/12/15 20:45:42

Python编程技巧 – 单字符函数

Python编程技巧 – 单字符函数 Python Programming Skills – Single Character Function By JacksonML 0. 前言 Python有其内建(built-in)的一系列函数&#xff0c;其中&#xff0c;有两个函数为长度为一的字符设计。这样的函数是单字符函数&#xff0c;尽管它们操作的对象…...

编程日记 2023/12/15 20:43:40

xcode-文件

IOSDeviceSupoprt 共享缓存库 当你使用新的 iOS 设备连接到 Xcode 时&#xff0c;Xcode 会自动下载并存储相应版本的设备支持文件。 每个 iOS 版本都有一个对应的设备支持文件集&#xff0c;这些文件包含有关设备架构和操作系统的信息&#xff0c;以便 Xcode 能够正确地调试和…...

编程日记 2023/12/15 20:38:37

云原生之深入解析网络服务Istio、eBPF和RSocket Broker

一、服务治理 ① “服务治理”简介 在微服务时代&#xff0c;一个复杂的应用程序被分解为多个组件化、协作和连接的单元&#xff0c;服务往往会承担越来越多的业务责任&#xff0c;这使得服务治理的难度前所未有&#xff0c;仅仅依靠微服务框架级的治理是不够的&#xff0c;构…...

编程日记 2023/12/15 20:34:34

文件系统和磁盘调度

文件系统 概述 文件系统&#xff1a;一种用于持久性存储的系统抽象 在存储器上&#xff1a;组织、控制、导航、访问和检索数据大多数计算机包含文件系统 文件&#xff1a;文件系统中一个单元的相关数据在操作系统中的抽象 文件系统功能 分配文件磁盘空间 管理文件块管理空…...

编程日记 2023/12/15 20:33:33

C++ stringOJ练习题

目录 把字符串转换成整数 反转字符串 字符串中的第一个唯一字符 字符串最后一个单词的长度 找出字符串中第一个只出现一次的字符 字符串相加 字符串最后一个单词长度 字符串相乘 反转字符串3 反转字符串2 验证回文串 把字符串转换成整数 通过遍历字符串并逐位转换…...

编程日记 2023/12/15 20:31:31

解决问题：ImportError: cannot import name ‘_update_worker_pids‘

在复现一些较早年份文献时&#xff0c;网络架构是较早的Pytorch模型&#xff0c;现阶段的高版本不兼容&#xff0c;所以就得安装比如低版本的torch0.4.0以解决问题。 目录 一、问题1.1 问题分析 二、解决办法2.1 Pytorch安装2.2 torchvision安装2.3 测试是否安装成功 三、总结…...

编程日记 2023/12/15 20:29:29

【面试总结】Java面试题目总结（一）

&#xff08;以下仅为个人见解&#xff0c;如果有误&#xff0c;欢迎大家批评并指出错误&#xff0c;谢谢大家&#xff09; 1.项目中的验证码功能是如何实现的&#xff1f; 第一步&#xff1a;在项目的pom.xml文件中导入 EasyCaptcha 的依赖&#xff1b; <dependency>…...

编程日记 2023/12/15 20:28:28

大白话数据中台，何为数据中台

文章目录 一、数据中台二、本质三、构建数据中台的几个方面四、总结 最近一直在研发Ai平台&#xff0c;忙碌非凡。 在之余&#xff0c;有小伙伴质疑数据中台其实就是一个web系统&#xff0c;无法就是添加一些业务逻辑的增删改查。 答曰&#xff1a; 回去好好把科普下什么是数…...

编程日记 2023/12/15 20:27:27

escapeshellarg参数绕过和注入的问题

escapeshellcmd escapeshellcmd(string $command): string command--要转义的命令。 escapeshellcmd() 对字符串中可能会欺骗 shell 命令执行任意命令的字符进行转义。 此函数保证用户输入的数据在传送到 exec() 或 system() 函数&#xff0c;或者 执行操作符 之前进行转义。 …...

编程日记 2023/12/15 20:24:23

CSS——标准流、浮动、Flex布局

1、标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的排布规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 2、浮动 作用&#xff1a;让块元素水平排列 属性名&#xff1a;float 属性值&#xff1a; left&#xff1a;…...

编程日记 2023/12/15 20:22:22

P21 类神经网络训练不起来怎么办- 自动调整学习率 Adapative learning rate

梯度大&#xff0c;学习率减小梯度小&#xff0c;学习率变大adam随时间变化 &#xff0c; decay / warm up 调整学习率方法一 adagrad 学习率除以 梯度的方差 方法二 RMSProp 目前最常用的&#xff1a; Adam: RMSProp Moment Learning rate schedule : decay/ warm up l…...

编程日记 2023/12/15 20:19:19

[Linformer]论文实现：Linformer: Self-Attention with Linear Complexity

文章目录 一、完整代码二、论文解读2.1 介绍2.2 Self-Attention is Low Rank2.3 模型架构2.4 结果 三、整体总结 论文&#xff1a;Linformer: Self-Attention with Linear Complexity 作者&#xff1a;Sinong Wang, Belinda Z. Li, Madian Khabsa, Han Fang, Hao Ma 时间&#…...

编程日记 2023/12/15 20:17:17

【Jeecg Boot 3 - 第二天】1.1、后端 docker-compose 部署 JEECGBOOT3

一、场景 二、实战 ▶ 2.1 修改配置文件 &#xff1e; 目的一&#xff1a;将 dev 变更为生产环境 prod &#xff1e; 目的二&#xff1a;方便spring项目调用docker同个network下的redis和mysql ▶ 2.2 编写dockerfile ▶ 2.3 编写docker-compose.yaml ▶ 2.4 打…...

编程日记 2023/12/15 20:15:15

Centos单用户模式修改root密码

在CentOS 7的单用户模式下&#xff0c;你可以按照以下步骤修改root用户密码&#xff1a; 启动CentOS 7并进入GRUB菜单。在启动时按下任意键进入GRUB菜单。 在GRUB菜单中&#xff0c;选择要启动的CentOS 7内核版本&#xff0c;并按下e键进行编辑。 找到以 ro 开头的行&#xf…...

编程日记 2023/12/15 20:14:15

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18