[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…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...
破解路内监管盲区：免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）
在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念： 1）ZYNQ全称：ZYNQ7000 All Pgrammable SoC 2）SoC:system on chips(片上系统)，对比集成电路的SoB（system on board） 3）ARM：处理器…...
sshd代码修改banner
sshd服务连接之后会收到字符串： SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢？ 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头，…...
客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场，但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大，传统架构已较难满足当前企业发展的需求，企业面临着三重挑战： ① 业务：国内用户访问海外服…...