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

css实现九宫格布局

news 2026/3/27 22:45:03

要使用CSS实现九宫格布局，可以创建一个包含九个元素的容器，并使用display: grid属性将其设置为网格布局。然后，使用grid-template-columns和grid-template-rows属性来定义网格的行和列布局。接下来，使用grid-gap属性来设置网格的行间距和列间距。

以下是一个简单的九宫格布局的示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>九宫格布局</title><style>.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);grid-gap: 10px;}.grid-item {background-color: #f1f1f1;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div></div>
</body>
</html>

相关文章：

css实现九宫格布局

要使用CSS实现九宫格布局&#xff0c;可以创建一个包含九个元素的容器&#xff0c;并使用display: grid属性将其设置为网格布局。然后&#xff0c;使用grid-template-columns和grid-template-rows属性来定义网格的行和列布局。接下来&#xff0c;使用grid-gap属性来设置网格的行…...

编程日记 2023/8/23 13:52:40

linux下系统问题排查基本套路

文章目录 总结常用命令原文GC相关网络TIME_WAITCLOSE_WAIT 总结常用命令 top 查找cpu占用高的进程ps 找到对应进程的pidtop -H -p pid 查找cpu利用率较高的线程printf ‘%x\n’ pid 将线程pid转换为16进制得到 nidjstack pid |grep ‘nid’ -C5 –color 在jstack中找到对应堆栈…...

编程日记 2023/8/23 13:51:39

想解锁禁用的iPhone？除了可以使用电脑之外，这里还有不需要电脑的方法！

多次输入错误的密码后，iPhone将显示“iPhone已禁用”。这种情况看起来很棘手，因为你现在不能用iPhone做任何事情。对于这种情况，我们提供了几种有效的方法来帮助你在最棘手的问题中解锁禁用的iPhone。你可以选择使用或不使用电脑来解锁禁用的iPhone。 一、为什么你的iPhone…...

编程日记 2023/8/23 13:50:37

基于Springboot+Thymeleaf学生在线考试管理系统——LW模板

摘 要 随着当前大数据时代的飞速发展&#xff0c;信息技术以及数据科学不断的普及&#xff0c;教育界也随之更新换代。无粉尘黑板以及电子化考试都已经是在各种学校中普及使用&#xff0c;而且因为操作简单以及对环境没有任何影响&#xff0c;这也将是未来发展的重大趋势。而由…...

编程日记 2023/8/23 13:49:36

STM32f103c6t6/STM32f103c8t6寄存器开发

目录 资料 寻址区 2区 TIMx RTC WWDG IWDG SPI I2S USART I2C USB全速设备寄存器 bxCAN BKP PWR DAC ADC ​编辑 EXTI ​编辑 GPIO AFIO SDIO DMA CRC RCC FSMC USB_OTG ETH&#xff08;以太网&#xff09; 7区 配置流程 外部中断 硬件中断 例子 点灯 …...

编程日记 2023/8/23 13:48:34

MySQL Connection not available.

Mysql 报错 最近部署在服务器上的mysql总是报这种错。 但是在服务器上&#xff0c;使用命令行是可以登录进mysq的。 cursor db.cursor() File “/home/ubuntu/miniconda3/envs/chatbot_env/lib/python3.9/site-packages/mysql/connector/connection_cext.py”, line 700, in …...

编程日记 2023/8/23 13:47:33

PHP反序列化 字符串逃逸

前言 最近在打西电的新生赛&#xff0c;有道反序列化的题卡了很久&#xff0c;今天在NSS上刷题的时候突然想到做法&#xff0c;就是利用字符串逃逸去改变题目锁死的值&#xff0c;从而实现绕过 为了研究反序列化的字符串逃逸 我们先简单的测试下 原理 <?php class escape…...

编程日记 2023/8/23 13:46:32

DockerFile解析

1. 是什么 Dockerfile是田来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本 1.1 概述 1.2 官网 Dockerfile reference | Docker Documentation 1.3 构建三步骤 1. 编写dockerfile文件 2. docker build命令构建镜像 3. docker run依镜像运…...

编程日记 2023/8/23 13:45:31

斯坦福大学医学院教授：几年内ChatGPT之类的AI将纳入日常医学实践

注意&#xff1a;本信息仅供参考&#xff0c;分享此内容旨在传递更多信息之目的&#xff0c;并不意味着赞同其观点或证实其说法。 在一项新研究中&#xff0c;斯坦福大学研究人员发现&#xff0c;ChatGPT在复杂临床护理考试题中可以胜过一、二年级的医学生。此项研究显示&#…...

编程日记 2023/8/23 13:44:30

golang 命令行 command line (flag,os,arg,args)

目录 1. golang 命令行 command line1.1. Introduction1.2. Parsing Arguments from the command line (os package)1.2.1. Get the number of args1.2.2. Iterate over all arguments 1.3. Using flags package1.3.1. Parse Typed Flags1.3.2. Set flags from the script1.3.3…...

编程日记 2023/8/23 13:43:29

Shell语法揭秘：深入探讨常见Linux Shell之间的语法转换

深入探讨常见Linux Shell之间的语法转换 一、引言二、Linux常用Shell&#xff1a;Bash、Zsh、Ksh、Csh、Tcsh和Fish的简介2.1、Bash、Zsh、Ksh、Csh、Tcsh和Fish的特点和用途2.2、语法差异是常见Shell之间的主要区别 三、变量和环境设置的语法差异3.1、变量定义和使用的不同语法…...

编程日记 2023/8/23 13:42:26

Python3 基础语法

Python3 基础语法 编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是 unicode 字符串。 当然你也可以为源码文件指定不同的编码&#xff1a; # -*- coding: cp-1252 -*- 上述定义允许在源文件中使用 Windows-1252 字符集中的字符编码&…...

编程日记 2023/8/23 13:41:25

spring boot分装通用的查询+分页接口

背景 在用spring bootmybatis plus实现增删改查的时候&#xff0c;总是免不了各种模糊查询和分页的查询。每个数据表设计一个模糊分页&#xff0c;这样代码就造成了冗余&#xff0c;且对自身的技能提升没有帮助。那么有没有办法实现一个通用的增删改查的方法呢&#xff1f;今天…...

编程日记 2023/8/23 13:40:24

【OpenCV】OpenCV环境搭建，Mac系统，C++开发环境

OpenCV环境搭建&#xff0c;Mac系统&#xff0c;C开发环境 一、步骤VSCode C环境安装运行CMake安装运行OpenCV 安装CMakeList 一、步骤 VSCode C环境安装CMake 安装OpenCV 安装CmakeList.txt VSCode C环境安装运行 访问官网 CMake安装运行 CMake官网 参考文档 OpenCV 安…...

编程日记 2023/8/23 13:39:22

node安装node-sass依赖失败(版本不一致)

1.官网对应node版本 https://www.npmjs.com/package/node-sass2.node-sass版本对应表...

编程日记 2023/8/23 13:38:20

联想小新Pro 16笔记本键盘失灵处理方法

问题描述&#xff1a; 联想小新Pro 16新笔记本开机准备激活&#xff0c;到连接网络的时候就开始触控板、键盘失灵&#xff0c;但是有意思的是键盘的背光灯是可以调节关闭的&#xff1b;外接鼠标是正常可以移动的&#xff0c;但是只要拔掉外接鼠标再插回去的时候就不能用了&…...

编程日记 2023/8/23 13:37:19

python 连接Redis 数据库

pip install redis python代码 import redis# 连接数据库 r redis.Redis(host192.168.56.15, port6379, db0)# 存储数据 #r.set(key, value) r.set(name, zaraNet)# 获取数据 value r.get(name) print(value)# 关闭连接&#xff08;可选&#xff09; r.close()...

编程日记 2023/8/23 13:36:18

使用 wxPython 和 pymupdf进行 PDF 加密

PDF 文件是一种常见的文档格式&#xff0c;但有时候我们希望对敏感信息进行保护&#xff0c;以防止未经授权的访问。在本文中&#xff0c;我们将使用 Python 和 wxPython 库创建一个简单的图形用户界面&#xff08;GUI&#xff09;应用程序&#xff0c;用于对 PDF 文件进行加密…...

编程日记 2023/8/23 13:35:17

Mysql性能优化：什么是索引下推？

导读 索引下推&#xff08;index condition pushdown &#xff09;简称ICP&#xff0c;在Mysql5.6的版本上推出&#xff0c;用于优化查询。 在不使用ICP的情况下&#xff0c;在使用非主键索引&#xff08;又叫普通索引或者二级索引&#xff09;进行查询时&#xff0c;存储引擎…...

编程日记 2023/8/23 13:34:16

Pytorch建立MyDataLoader过程详解

简介 torch.utils.data.DataLoader(dataset, batch_size1, shuffleNone, samplerNone, batch_samplerNone, num_workers0, collate_fnNone, pin_memoryFalse, drop_lastFalse, timeout0, worker_init_fnNone, multiprocessing_contextNone, generatorNone, *, prefetch_factorN…...

编程日记 2023/8/23 13:33:15

Dark Reader实用指南：解决夜间浏览痛点的高效方案

Dark Reader实用指南&#xff1a;解决夜间浏览痛点的高效方案 【免费下载链接】darkreader Dark Reader Chrome and Firefox extension 项目地址: https://gitcode.com/gh_mirrors/da/darkreader 在数字时代&#xff0c;我们每天面对屏幕的时间越来越长&#xff0c;尤其…...

编程新知 2026/3/27 22:44:24

如何5分钟构建专业级黑苹果EFI？OpCore Simplify让复杂配置一键搞定

如何5分钟构建专业级黑苹果EFI&#xff1f;OpCore Simplify让复杂配置一键搞定 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 副标题&#xff1a;告别…...

编程新知 2026/3/27 22:10:04

用快马AI快速原型设计：9·1免费素材库管理界面十分钟搭建指南

最近在帮朋友设计一个免费素材库的管理界面&#xff0c;需求是要快速搭建一个能展示"91免费素材"的网页应用。作为一个经常需要验证设计想法的开发者&#xff0c;我发现用InsCode(快马)平台可以大大缩短原型开发时间。下面分享下我是如何在十分钟内完成这个素材库管理…...

编程新知 2026/3/27 21:15:47

Logisim音乐盒背后的数字电路：计数器、ROM与蜂鸣器如何奏出《终生误》

Logisim音乐盒背后的数字电路&#xff1a;计数器、ROM与蜂鸣器如何奏出《终生误》 当一段熟悉的旋律从蜂鸣器中流淌而出&#xff0c;很少有人会思考这背后隐藏的数字魔法。本文将带您拆解一个基于Logisim的音乐盒设计&#xff0c;揭示计数器如何像指挥家一样协调时序、ROM怎样扮…...

编程新知 2026/3/27 21:11:46

Java AI开发避坑！

文章目录一、当"龙虾"突然发狂二、解剖这场"史诗级翻车"第一刀&#xff1a;插件生态大迁徙第二刀&#xff1a;API 接口一锅端第三刀&#xff1a;安全沙箱锁死第四刀&#xff1a;目录结构洗牌三、Java 开发者的至暗时刻WebSocket 连接闪断MCP 适配器失效技能…...

编程新知 2026/3/27 20:53:39

Pandoc：5步掌握全能文档转换的极简工作流

Pandoc&#xff1a;5步掌握全能文档转换的极简工作流 【免费下载链接】pandoc Universal markup converter 项目地址: https://gitcode.com/gh_mirrors/pa/pandoc 价值定位&#xff1a;为什么每个开发者都需要一款"格式翻译官" 当你需要将Markdown笔记转换为…...

编程新知 2026/3/27 20:11:07

终极指南：用VizTracer可视化Python代码执行的完整教程

终极指南&#xff1a;用VizTracer可视化Python代码执行的完整教程 【免费下载链接】viztracer VizTracer is a low-overhead logging/debugging/profiling tool that can trace and visualize your python code execution. 项目地址: https://gitcode.com/gh_mirrors/vi/vizt…...

编程新知 2026/3/27 19:47:03

STM32危化品智能管理系统设计与实现

## 1. 项目概述### 1.1 系统背景 实验室危化品管理面临传统人工记录方式效率低下、易出错等问题&#xff0c;特别是在温湿度敏感、易燃易爆或有毒危化品的存储过程中存在重大安全隐患。基于STM32F103C8T6微控制器的智能管理系统通过集成多参数传感、无线通信和云平台技术&#…...

编程新知 2026/3/27 18:30:32

Qwen3-14B-Int4-AWQ助力运维智能化：日志分析与故障排查实战

Qwen3-14B-Int4-AWQ助力运维智能化&#xff1a;日志分析与故障排查实战 1. 运维工程师的日常痛点 凌晨三点&#xff0c;你的手机突然响起。系统告警显示某核心服务出现异常&#xff0c;你需要立即登录服务器查看日志。面对几十GB的日志文件&#xff0c;你不得不用grep、awk等…...

编程新知 2026/3/27 18:22:15

AlertDialog高斯模糊进阶指南：Android12新特性与兼容方案对比

AlertDialog高斯模糊进阶指南&#xff1a;Android12新特性与兼容方案对比 在移动应用设计中&#xff0c;视觉层次的营造往往决定了用户体验的优劣。当用户与AlertDialog交互时&#xff0c;背景的高斯模糊效果能够有效聚焦注意力&#xff0c;同时保持界面连贯性。Android 12引入…...

编程新知 2026/3/27 15:18:55