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

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/217715.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

测长机:精度与用途解析

测长机是一种用于测量物体长度或距离的专业测量仪器&#xff0c;而且测量结果能够稳定且可靠。其精度是衡量其优劣的重要标准之一。 在制造业中&#xff0c;长度尺寸是所有几何量尺寸测量的基准。通过测量产品的长度&#xff0c;可以及时发现并纠正尺寸偏差&#xff0c;保证产…

JVM的内存分区以及垃圾收集

1.JVM的内存分区 1.1方法区 方法区(永久代&#xff09;主要用来存储已在虚拟机加载的类的信息、常量、静态变量以及即时编译器编译后的代码信息。该区域是被线程共享的。 1.2虚拟机栈 虚拟机栈也就是我们平时说的栈内存&#xff0c;它是为java方法服务的。每个方法在执行的…

Vue--第八天

Vue3 1.优点&#xff1a; 2.创建&#xff1a; 3.文件&#xff1a; 换运行插件&#xff1a; 4.运行&#xff1a; setup函数&#xff1a; setup函数中获取不到this&#xff08;this 在定义的时候是Undefined) reactive()和ref(): 代码&#xff1a; <script setup> // …

解决el-table组件中,分页后数据的勾选、回显问题?

问题描述&#xff1a; 1、记录一个弹窗点击确定按钮后&#xff0c;table列表所有勾选的数据信息2、再次打开弹窗&#xff0c;回显勾选所有保存的数据信息3、遇到的bug&#xff1a;切换分页&#xff0c;其他页面勾选的数据丢失&#xff1b;点击确认只保存当前页的数据&#xff1…

学习MS Dynamics AX 2012编程开发 1. 了解Dynamics AX 2012

在本章中&#xff0c;您将了解开发环境的结构以及Microsoft Dynamics AX中的开发人员可以访问哪些工具。在本书的第一步演练之后&#xff0c;您将很容易理解著名的Hello World代码&#xff0c;您将知道应用程序对象树中的不同节点代表什么。 以下是您将在本章中学习的一些主题…

圆形多线图

const gaugeData [{value: 80,name: Perfect,title: {offsetCenter: [-100%, -100%]},detail: {valueAnimation: true,offsetCenter: [-70%, -100%]},itemStyle: {borderColor: #fff,borderWidth: 6,borderType: solid // 可选&#xff0c;指定边框类型}},{value: 40,name: Go…

MQ-Det: Multi-modal Queried Object Detection in the Wild

首个支持视觉和文本查询的开放集目标检测方法 NeurIPS2023 文章&#xff1a;https://arxiv.org/abs/2305.18980 代码&#xff1a;https://github.com/YifanXu74/MQ-Det 主框图 摘要 这篇文章提出了MQ-Det&#xff0c;一种高效的架构和预训练策略&#xff0c;它利用文本描述的…

JS的箭头函数this:

箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this。 具体看实例&#xff1a; //以前&#xff1a;谁调用的这个函数 this就指向谁// console.log(this);//window// function fn(){// console.log(this);//window 因为这个函数也是window调用…

【Vue+Python】—— 基于Vue与Python的图书管理系统

文章目录 &#x1f356; 前言&#x1f3b6;一、项目描述✨二、项目展示&#x1f3c6;三、撒花 &#x1f356; 前言 【VuePython】—— 基于Vue与Python的图书管理系统 &#x1f3b6;一、项目描述 描述&#xff1a; 本项目为《基于Vue与Python的图书管理系统》&#xff0c;项目…

hive的分区表和分桶表详解

分区表 Hive中的分区就是把一张大表的数据按照业务需要分散的存储到多个目录&#xff0c;每个目录就称为该表的一个分区。在查询时通过where子句中的表达式选择查询所需要的分区&#xff0c;这样的查询效率会提高很多。 静态分区表基本语法 创建分区表 create table dept_p…

Android 移动端编译 cityhash动态库

最近做项目&#xff0c; 硬件端 需要 用 cityhash 编译一个 动态库 提供给移动端使用&#xff0c;l 记录一下 编译过程 city .cpp // // Created by Administrator on 2023/12/12. // // Copyright (c) 2011 Google, Inc. // // Permission is hereby granted, free of charg…

54 代码审计-TP5框架审计写法分析及代码追踪

目录 知识点1知识点2演示案例:demo代码段自写和规则写分析hsycms-TP框架-不安全写法-未过滤weipan21-TP框架-规则写法-内置过滤 知识点1 调试&#xff0c;访问&#xff0c;路由&#xff0c;配置&#xff0c;版本等 知识点2 自写写法&#xff1a;自己写代码&#xff0c;一步步…

以csv为源 flink 创建paimon 临时表相关 join 操作

目录 概述配置关键配置测试启动 kyuubi执行配置中的命令 bug解决bug01bug02 结束 概述 目标&#xff1a;生产中有需要外部源数据做paimon的数据源&#xff0c;生成临时表&#xff0c;以使用与现有正式表做相关统计及 join 操作。 环境&#xff1a;各组件版本如下 kyuubi 1.8…

互联网加竞赛 python 爬虫与协同过滤的新闻推荐系统

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python 爬虫与协同过滤的新闻推荐系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&…

迅速理解什么是通信前置机

通信前置机设在两个通信对象之间&#xff0c;是实质性的物理服务器&#xff0c;适应不同通信协议或数据格式之间的相互转换。 前置机的作用&#xff1a; 隔离——隔离客户端与服务端&#xff0c;保障后端安全减负——处理非核心业务&#xff0c;分担后端服务器压力&#xff0…

Microsoft 365 Copilot正式上线,如何稳定访问体验?

如果将微软对人工智能的投资看成一场豪赌&#xff0c;Microsoft Copilot无疑是现阶段最受瞩目的赌注。2023年9月正式发布的Microsoft Copilot是一种基于大型语言模型&#xff08;LLM&#xff09;和微软图形&#xff08;Microsoft Graph&#xff09;的数据和人工智能&#xff08…

Maven环境搭建及配置

Maven环境搭建及配置 1.下载部署 官方网站下载正式版的Maven文件,打开bin目录&#xff0c;复制路径然后去环境变量中的path下配置环境变量&#xff0c; 如果只有一个用户只需要在上面path配置复制的路径,当然也可以直接在下面配置,下面配置默认给所有用户都配置 设置完成打开控…

MIT线性代数笔记-第28讲-正定矩阵,最小值

目录 28.正定矩阵&#xff0c;最小值打赏 28.正定矩阵&#xff0c;最小值 由第 26 26 26讲的末尾可知在矩阵为实对称矩阵时&#xff0c;正定矩阵有以下四种判定方法&#xff08;都是充要条件&#xff09;&#xff1a; 所有特征值都为正左上角所有 k k k阶子矩阵行列式都为正&…

软考科目如何选择?

软考科目繁多&#xff0c;让许多学弟学妹感到困惑&#xff0c;不知道该选择哪个科目。以下是一些建议&#xff0c;可以根据个人实际需求选择备考的科目。 1、初级是可选的 软考初级非常简单&#xff0c;适合刚刚入门学习的朋友报考。对于一些有基础的朋友&#xff0c;建议直接…

【后端开发】Next.js 13.4:前端开发的游戏规则改变者!

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…