前端学习之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;/* 设置当前网格有多少列，每列有多少空间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;/* 设置当前…...
[网鼎杯2018]Unfinish 两种方法 -----不会编程的崽
网鼎杯太喜欢搞二次注入了吧。上次是无列名盲注，这次又是二次注入盲注。。。不知道方法还是挺难的。哎，网鼎嘛，能理解透彻就很强了。能自己做出来那可太nb了。 又是熟悉的登录框。不知道这是第几次看见网鼎杯的登录框了。后台扫描一下&#x…...
安防监控视频汇聚平台EasyCVR在银河麒麟V10系统中的启动异常及解决方法
安防监控视频平台EasyCVR具备较强的兼容性，它可以支持国标GB28181、RTSP/Onvif、RTMP，以及厂家的私有协议与SDK，如：海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等。平台兼容性强，支持Windows系…...
了解云原生
声明：内容来自AI，未经验证，仅供参考! 1、云原生学习路线 学习云原生(Cloud Native)技术涉及了解和掌握一系列的概念、技术和工具。云原生是一种构建和运行应用程序的方法，旨在充分利用云计算的灵活性、可伸缩性和弹性。以下是一…...
【go从入门到精通】for和for range的区别
作者简介： 高科，先后在 IBM PlatformComputing从事网格计算，淘米网，网易从事游戏服务器开发，拥有丰富的C，go等语言开发经验，mysql，mongo，redis等数据库，设计模…...
【C语言】【Leetcode】88. 合并两个有序数组
文章目录 一、题目二、思路再思考 一、题目 链接: link 二、思路 这题属于简单题，比较粗暴的做法就是直接比较两个数组，先把第二个数组加到第一个的后面，如何冒泡排序，这种方法简单粗暴但有效，可是不适用于这题&…...
DMA控制器
前言 大家好，我是jiantaoyab，这是我作为学习笔记的25篇，本篇文章给大家介绍DMA。 无论 I/O 速度如何提升，比起 CPU，总还是太慢。如果我们对于 I/O 的操作，都是由 CPU 发出对应的指令，然后等待…...
SQLiteC/C++接口详细介绍sqlite3_stmt类（十）
返回：SQLite—系列文章目录 上一篇：SQLiteC/C接口详细介绍sqlite3_stmt类（九） 下一篇： SQLiteC/C接口详细介绍sqlite3_stmt类（十一） 38、sqlite3_column_value sqlite3_column_valu…...
Android 生成Excel文件保存到本地
本文用来记录在安卓中生成Excel文件并保存到本地操作，在网上找了好久，终于找到一个可以用的，虽然代码已经很老的，但亲测可用！ 项目地址：https://github.com/wanganan/AndroidExcel 可以下载下来修改直接用…...
Hive-技术补充-ANTLR语法编写
一、导读 我们学习一门语言，或外语或编程语言，是不是都是要先学语法，想想这些语言有哪些相同点 1、中文、英语、日语......是不是都有 主谓宾 的规则 2、c、java、python、js......是不是都有 数据类型 、循环 等语法或数据结构 虽然人们在…...
6.使用个人用户登录域控的成员服务器，如何防止个人用户账号的用户策略生效？
（1）需求： （2）实战配置步骤 第一步:创建新的策略-并编辑策略 第二步：将策略应用到服务器处在OU 第三步：测试 （1）需求： 比如域控，或者加入域的…...
模拟算法
例题一 算法思路： 纯模拟。从前往后遍历整个字符串，找到问号之后，就⽤ a ~ z 的每⼀个字符去尝试替换即 可。 例题二 解法（模拟 分情况讨论）： 算法思路： 模拟 分情况讨论。 计算相邻两个…...
【数据结构刷题专题】—— 二叉树
二叉树 二叉树刷题框架 二叉树的定义： 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&…...
基于AWS云服务构建智能家居系统的最佳实践
在当今智能家居时代,构建一个安全、高性能、可扩展和灵活的智能家居系统已经成为许多公司的目标。亚马逊网络服务(AWS)提供了一系列云服务,可以帮助企业轻松构建和管理智能家居系统。本文将探讨如何利用AWS云服务构建一个智能家居系统,并分享相关的最佳实践。 系统架构概述 该…...
Java零基础-集合：Set接口
哈喽，各位小伙伴们，你们好呀，我是喵手。 今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。 我是一名后…...
数据结构与算法-排序算法
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…...
SpringBoot 文件上传（三）
之前讲解了如何接收文件以及如何保存到服务端的本地磁盘中： SpringBoot 文件上传（一)-CSDN博客 SpringBoot 文件上传（二）-CSDN博客 这节讲解如何利用阿里云提供的OSS（Object Storage Service)对象存储服务保存文件。…...
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语法的基本使用…...
UI自动化_id 元素定位
## 导包selenium from selenium import webdriver import time1、创建浏览器驱动对象 driver webdriver.Chrome() 2、打开测试网站 driver.get("你公司的平台地址") 3、使浏览器窗口最大化 driver.maximize_window() 4、在用户名输入框中输入admin driver.find_ele…...
华为OD技术面算法题整理
LeetCode原题 简单 题目编号频次409. 最长回文串 - 力扣（LeetCode）3...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
MySQL账号权限管理指南：安全创建账户与精细授权技巧
在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号？ 最小权限原则…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】，分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...