[CSS] 图片九宫格
效果
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title> Document </title><link type="text/css" rel="styleSheet" href="index.css" /></head><body><div class="img-container"><!--Emmet缩写: div.img-item*9 --><div class="img-item"></div><div class="img-item"></div><div class="img-item"></div><div class="img-item"></div><div class="img-item"></div><div class="img-item"></div><div class="img-item"></div><div class="img-item"></div><div class="img-item"></div></div></body>
</html>
index.css
body{width: 500px;height: 500px;margin: 0 auto;margin-top: 120px;/*设置item元素布局为网关布局*/display: flex;justify-content: center;align-items: start;background-color: #171717;padding-top: 100px;
}.img-container{width: 300px;height: 300px;/*网格布局*/ display: grid;/*网格布局列数与宽度*/ grid-template-columns: repeat(3,1fr);/*网格布局行数与高度*/ grid-template-rows: repeat(3,1fr);
}.img-item {/*添加阴影效果*/ box-shadow: inset 0 0 0 1px #fff;/*元素属性变化时平滑过度，优化视觉体验*/ transition: 0.5s;background-size: 300px 300px;/*设置背景图像*/ background-image: url(./1.png);/*相对定位*/ position: relative;
}/* 3n+1 选中第一列的元素 1 4 7*/
.img-item:nth-child(3n+1){background-position-x: 0;left: -20px;
}/* 3n+2 选中第二列的元素 2 5 8*/
.img-item:nth-child(3n + 2){background-position-x: -100%;left: 0;
}/* 3n+0 选中第三列的元素 3 6 9*/
.img-item:nth-child(3n){background-position-x: -200%;left: 20px;
}/* n+7 选中第三行的元素 7 8 9*/
.img-item:nth-child(n + 7){background-position-y: -200%;top: 20px;
}/* -n + 6 选中第一、二行的元素 6 5 4 3 2 1*/
.img-item:nth-child(-n + 6){background-position-y: -100%;top: 0px;
}
/* -n + 6 选中第一行的元素 3 2 1*/
.img-item:nth-child(-n+3){background-position-y: 0;top: -20px;
}/* 鼠标移入时修改 img-item 属性值 */
.img-container:hover .img-item {left: 0;top: 0;/*隐藏的阴影效果*/box-shadow: inset 0 0 0 0px #fff;
}
1.png
相关文章：
[CSS] 图片九宫格
效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"/><meta http-equiv"X-UA-Compatible" content"IEedge"/><meta name"viewport" content"widthdevice-…...
MChat-Gpt V1.0.0 (将ChatGpt机器人接入内网供全体使用)
Github>https://github.com/MartinxMax/MChat-Gpt 首页 MChat-Gpt V1.0.0将ChatGpt机器人接入内网供全体使用 你需要一个ChatGpt账户如果您在中国则需要使用代理访问,设置TUN代理模式 安装依赖 选择你的系统进行安装 服务端配置 #python3 ChatGpt_Server.py -h 使用&a…...
日常开发中Git命令指北
Git基本操作 创建化仓库 mkdir 目录 cd 目录 git init配置本地仓库 # 配置用户名，邮箱 git config user.name "cxf" git config user.email "1969612859qq.com" # 查看本地配置（小写的 L） git config -l # 重置配置&a…...
API 测试 | 了解 API 接口概念|电商平台 API 接口测试指南
什么是 API？ API 是一个缩写，它代表了一个 pplication P AGC 软件覆盖整个房间。API 是用于构建软件应用程序的一组例程，协议和工具。API 指定一个软件程序应如何与其他软件程序进行交互。 例行程序：执行特定任务的程序。例程也称…...
【计算机组成原理】24王道考研笔记——第三章 存储系统
第三章 存储系统 一、存储系统概述 现代计算机的结构： 1.存储器的层次结构 2.存储器的分类 按层次： 按介质： 按存储方式： 按信息的可更改性： 按信息的可保存性： 3.存储器的性能指标 二、主存储器 1.基本…...
学习C语言的好处：
基础编程语言：C语言是其他编程语言的基础，学习C语言可为后续学习打下坚实基础，广泛应用于嵌入式系统、操作系统、网络协议等。 简单易学：C语言语法简单易懂，适合初学者。只需文本编辑器和编译器，即可开始编…...
基于k8s的devOps自动化运维平台架构设计（中英文版本）
▲ 点击上方"DevOps和k8s全栈技术"关注公众号 In the rapidly evolving landscape of software development and IT operations, DevOps has emerged as a transformative approach to bridge the gap between development and operations teams. One of the key ena…...
P450进阶款无人机室内定位功能研测
在以往的Prometheus 450（P450）无人机上，我们搭载的是Intel Realsense T265定位模块，使用USB连接方式挂载到机载计算机allspark上，通过机载上SDK驱动T265运行并输出SLAM信息，以此来实现室内定位功能。 为进…...
深度学习，计算机视觉任务
目录 计算机视觉任务 1.K近邻算法 2.得分函数 3.损失函数的作用 4.向前传播整体流程 5.反向传播计算方法 计算机视觉任务 机器学习的流程： 数据获取 特征工程 建立模型 评估与应用 计算机视觉： 图像表示：计算机眼中的图像&#…...
使用 Docker 部署 canal 服务实现MySQL和ES实时同步
文章目录 0. 环境介绍0. 前置步骤1. 安装Kibana和Elasticsearch2. 安装Canal和Canal Adapter2.1 修改数据库配置2.1.1 修改配置2.1.2 验证mysql binlog配置2.1.3 查看日志文件2.1.4 用JDBC代码插入数据库 2.2 安装Canal Server2.3 安装Canal Adapter修改两处配置文件配置文件取…...
const易错详解
const对比 常量指针 int b; (1)const int *a &b;//常量指针(2)int const *a &b; //常量指针常量指针：指向的变量值不能被修改 
网络安全—黑客技术【自学】
一、黑客是什么 原是指热心于计算机技术，水平高超的电脑专家，尤其是程序设计人员。但后来，黑客一词已被用于泛指那些专门利用电脑网络搞破坏或者恶作剧的家伙。 二、学习黑客技术的原因 其实，网络信息空间安全已经成为海陆空之…...
作为数据产品经理的一天
数据产品经理作为这两年大数据行业的热门职业，经常有小伙伴会问我数据产品经理是做什么的，给大家简单讲下作为数据产品经理的一天是怎么度过得，算是一篇记录文吧，看完或许大家对这个职业的了解会更深入一些。 01 早上10点&#…...
Rust 编程小技巧摘选(7)
Rust 编程小技巧(7) 1. 结构体 Display trait 结构体的两种形式，对应的成员取法不同； 前者用 self.成员变量名 self.x, self.y；后者用 self.成员索引号 self.0, self.1, self.2, ...... use std::fmt::Display; use std::fmt::Result; us…...
爬虫程序中使用爬虫ip的优势
作为一名爬虫技术员，我发现在爬虫程序中使用代理IP可以提升爬取效率和匿名性。今天，我就来详细讲解一下代理IP在爬虫程序中的工作原理及应用。 首先，我们来了解一下代理IP在爬虫程序中的工作原理。当我们使用爬虫程序进行数据采集时…...
json-server的入门
由于前端开发的时候，需要向后端请求数据，有的时候后端还没有准备好，所以需要使用一些简单的静态数据，但是我们更加希望能够模拟请求以及请求回来的过程，这个时候就需要使用json-server Json-Server的介绍 json-server…...
uniapp调查问卷评价功能
我本来用的是uniapp官方提供的组件uni-rate组件，但修改成我想要的样式有点麻烦，于是我就自己手写一个，比用组件简单一点； dom结构 <text class"formTit must">请您对本次活动进行评价</text> <view cl…...
Centos Linux带进度条复制（同步）文件和文件夹
centos linux 内建文件复制/备份命令 rsync 目的：我想从一个磁盘复制一堆文件到另一个磁盘，不希望改变文件的属性（尤其是所有者、还有创建时间、修改时间），最好还得能给我显示进度条。文件太多了，好几百GB…...
从数据仓库到数据结构：数据架构的演变之路
在上个世纪，从电子商务巨头到医疗服务机构和政府部门，数据已成为每家组织的生命线。有效地收集和管理这些数据可以为组织提供宝贵的洞察力，以帮助决策，然而这是一项艰巨的任务。 尽管数据很重要，但CIOinsight声称&…...
kafka-2.12使用记录
kafka-2.12使用记录 安装kafka 2.12版本 下载安装包 根据你的系统下载rpm /deb /zip包等等, 这里我使用的是rpm包 安装命令 rpm -ivh kafka-2.12-1.nfs.x86_64.rpm启动内置Zookeeper 以下命令要写在同一行上 /opt/kafka-2.12/bin/zookeeper-server-start.sh /opt/kafka-2…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？
在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...