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

[CSS] 图片九宫格

news 2026/4/9 2:41:47

效果

在这里插入图片描述

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-…...

编程日记 2023/8/11 11:38:55

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…...

编程日记 2023/8/11 11:37:54

日常开发中Git命令指北

Git基本操作 创建化仓库 mkdir 目录 cd 目录 git init配置本地仓库 # 配置用户名&#xff0c;邮箱 git config user.name "cxf" git config user.email "1969612859qq.com" # 查看本地配置&#xff08;小写的 L&#xff09; git config -l # 重置配置&a…...

编程日记 2023/8/11 11:36:52

API 测试 | 了解 API 接口概念|电商平台 API 接口测试指南

什么是 API&#xff1f; API 是一个缩写&#xff0c;它代表了一个 pplication P AGC 软件覆盖整个房间。API 是用于构建软件应用程序的一组例程&#xff0c;协议和工具。API 指定一个软件程序应如何与其他软件程序进行交互。 例行程序&#xff1a;执行特定任务的程序。例程也称…...

编程日记 2023/8/11 11:35:51

【计算机组成原理】24王道考研笔记——第三章 存储系统

第三章 存储系统 一、存储系统概述 现代计算机的结构&#xff1a; 1.存储器的层次结构 2.存储器的分类 按层次&#xff1a; 按介质&#xff1a; 按存储方式&#xff1a; 按信息的可更改性&#xff1a; 按信息的可保存性&#xff1a; 3.存储器的性能指标 二、主存储器 1.基本…...

编程日记 2023/8/11 11:34:50

学习C语言的好处：

基础编程语言&#xff1a;C语言是其他编程语言的基础&#xff0c;学习C语言可为后续学习打下坚实基础&#xff0c;广泛应用于嵌入式系统、操作系统、网络协议等。 简单易学&#xff1a;C语言语法简单易懂&#xff0c;适合初学者。只需文本编辑器和编译器&#xff0c;即可开始编…...

编程日记 2023/8/11 11:33:49

基于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…...

编程日记 2023/8/11 11:32:48

P450进阶款无人机室内定位功能研测

在以往的Prometheus 450&#xff08;P450&#xff09;无人机上&#xff0c;我们搭载的是Intel Realsense T265定位模块&#xff0c;使用USB连接方式挂载到机载计算机allspark上&#xff0c;通过机载上SDK驱动T265运行并输出SLAM信息&#xff0c;以此来实现室内定位功能。 为进…...

编程日记 2023/8/11 11:31:47

深度学习，计算机视觉任务

目录 计算机视觉任务 1.K近邻算法 2.得分函数 3.损失函数的作用 4.向前传播整体流程 5.反向传播计算方法 计算机视觉任务 机器学习的流程&#xff1a; 数据获取 特征工程 建立模型 评估与应用 计算机视觉&#xff1a; 图像表示&#xff1a;计算机眼中的图像&#…...

编程日记 2023/8/11 11:30:45

使用 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修改两处配置文件配置文件取…...

编程日记 2023/8/11 11:29:44

const易错详解

const对比 常量指针 int b; (1)const int *a &b;//常量指针(2)int const *a &b; //常量指针常量指针&#xff1a;指向的变量值不能被修改 ![常量指针](https://img-blog.csdnimg.cn/9d795b11eb6d484297ea7cbead28463f.png 指针常量 int b; int* const a&b;…...

编程日记 2023/8/11 11:28:43

网络安全—黑客技术【自学】

一、黑客是什么 原是指热心于计算机技术&#xff0c;水平高超的电脑专家&#xff0c;尤其是程序设计人员。但后来&#xff0c;黑客一词已被用于泛指那些专门利用电脑网络搞破坏或者恶作剧的家伙。 二、学习黑客技术的原因 其实&#xff0c;网络信息空间安全已经成为海陆空之…...

编程日记 2023/8/11 11:26:41

作为数据产品经理的一天

数据产品经理作为这两年大数据行业的热门职业&#xff0c;经常有小伙伴会问我数据产品经理是做什么的&#xff0c;给大家简单讲下作为数据产品经理的一天是怎么度过得&#xff0c;算是一篇记录文吧&#xff0c;看完或许大家对这个职业的了解会更深入一些。 01 早上10点&#…...

编程日记 2023/8/11 11:25:39

Rust 编程小技巧摘选(7)

Rust 编程小技巧(7) 1. 结构体 Display trait 结构体的两种形式&#xff0c;对应的成员取法不同&#xff1b; 前者用 self.成员变量名 self.x, self.y&#xff1b;后者用 self.成员索引号 self.0, self.1, self.2, ...... use std::fmt::Display; use std::fmt::Result; us…...

编程日记 2023/8/11 11:24:38

爬虫程序中使用爬虫ip的优势

作为一名爬虫技术员&#xff0c;我发现在爬虫程序中使用代理IP可以提升爬取效率和匿名性。今天&#xff0c;我就来详细讲解一下代理IP在爬虫程序中的工作原理及应用。 首先&#xff0c;我们来了解一下代理IP在爬虫程序中的工作原理。当我们使用爬虫程序进行数据采集时&#xf…...

编程日记 2023/8/11 11:23:37

json-server的入门

由于前端开发的时候&#xff0c;需要向后端请求数据&#xff0c;有的时候后端还没有准备好&#xff0c;所以需要使用一些简单的静态数据&#xff0c;但是我们更加希望能够模拟请求以及请求回来的过程&#xff0c;这个时候就需要使用json-server Json-Server的介绍 json-server…...

编程日记 2023/8/11 11:22:36

uniapp调查问卷评价功能

我本来用的是uniapp官方提供的组件uni-rate组件&#xff0c;但修改成我想要的样式有点麻烦&#xff0c;于是我就自己手写一个&#xff0c;比用组件简单一点&#xff1b; dom结构 <text class"formTit must">请您对本次活动进行评价</text> <view cl…...

编程日记 2023/8/11 11:21:35

Centos Linux带进度条复制（同步）文件和文件夹

centos linux 内建文件复制/备份命令 rsync 目的&#xff1a;我想从一个磁盘复制一堆文件到另一个磁盘&#xff0c;不希望改变文件的属性&#xff08;尤其是所有者、还有创建时间、修改时间&#xff09;&#xff0c;最好还得能给我显示进度条。文件太多了&#xff0c;好几百GB…...

编程日记 2023/8/11 11:20:33

从数据仓库到数据结构：数据架构的演变之路

在上个世纪&#xff0c;从电子商务巨头到医疗服务机构和政府部门&#xff0c;数据已成为每家组织的生命线。有效地收集和管理这些数据可以为组织提供宝贵的洞察力&#xff0c;以帮助决策&#xff0c;然而这是一项艰巨的任务。 尽管数据很重要&#xff0c;但CIOinsight声称&…...

编程日记 2023/8/11 11:19:32

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…...

编程日记 2023/8/11 11:18:31

避坑指南：当你的bed文件在hg38分析中报错时，可能缺了这步liftover预处理

基因组坐标转换实战&#xff1a;当hg38遇到旧版bed文件的高阶解决方案 临床数据分析师小张最近遇到了一个棘手问题——团队传承下来的hg19版bed文件在新项目中使用hg38参考基因组时频繁报错。GATK流程抛出"Invalid interval"警告&#xff0c;IGV可视化时靶向区域完全…...

编程新知 2026/4/9 1:35:33

WPF 进阶之路：从 MVVM 到企业级应用的架构与实战

1. MVVM 模式在企业级应用中的深度实践 很多刚接触WPF的开发者都会觉得MVVM模式很抽象&#xff0c;我第一次用的时候也是一头雾水。直到接手了一个电商后台管理系统项目&#xff0c;才真正体会到MVVM的价值。这个项目有30多个页面&#xff0c;如果按照传统事件驱动的方式开发&a…...

编程新知 2026/4/9 0:56:56

Level2行情接口全解析：从实时数据订阅到历史回测的量化实战指南

1. Level2行情接口入门&#xff1a;为什么量化交易离不开它 第一次接触Level2行情时&#xff0c;我也被那些专业术语搞得一头雾水。直到有次亲眼看到两个量化团队用相同策略回测&#xff0c;用Level1数据的团队年化收益12%&#xff0c;而用Level2数据的团队达到21%&#xff0c;…...

编程新知 2026/4/9 0:06:22

无障碍测试工具axe与WAVE使用心得：测试工程师的专业实践指南

在数字化产品日益渗透社会各领域的今天&#xff0c;软件的可访问性已从一个边缘议题演变为核心质量属性。作为一名软件测试从业者&#xff0c;我们的职责不仅是确保功能正确&#xff0c;更是要捍卫产品的包容性&#xff0c;让包括残障人士在内的所有用户都能平等地享受数字服务…...

编程新知 2026/4/8 23:05:15

微信小程序与H5深度交互：实现扫码功能的无缝传递与数据回传

1. 微信小程序与H5交互的核心技术解析 微信小程序与H5页面的交互一直是移动开发中的热门话题。在实际项目中&#xff0c;我们经常需要在小程序内嵌H5页面&#xff0c;同时又要调用小程序原生功能。这种混合开发模式既能利用H5的跨平台特性&#xff0c;又能享受小程序的原生能力…...

编程新知 2026/4/8 22:40:29

别再死磕复杂模型了！用Python+NumPy手把手教你从卫星J2000坐标算出经纬度

从卫星J2000坐标到经纬度&#xff1a;Python实战指南 当拿到卫星的J2000坐标数据时&#xff0c;如何快速将其转换为可在地图上显示的经纬度&#xff1f;本文将用Python和NumPy带你一步步实现这个转换过程&#xff0c;避开复杂的理论推导&#xff0c;专注于代码实现和实际问题解…...

编程新知 2026/4/8 21:47:33

Figma中文界面革新：突破语言壁垒的全攻略

Figma中文界面革新&#xff1a;突破语言壁垒的全攻略 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN Figma作为主流设计工具&#xff0c;其英文界面长期困扰中文用户。FigmaCN插件通过设…...

编程新知 2026/4/8 21:35:24

YOLO+SAM工业缺陷检测：从理论到落地的完整方案

YOLOSAM工业缺陷检测&#xff1a;从理论到落地的完整方案一、痛点 PCB质检中&#xff0c;人工标注缺陷边界8分钟/张。YOLO框不准&#xff0c;SAM对工业缺陷水土不服。 二、解决方案 LoRA微调SAM&#xff1a;只改2%参数&#xff0c;速度3倍提升&#xff0c;显存24GB→8GB。 Dice…...

编程新知 2026/4/8 21:33:23

革新性动物森友会存档编辑工具：NHSE全流程定制指南

革新性动物森友会存档编辑工具&#xff1a;NHSE全流程定制指南 【免费下载链接】NHSE Animal Crossing: New Horizons save editor 项目地址: https://gitcode.com/gh_mirrors/nh/NHSE NHSE&#xff08;Animal Crossing: New Horizons save editor&#xff09;是一款专业…...

编程新知 2026/4/8 20:51:00

终极jless输入处理指南：STDIN与文件输入的完整流程解析

终极jless输入处理指南&#xff1a;STDIN与文件输入的完整流程解析 【免费下载链接】jless jless is a command-line JSON viewer designed for reading, exploring, and searching through JSON data. 项目地址: https://gitcode.com/gh_mirrors/jl/jless jless是一款专…...

编程新知 2026/4/8 19:41:44