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

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

news 2026/3/27 7:01:07

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

【电赛实战利器】基于STM32F4与协方差修正的全数字锁相放大器设计与实测

1. 为什么你需要一个全数字锁相放大器&#xff1f; 在电子设计竞赛或者精密测量项目中&#xff0c;微弱信号检测总是让人头疼。想象一下&#xff0c;你要从一堆嘈杂的噪音中找出一个微弱的正弦波信号&#xff0c;就像在喧闹的菜市场里听清远处朋友的耳语。传统模拟锁相放大器需…...

编程新知 2026/3/27 6:11:02

Science重磅指南：如何打造高影响力论文摘要？附Abstract写作黄金法则！

1. 科学论文摘要的黄金结构 写论文摘要就像给陌生人讲一个精彩的故事——要在短短200字内让人眼前一亮。我在Nature和Science上发过几篇论文&#xff0c;也审过上百篇投稿&#xff0c;发现顶级期刊的摘要其实有套"万能公式"。这个公式的核心是把摘要拆解成7个关键部分…...

编程新知 2026/3/27 5:24:45

OpenClaw多模态飞书助手：Qwen3-VL:30B实战详解

OpenClaw多模态飞书助手&#xff1a;Qwen3-VL:30B实战详解 1. 为什么需要多模态飞书助手&#xff1f; 去年夏天&#xff0c;我负责一个跨部门协作项目时&#xff0c;每天要处理上百条飞书消息。最头疼的是同事发来的各种截图——有的是数据报表需要整理&#xff0c;有的是会议…...

编程新知 2026/3/27 4:03:39

力扣原题《长度最小的子数组》，有序版(理想版最大值查找)纯手搓，已验证，方差版(考虑元素离散，大值周围全是小值的情况)在下一篇

理想版&#xff0c;大值周围是大值 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例…...

编程新知 2026/3/27 3:41:27

OpenClaw安全指南：使用GLM-4.7-Flash时的权限管理

OpenClaw安全指南&#xff1a;使用GLM-4.7-Flash时的权限管理 1. 为什么需要特别关注OpenClaw的安全配置 当我第一次在本地部署OpenClaw并接入GLM-4.7-Flash模型时&#xff0c;最让我震惊的是这个框架赋予AI的权限范围。它不仅能读取我的文件&#xff0c;还能执行系统命令、发…...

编程新知 2026/3/27 1:30:21

PDF Arranger：开源PDF管理的终极解决方案，3分钟掌握高效文档处理技巧

PDF Arranger&#xff1a;开源PDF管理的终极解决方案&#xff0c;3分钟掌握高效文档处理技巧 【免费下载链接】pdfarranger Small python-gtk application, which helps the user to merge or split PDF documents and rotate, crop and rearrange their pages using an intera…...

编程新知 2026/3/27 1:24:20

Go Mutex 与 RWMutex 性能对比

在Go语言并发编程中&#xff0c;Mutex&#xff08;互斥锁&#xff09;和RWMutex&#xff08;读写锁&#xff09;是两种常用的同步机制。它们的性能差异直接影响高并发场景下的程序效率。本文将从多个角度对比两者的性能表现&#xff0c;帮助开发者根据实际需求选择合适的锁机制…...

编程新知 2026/3/27 1:07:41

springboot基于协同过滤推荐算法的图书借阅推荐系统

目录需求分析与系统设计数据准备与处理协同过滤算法实现推荐系统集成系统测试与优化部署与监控项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与系统设计 明确系统的核心功能需求&#xff0c;包括用户管理、图书管理、…...

编程新知 2026/3/27 0:49:39

BM12O2321-A高集成H桥模块的9位UART驱动原理与Arduino库实践

1. 项目概述BM12O2321-A 是由 Basetron&#xff08;BestModules&#xff09;推出的高集成度 H 桥驱动模块&#xff0c;专为中小功率直流电机、电磁阀、LED 阵列等双向负载控制场景设计。该模块并非传统意义上的分立 H 桥芯片&#xff08;如 L298N、TB6612FNG&#xff09;&#…...

编程新知 2026/3/27 0:35:33

TSMaster与珠海创芯CAN卡的集成指南

1. 珠海创芯CAN卡与TSMaster的基础认知 第一次接触珠海创芯CAN卡时&#xff0c;我和很多工程师一样好奇&#xff1a;这个硬件到底有什么特别之处&#xff1f;实测下来发现&#xff0c;它最大的优势在于高性价比和兼容性。珠海创芯的CAN卡采用标准USB接口&#xff0c;支持CAN2.0…...

编程新知 2026/3/27 0:21:27