纯css实现九宫格图片
本篇文章所分享的内容主要涉及到结构伪类选择器，不熟悉的小伙伴可以了解一下，在常用的css选择器中我也有分享相关内容。
话不多说，接下来我们直接上代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;}.box {width: 300px;height: 300px;display: flex;justify-content: space-between;flex-wrap: wrap;position: relative;}.item {position: relative;transition: 0.5s;height: 100px;width: 100px;overflow: hidden;/* box-shadow: inset 0 0 0 1px #fff; */background-size: 300px 300px;background-image: url(./images/sc.jpg);}.item:nth-child(3n + 1) {background-position-x: 0;left: -20px;}.item:nth-child(3n + 2) {background-position-x: -100%;left: 0;}.item:nth-child(3n) {background-position-x: -200%;left: 20px;}.item:nth-child(n + 7) {background-position-y: -200%;top: 20px;}.item:nth-child(-n + 6) {background-position-y: -100px;top: 0;}.item:nth-child(-n + 3) {background-position-y: 0;top: -20px;}.box:hover .item {left: 0;top: 0;}</style><body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body>
</html>
效果展示：
今日寄语：没有什么是不可能的，只是需要你去尝试！
相关文章：
纯css实现九宫格图片
本篇文章所分享的内容主要涉及到结构伪类选择器，不熟悉的小伙伴可以了解一下，在常用的css选择器中我也有分享相关内容。 话不多说，接下来我们直接上代码： <!DOCTYPE html> <html lang"en"><head>&l…...
【MySQL】数据库的增删查改+备份与恢复
文章目录 一、创建数据库create二、数据库所使用的编码2.1 查询字符集和校验集2.2 指定编码创建数据库2.3 不同的校验集对比 三、删除数据库drop四、查看数据库show五、修改数据库alter六、数据库的备份与恢复6.1 备份 mysqldump6.2 恢复source6.3 仅备份几张表或备份多个数据库…...
Docker 部署 redis 举例
1、搜索镜像，也可以访问 https://hub.docker.com/ 搜索镜像，查看所有版本。 $ docker search redis2、拉取镜像 $ docker pull redis:5.03、启动镜像，并配置相关映射与绑定（附：Docker 常用命令与指令参数）…...
通过HandlerMethodArgumentResolver实现统一添加接口入参参数
背景：项目中有些接口的入参需要用户id信息，最简单的做法在每个Controller方法调用的时候获取登录信息然后给入参设置用户id，但是这样就会有很多重复性的工作。另一个可行的也更好的方案可以使用HandlerMethodArgumentResolver来实现。 部分示…...
JAVA-spring boot 2.4.X报错Unable to find GatewayFilterFactory with name Hystrix
网关升级spring boot项目后，启动网关报错，具体报错信息如下: 2021-12-06 09:06:25.335 ERROR 45102 --- [oundedElastic-3] reactor.core.publisher.Operators : Operator called default onErrorDropped reactor.core.Exceptions$ErrorCallback…...
运输层---UDP协议
目录 一. 无连接运输：UDP1.1 定义1.2 特点1.3 应用 二. UDP报文段结构三. UDP检验和3.1 定义3.2 检验和计算实例3.2 UDP检验和的局限 一. 无连接运输：UDP 1.1 定义 UDP（User Datagram Protocol）用户数据报协议：由 [RF…...
【LeetCode】剑指 Offer Ⅱ 第3章：字符串（7道题） -- Java Version
题库链接：https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 014. 字符串中的变位词双指针 数组模拟哈希表 ⭐剑指 Offer II 015. 找到字符串中所有字母异位词双指针 数组模拟哈希表 ⭐剑指 Offer II 016. 不含重复字符的最长子字符串双指针…...
【python】绘图代码模板
【python】绘图代码模板 pandas.DataFrame.plot( )画图函数Seaborn绘图 -数据可视化必备主题样式导入数据集可视化统计关系散点图抖动图箱线图小提琴图Pointplot群图 可视化数据集的分布绘制单变量分布柱状图直方图 绘制双变量分布Hex图KDE 图可视化数据集中的成对关系 好看的图…...
RTT学习笔记12-KConfig 语法学习
KConfig 语法学习 RTT 官方教程 https://www.rt-thread.org/document/site/#/development-tools/build-config-system/Kconfig 我自己写的IIC配置 menuconfig BSP_USING_I2C # I2C 菜单bool "Enable I2C BUS" # 提示I2C 菜单default n # 默认不使能I2C 菜单…...
基于Mediapipe的姿势识别并同步到Unity人体模型中
如题，由于是商业项目，无法公开源码，这里主要说一下实现此功能的思路。 人体关节点识别 基于Mediapipe Unity插件进行开发，性能比较低的CPU主机，无法流畅地运行Mediapipe，这个要注意一下。 Mediapipe33个人体…...
Linux下进程的特点与环境变量
目录 进程的特点 进程特点的介绍 进程时如何实现并发性的 进程间如何切换 概念铺设 PC指针 上下文 环境变量 PATH 修改PATH HOME SHELL env 命令行参数 什么是命令行参数？ 打印命令行参数 通过函数获得环境变量 getenv 命令行参数 env 修改环境变…...
以Llama-2为例，在生成模型中使用自定义LogitsProcessor
以Llama-2为例，在生成模型中使用自定义LogitsProcessor 1. 前言2. 场景介绍3. 解决方法4. 结语 1. 前言 在上一篇文章 以Llama-2为例，在生成模型中使用自定义StoppingCriteria中，介绍了怎样在生成的过程中，使用stopping criteria…...
python 计算图片hash 缓存图片为key
python，有时希望缓存图片作为key，怎么办？缓存整张突破占用内存太多，不妨缓存hash值： Fast way to Hash Numpy objects for Caching import hashlib import numpy a numpy.random.rand(10, 100) b a.view(numpy.uin…...
制造型企业如何实现车间设备生产数据的实时采集？需要5G网络吗？
引言 在制造业数字化转型的浪潮下，实时采集车间设备生产数据变得尤为重要。工业边缘网关HiWoo Box作为一款专为工业应用而设计的智能设备，具备工业级设计和多种联网方式，为制造型企业提供了高性能的车间设备数据实时采集解决方案。本文将重点…...
第2章 HTML中的JavaScript
引言 将JavaScript引入网页，首先要解决它与网页的主导语言HTML的关系问题 script元素 将JavaScript插入HTML的主要方法是使用script元素，script有8个可选属性 async：表示异步加载js文件内容，他们之间的顺序不一定按照html顺序ch…...
景联文科技高质量成品数据集上新啦！
景联文科技近期上新多个成品数据集，包含图像、视频等多种类型的数据，涵盖丰富的场景，可满足不同模型的多元化需求。 高质量成品数据集可用于训练和优化模型，使得模型能够更加全面和精准地理解和处理任务，更好地应对复…...
flask------请求拓展
flask中也有类似与django中的中间件，只不过是另一种写法，但是他们的作用是一样的，下面我们就一一介绍： 1.before_request 作用 : before_request 相当于 django 中的 process_request，每一个请求在被处理前都会经…...
大数据-玩转数据-FLINK-从kafka消费数据
一、基于前面kafka部署 大数据-玩转数据-Kafka安装 二、FLINK中编写代码 package com.lyh.flink04;import org.apache.flink.api.common.serialization.SimpleStringSchema; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apa…...
介绍Sping Boot的5个扩展点
1、初始化器ApplicationContextInitializer 我们在启动Spring Boot项目的时候，是执行这样一个方法来启动的 我们一层一层往下点，最终发现执行的是这个方法 所以我们在启动项目的时候也可以这样启动 new SpringApplication(SpringbootExtensionPointAp…...
Linux2.6内核配置说明
maturity level options代码成熟度选项 Prompt for development and/or incomplete code/drivers 显示尚在开发中或尚未完成的代码与驱动.除非你是测试人员或者开发者,否则请勿选择 setup常规设置 Local version - append to kernel release 在内核版本后面加上自定义的…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
C# 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
嵌入式学习笔记DAY33（网络编程——TCP）
一、网络架构 C/S （client/server 客户端/服务器）：由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序，负责提供用户界面和交互逻辑 ，接收用户输入，向服务器发送请求，并展示服务…...
uniapp 字符包含的相关方法
在uniapp中，如果你想检查一个字符串是否包含另一个子字符串，你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的，但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
图解JavaScript原型：原型链及其分析 | JavaScript图解
忽略该图的细节（如内存地址值没有用二进制） 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么：保存在堆中一块区域，同时在栈中有一块区域保存其在堆中的地址（也就是我们通常说的该变量指向谁&…...