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

前端学习之css基本网格布局

news 2026/5/25 1:38:03

网格布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网格布局</title><style>.a{/* grid网格布局 */display: grid;width: 400px;height: 400px;border: 1px solid red;/* 设置当前网格有多少列，每列有多少空间20% 20% 20% 20% ：指定现在有4列每列宽度为20%100px 100px 100px 100px：指定现在有4列每列100pxrepeat(4,1fr)表示分4列每列均匀分配，fr表示一个网格占据多少份*/grid-template-columns:repeat(4,1fr) ;/*  设置当前网格有多少行 */grid-template-rows: repeat(4,1fr);}.a>div{/* width: 50px;height: 50px; */border: 1px solid;}.a>div:first-child{/* 表示当前的盒子第几行开始，第几行结束，，其他盒子依次王国排，（左闭右开） *//* grid-row-start: 1;grid-row-end: 4; *//* 列 *//* grid-column-start: 1;grid-column-end:4 ; *//* 下面写出来的效果和上面的一样 */grid-row: 1/3;grid-column: 1/3;}</style>
</head>
<body><div class="a"><div>子div1</div><div>子div2</div><div>子div3</div><div>子div4</div><div>子div5</div><div>子div6</div><div>子div7</div><div>子div8</div><div>子div9</div><div>子div10</div><div>子div11</div><div>子div12</div><div>子div13</div><div>子div14</div><div>子div15</div><div>子div16</div></div>
</body>
</html>

结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

相关文章：

前端学习之css基本网格布局

网格布局 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>网格布局</title><style>.a{/* grid网格布局 */display: grid;width: 400px;height: 400px;border: 1px solid red;/* 设置当前…...

编程日记 2024/3/26 10:18:05

[网鼎杯2018]Unfinish 两种方法 -----不会编程的崽

网鼎杯太喜欢搞二次注入了吧。上次是无列名盲注&#xff0c;这次又是二次注入盲注。。。不知道方法还是挺难的。哎&#xff0c;网鼎嘛&#xff0c;能理解透彻就很强了。能自己做出来那可太nb了。 又是熟悉的登录框。不知道这是第几次看见网鼎杯的登录框了。后台扫描一下&#x…...

编程日记 2024/3/26 10:17:04

安防监控视频汇聚平台EasyCVR在银河麒麟V10系统中的启动异常及解决方法

安防监控视频平台EasyCVR具备较强的兼容性&#xff0c;它可以支持国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等。平台兼容性强&#xff0c;支持Windows系…...

编程日记 2024/3/26 10:11:59

了解云原生

声明&#xff1a;内容来自AI&#xff0c;未经验证&#xff0c;仅供参考! 1、云原生学习路线 学习云原生(Cloud Native)技术涉及了解和掌握一系列的概念、技术和工具。云原生是一种构建和运行应用程序的方法&#xff0c;旨在充分利用云计算的灵活性、可伸缩性和弹性。以下是一…...

编程日记 2024/3/26 10:09:57

【go从入门到精通】for和for range的区别

作者简介&#xff1a; 高科&#xff0c;先后在 IBM PlatformComputing从事网格计算&#xff0c;淘米网&#xff0c;网易从事游戏服务器开发&#xff0c;拥有丰富的C&#xff0c;go等语言开发经验&#xff0c;mysql&#xff0c;mongo&#xff0c;redis等数据库&#xff0c;设计模…...

编程日记 2024/3/26 10:06:54

【C语言】【Leetcode】88. 合并两个有序数组

文章目录 一、题目二、思路再思考 一、题目 链接: link 二、思路 这题属于简单题&#xff0c;比较粗暴的做法就是直接比较两个数组&#xff0c;先把第二个数组加到第一个的后面&#xff0c;如何冒泡排序&#xff0c;这种方法简单粗暴但有效&#xff0c;可是不适用于这题&…...

编程日记 2024/3/26 10:04:52

DMA控制器

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;这是我作为学习笔记的25篇&#xff0c;本篇文章给大家介绍DMA。 无论 I/O 速度如何提升&#xff0c;比起 CPU&#xff0c;总还是太慢。如果我们对于 I/O 的操作&#xff0c;都是由 CPU 发出对应的指令&#xff0c;然后等待…...

编程日记 2024/3/26 10:01:49

SQLiteC/C++接口详细介绍sqlite3_stmt类（十）

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;九&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十一&#xff09; 38、sqlite3_column_value sqlite3_column_valu…...

编程日记 2024/3/26 10:00:47

Android 生成Excel文件保存到本地

本文用来记录在安卓中生成Excel文件并保存到本地操作&#xff0c;在网上找了好久&#xff0c;终于找到一个可以用的&#xff0c;虽然代码已经很老的&#xff0c;但亲测可用&#xff01; 项目地址&#xff1a;https://github.com/wanganan/AndroidExcel 可以下载下来修改直接用…...

编程日记 2024/3/26 9:55:42

Hive-技术补充-ANTLR语法编写

一、导读 我们学习一门语言&#xff0c;或外语或编程语言&#xff0c;是不是都是要先学语法&#xff0c;想想这些语言有哪些相同点 1、中文、英语、日语......是不是都有 主谓宾 的规则 2、c、java、python、js......是不是都有 数据类型 、循环 等语法或数据结构 虽然人们在…...

编程日记 2024/3/26 9:54:41

6.使用个人用户登录域控的成员服务器，如何防止个人用户账号的用户策略生效？

&#xff08;1&#xff09;需求&#xff1a; &#xff08;2&#xff09;实战配置步骤 第一步:创建新的策略-并编辑策略 第二步&#xff1a;将策略应用到服务器处在OU 第三步&#xff1a;测试 &#xff08;1&#xff09;需求&#xff1a; 比如域控&#xff0c;或者加入域的…...

编程日记 2024/3/26 9:53:39

模拟算法

例题一 算法思路&#xff1a; 纯模拟。从前往后遍历整个字符串&#xff0c;找到问号之后&#xff0c;就⽤ a ~ z 的每⼀个字符去尝试替换即 可。 例题二 解法&#xff08;模拟 分情况讨论&#xff09;&#xff1a; 算法思路&#xff1a; 模拟 分情况讨论。 计算相邻两个…...

编程日记 2024/3/26 9:52:35

【数据结构刷题专题】—— 二叉树

二叉树 二叉树刷题框架 二叉树的定义&#xff1a; struct TreeNode {int val;TreeNode* left;TreeNode* right;TreeNode(int x) : val(x), left(NULL), right(NULL); };1 二叉树的遍历方式 【1】前序遍历 class Solution { public:void traversal(TreeNode* node, vector&…...

编程日记 2024/3/26 9:51:33

基于AWS云服务构建智能家居系统的最佳实践

在当今智能家居时代,构建一个安全、高性能、可扩展和灵活的智能家居系统已经成为许多公司的目标。亚马逊网络服务(AWS)提供了一系列云服务,可以帮助企业轻松构建和管理智能家居系统。本文将探讨如何利用AWS云服务构建一个智能家居系统,并分享相关的最佳实践。 系统架构概述 该…...

编程日记 2024/3/26 9:48:30

Java零基础-集合：Set接口

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一个人虽可以走的更快&#xff0c;但一群人可以走的更远。 我是一名后…...

编程日记 2024/3/26 9:47:28

数据结构与算法-排序算法

1.顺序查找 def linear_search(iters, val):for i, v in enumerate(iters):if v val:return ireturn 2.二分查找 # 升序的二分查找 def binary_search(iters, val):left 0right len(iters)-1while left < right:mid (left right) // 2if iters[mid] val:return mid…...

编程日记 2024/3/26 9:45:26

SpringBoot 文件上传（三）

之前讲解了如何接收文件以及如何保存到服务端的本地磁盘中&#xff1a; SpringBoot 文件上传&#xff08;一)-CSDN博客 SpringBoot 文件上传&#xff08;二&#xff09;-CSDN博客 这节讲解如何利用阿里云提供的OSS&#xff08;Object Storage Service)对象存储服务保存文件。…...

编程日记 2024/3/26 9:44:22

web渗透测试漏洞流程：红队目标信息收集之资产搜索引擎收集

web渗透测试漏洞流程 渗透测试信息收集---域名信息收集1.域名信息的科普1.1 域名的概念1.2 后缀分类1.3 多重域名的关系1.4 域名收集的作用1.5 DNS解析原理1.6 域名解析记录2. 域名信息的收集的方法2.1 基础方法-搜索引擎语法2.1.1 Google搜索引擎2.1.1.1 Google语法的基本使用…...

编程日记 2024/3/26 9:39:17

UI自动化_id 元素定位

## 导包selenium from selenium import webdriver import time1、创建浏览器驱动对象 driver webdriver.Chrome() 2、打开测试网站 driver.get("你公司的平台地址") 3、使浏览器窗口最大化 driver.maximize_window() 4、在用户名输入框中输入admin driver.find_ele…...

编程日记 2024/3/26 9:36:13

华为OD技术面算法题整理

LeetCode原题 简单 题目编号频次409. 最长回文串 - 力扣（LeetCode）3...

编程日记 2024/3/26 9:35:12

CentOS 7服务器管理员的福音：手把手配置fbterm终端，实现中英文无缝切换

CentOS 7终端双语解决方案&#xff1a;fbterm配置全指南与实战技巧对于长期工作在命令行界面的系统管理员来说&#xff0c;中英文环境切换是个高频痛点。英文系统能确保软件兼容性和命令执行稳定性&#xff0c;但面对中文日志、文档时又需要可靠的显示支持。这种矛盾在CentOS 7…...

编程新知 2026/5/25 1:37:03

CD-GraB算法：协调数据顺序，加速分布式机器学习收敛

1. 分布式机器学习中的收敛瓶颈与数据顺序的隐秘关联在分布式机器学习的世界里&#xff0c;我们每天都在和数据、算力、时间赛跑。当你把训练任务拆分到多个GPU或服务器节点上并行执行时&#xff0c;一个看似不起眼的问题往往会成为性能提升的“暗礁”&#xff1a;数据以什么顺…...

编程新知 2026/5/25 0:18:53

技术人的职业规划：打造成功的职业生涯

技术人的职业规划&#xff1a;打造成功的职业生涯 引言 作为一名技术人&#xff0c;职业规划是实现职业目标的关键。在快速变化的技术领域&#xff0c;一个清晰的职业规划可以帮助我们明确方向&#xff0c;抓住机会&#xff0c;实现个人价值。 回顾我的职业历程&#xff0c;从一…...

编程新知 2026/5/24 23:55:15

鸿蒙健身计划页面构建：动作清单与训练部位分布模块详解

鸿蒙健身计划页面构建&#xff1a;动作清单与训练部位分布模块详解 前言 在 HarmonyOS 6.0 应用开发中&#xff0c;健身类页面的训练动作展示和训练部位分析是用户执行训练计划的核心参考模块。本文将以“健身计划”应用中的“动作清单”垂直列表模块和“训练部位分布”进度条网…...

编程新知 2026/5/24 23:47:06

如何用NightX Client打造终极Minecraft 1.8.9体验？完整功能解析+新手教程 [特殊字符]

如何用NightX Client打造终极Minecraft 1.8.9体验&#xff1f;完整功能解析新手教程 &#x1f680; 【免费下载链接】NightX-Client Minecraft Forge 1.8.9 hacked client, Based on LiquidBounce 项目地址: https://gitcode.com/gh_mirrors/ni/NightX-Client NightX Cl…...

编程新知 2026/5/24 22:26:38

GORM 标签详解（数据库字段映射核心）

很多人刚学 GORM&#xff1a; 会觉得&#xff1a; gorm:"primaryKey" gorm:"index" gorm:"not null"这些东西&#xff1a; 像“魔法字符串”。 其实&#xff1a; 它本质上是在告诉 GORM&#xff1a; 数据库这一列应该怎么创建也就是&#xff1a;…...

编程新知 2026/5/24 21:49:03

如何快速掌握游戏MOD制作：LSLib开源工具箱的终极指南

如何快速掌握游戏MOD制作&#xff1a;LSLib开源工具箱的终极指南 【免费下载链接】lslib Tools for manipulating Divinity Original Sin and Baldurs Gate 3 files 项目地址: https://gitcode.com/gh_mirrors/ls/lslib 你是否曾经梦想过修改《神界原罪》或《博德之门3》…...

编程新知 2026/5/24 20:21:28

为 OpenClaw 智能体工作流配置 Taotoken 作为统一模型后端

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为 OpenClaw 智能体工作流配置 Taotoken 作为统一模型后端 在构建基于 OpenClaw 框架的智能体工作流时&#xff0c;一个常见的工程…...

编程新知 2026/5/24 20:15:08

矩阵补全与因果推断：评估贸易协定效应的前沿方法与实践

1. 项目概述&#xff1a;当贸易协定遇上因果推断&#xff0c;我们如何看清真实影响&#xff1f;做贸易政策评估这行久了&#xff0c;最头疼的就是“识别”问题。一个贸易协定签了&#xff0c;双边贸易额涨了&#xff0c;你很难说清这增长里有多少是协定本身的功劳&#xff0c;有…...

编程新知 2026/5/24 20:12:53

20年AI平台建设者私藏清单：5款“伪开源”商业工具 vs 3款真正企业级开源AI引擎——性能、支持、审计三重穿透测评

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;20年AI平台建设者私藏清单&#xff1a;5款“伪开源”商业工具 vs 3款真正企业级开源AI引擎——性能、支持、审计三重穿透测评 在构建高可用AI基础设施的二十年实践中&#xff0c;我们反复验证一个残酷事实&am…...

编程新知 2026/5/24 19:35:11