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

Web响应式设计———1、Grid布局

news 2026/2/8 22:56:29

1、网格布局 Grid布局

流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding:0;margin:0;}.container{width:100vw;height:100vh;background-color: #775c5c;/*声明内部使用网格布局，对直接子元素生效*/display: grid;/*设置行数和行的高度*/grid-template-rows:100px 100px 100px;/*设置列和列宽度*/grid-template-columns: 100px 100px 100px 100px;}.item{border: 1px solid #ccc;box-sizing: border-box;background-color: #fff;}</style>
</head>
<body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">0</div><div class="item">11</div><div class="item">12</div></div>
</body>
</html>

在这里插入图片描述
利用fr分成等份，根据屏幕大小自适应

<style>*{padding:0;margin:0;}.container{width:100vw;height:100vh;background-color: #775c5c;/*声明内部使用网格布局，对直接子元素生效*/display: grid;/*设置行数和行的高度grid-template-rows:1fr 1fr 1fr 1fr;grid-template-rows:repeat(4,1fr); */grid-template-rows:repeat(2,1fr) 2fr 1fr;/*设置列和列宽度*/grid-template-columns: 1fr 1fr 1fr;}.item{border: 1px solid #ccc;box-sizing: border-box;background-color: #fff;}</style>

在这里插入图片描述

网格之间间距 gap: 30px;
在这里插入图片描述
grid-row-gap:行间距
grid-column-gap:列间距

跨越两列（横向合并）
.one{
grid-column: span 2;//跨两列

}
.two{
grid-row: span 3;//跨越三行（纵向）
}

把被合并的注释掉，样式写在第一个上面

.three{
grid-area:span 2/span 3;
//网格区域 跨行/跨列
}

搭建
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.container{width: 100%;height: 800px;background-color: #ced6e9;display: grid;grid-template-columns: 20% 25% 25% 25%;grid-template-rows: 10% 20% 20% 20% 20%;gap: 10px;}.one{grid-column: span 4;}.three{grid-column: span 3;grid-row: span 2;}.four{grid-row: span 3;}.five{grid-row: span 2;grid-column: span 2;}.item{font-size: 20px;text-align: center;display: flex;justify-content: center;align-items: center;background-color: rgb(255, 222, 239);}</style>
</head>
<body><div class="container"><div class="item one">1</div><div class="item">2</div><div class="item three">3</div><div class="item four">4</div><div class="item five">5</div><div class="item">6</div><div class="item">7</div></div>
</body>
</html>

相关文章：

Web响应式设计———1、Grid布局

1、网格布局 Grid布局 流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样&#xff0c;页面上的元素可以根据屏幕宽度自动调整大小&#xff0c;适应不同设备和分辨率。 <!DOCTYPE html> <html lang"en"> &l…...

编程日记 2024/7/25 20:58:48

ESP32开发进阶: 训练神经网络

一、网络设定 我们设定一个简单的前馈神经网络&#xff0c;其结构如下&#xff1a; 输入层&#xff1a;节点数&#xff1a;2&#xff0c;接收输入数据&#xff0c;每个输入样本包含2个特征&#xff0c;例如 {1.0, 0.0}, {0.0, 1.0} 等。 隐藏层&#xff1a;节点数&#xff1a;…...

编程日记 2024/7/25 20:55:45

全国区块链职业技能大赛国赛考题前端功能开发

任务3-1：区块链应用前端功能开发 1．请基于前端系统的开发模板，在登录组件login.js、组件管理文件components.js中添加对应的逻辑代码，实现对前端的角色选择功能，并测试功能完整性，示例页面如下： 具体要求如下： （1）有明确的提示，提示用户选择角色； （2）用户可看…...

编程日记 2024/7/25 20:54:43

直接插入排序算法详解

直接插入排序&#xff08;Straight Insertion Sort&#xff09;是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。插入排序在实现上&#xff0c;通常采用in-place排…...

编程日记 2024/7/25 20:53:42

sql手动自增id

有时候在运维处理数据的时候&#xff0c;需要给某张表插入新的记录&#xff0c;那么需要知道最新插入数据的id,并在最新id的基础上加上id增长步长获取新的id,这个过程往往需要现将max出来加1,再手动补充到sql语句中&#xff0c;很麻烦&#xff0c;而且数据多的时候容易出错。有…...

编程日记 2024/7/25 20:50:40

10_TypeScript中的泛型

TypeScript中的泛型&#xff09; 一、泛型的定义二、泛型函数三、泛型类&#xff1a;比如有个最小堆算法&#xff0c;需要同时支持返回数字和字符串两种类型。通过类的泛型来实现四、泛型接口五、泛型类 --扩展 把类作为参数类型的泛型类1、实现&#xff1a;定义一个 User 的类…...

编程日记 2024/7/25 20:45:36

Unity3D之TextMeshPro使用

文章目录 1. TextMeshPro简介2. TextMeshPro创建3. TextMeshPro脚本中调用4. TextMeshPro字体设置及中文支持过程中出现的一些问题 1. TextMeshPro简介 【官网文档】https://docs.unity.cn/cn/2020.3/Manual/com.unity.textmeshpro.html TextMeshPro 是 Unity 的最终文本解决…...

编程日记 2024/7/25 20:44:35

K8S 上部署 Prometheus + Grafana

文章目录 一、使用 Helm 安装 Prometheus1. 配置源2. 下载 prometheus 包3. 安装 prometheus4. 卸载 二、使用 Helm 安装 Grafana1. 配置源2. 安装 grafana3. 访问4. 卸载 一、使用 Helm 安装 Prometheus 1. 配置源 地址&#xff1a;https://artifacthub.io/packages/helm/pro…...

编程日记 2024/7/25 20:41:32

雷军的逆天改命与顺势而为

雷军年度演讲前&#xff0c;朋友李翔提了一个问题&#xff1a;雷军造车是属于顺势而为还是逆势而为&#xff1f;评论互动区有一个总结&#xff0c;很有意思&#xff0c;叫“顺势逆袭”。 大致意思是产业趋势下小米从手机到IOT再切入汽车&#xff0c;是战略的必然&#xff0c;不…...

编程日记 2024/7/25 20:40:31

Leetcode 11. 盛最多水的容器

Leetcode 11. 盛最多水的容器 Leetcode 11. 盛最多水的容器 一、题目描述二、我的想法 一、题目描述 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成…...

编程日记 2024/7/25 20:36:28

Java笔试分享

1、设计模式&#xff08;写>3种常用的设计模式&#xff09; 设计模式是在软件工程中解决常见问题的经验性解决方案。以下是一些常用的设计模式&#xff1a; 单例模式&#xff08;Singleton&#xff09;&#xff1a; 意图&#xff1a;确保一个类只有一个实例&#xff0c;并…...

编程日记 2024/7/25 20:35:27

LeetCode：对称的二叉树（C语言）

1、问题概述&#xff1a;给一个二叉树&#xff0c;看是否按轴对称 2、示例 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false 3、分析 &#xff08;1&a…...

编程日记 2024/7/25 20:33:25

Postman中的API Schema验证：确保响应精准无误

Postman中的API Schema验证&#xff1a;确保响应精准无误 在API开发和测试过程中&#xff0c;验证响应数据的准确性和一致性是至关重要的。Postman提供了一个强大的功能——API Schema验证&#xff0c;它允许开发者根据预定义的JSON Schema来检查API响应。本文将详细介绍如何在…...

编程日记 2024/7/25 20:32:24

深入浅出WebRTC—GCC

GoogCcNetworkController 是 GCC 的控制中心&#xff0c;它由 RtpTransportControllerSend 通过定时器和 TransportFeedback 来驱动。GoogCcNetworkController 不断更新内部各个组件的状态&#xff0c;并协调组件之间相互配合&#xff0c;向外输出目标码率等重要参数&#xff0…...

编程日记 2024/7/25 20:31:23

leetcode日记（49）旋转链表

其实不难&#xff0c;就是根据kk%len判断需要旋转的位置&#xff0c;再将后半段接在前半段前面就行。 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : …...

编程日记 2024/7/25 20:30:15

InteliJ IDEA最新2024版下载安装与快速配置激活使用教程+jdk下载配置

第一步&#xff1a;下载ideaIC-2024.1.4 方法1&#xff1a;在线链接 IntelliJ IDEA – the Leading Java and Kotlin IDE (jetbrains.com) 选择社区版进行下载 方法2&#xff1a;百度网盘 链接&#xff1a;https://pan.baidu.com/s/1ydS6krUX6eE_AdW4uGV_6w?pwdsbfm 提取…...

编程日记 2024/7/25 20:28:13

【23】Android高级知识之Window(四) - ThreadedRenderer

一、概述 在上一篇文章中已经讲了setView整个流程中&#xff0c;最开始的addToDisplay和WMS跨进程通信的整个过程做了什么。继文章Android基础知识之Window(二)&#xff0c;这算是另外一个分支了&#xff0c;接着讲分析在performTraversals的三个操作中&#xff0c;最后触发pe…...

编程日记 2024/7/25 20:26:11

Java-根据前缀-日期-数字-生成流水号（不重复）

&#x1f388;边走、边悟&#x1f388;迟早会好 小伙伴们在日常开发时可能会遇到的业务-生成流水号&#xff0c;在企业中可以说是比较常见的需求&#xff0c; 可以采用"前缀日期数字"的方式&#xff08;ps:此方式是需要用到缓存的&#xff09;前缀&#xff1a;为了…...

编程日记 2024/7/25 20:25:10

跟李沐学AI：卷积层

从全连接层到卷积 多层感知机十分适合处理表格数据&#xff0c;其中行对应样本&#xff0c;列对应特征。但对于图片等数据&#xff0c;全连接层会导致参数过多。卷积神经网络&#xff08;convolutional neural networks&#xff0c;CNN&#xff09;是机器学习利用自然图像中一…...

编程日记 2024/7/25 20:22:07

使用RedisTemplate操作executePipelined

前言 RedisTemplate 是 Spring 提供的用于操作 Redis 的模板类&#xff0c;它封装了 Redis 的连接、连接池等管理&#xff0c;并提供了一系列的操作方法来简化 Redis 的使用。其中&#xff0c;executePipelined 方法是 RedisTemplate 中的一个高级特性&#xff0c;用于支持 Re…...

编程日记 2024/7/25 20:20:05

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2026/1/31 17:15:25

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2026/2/3 4:26:32

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2026/2/4 16:40:55