web前端——HTML+CSS实现九宫格

web前端——HTML+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><style>* {margin: 0;padding: 0;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background: rgb(224, 212, 203);}.container {width: 300px;height: 300px;display: flex;flex-wrap: wrap;}.container .item {position: relative;box-sizing: border-box;width: 100px;height: 100px;border: 2px solid white;background-image: url(A.jpg);background-size: 300px 300px;}.container .item:nth-child(3n+1) {left: -10px;}.container .item:nth-child(3n+2) {left: 0px;background-position-x: -100px;}.container .item:nth-child(3n+3) {left: 10px;background-position-x: -200px;}.container .item {top: 10px;background-position-y: -200px;}.container .item:nth-child(-n+6) {top: 0px;background-position-y: -100px;}.container .item:nth-child(-n+3) {top: -10px;background-position-y: 0px;}</style>
</head><body><div class="container"><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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/135293.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

10道高频Vuex面试题快问快答

10道高频Vuex面试题快问快答

※其他的快问快答&#xff0c;看这里&#xff01; 10道高频Qiankun微前端面试题快问快答 10道高频webpack面试题快问快答 20道高频CSS面试题快问快答 20道高频JavaScript面试题快问快答 30道高频Vue面试题快问快答 面试中的快问快答 快问快答的情景在面试中非常常见。 在面试过…
阅读更多...
07 # 手写 find 方法

07 # 手写 find 方法

find 的使用 find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。 ele&#xff1a;表示数组中的每一个元素index&#xff1a;表示数据中元素的索引array&#xff1a;表示数组 <script>var arr [1, 3, 5, 7, 9];var result arr.find(fun…
阅读更多...
Chatgpt人工智能对话源码系统分享 带完整搭建教程

Chatgpt人工智能对话源码系统分享 带完整搭建教程

ChatGPT的开发基于大规模预训练模型技术。预训练模型是一种在大量文本数据上进行训练的模型&#xff0c;可以学习到各种语言模式和知识。在ChatGPT中&#xff0c;预训练模型被用于学习如何生成文本&#xff0c;并且可以用于各种不同的任务&#xff0c;如对话生成、问答、摘要等…
阅读更多...
SpringBoot整合Kafka (二)

SpringBoot整合Kafka (二)

&#x1f4d1;前言 本文主要讲了SpringBoot整合Kafka文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ 上文链接&#xff1a;SpringBoot整合Kafka (一) &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页…
阅读更多...
改进YOLOv5：结合ICCV2023｜动态蛇形卷积，构建不规则目标识别网络

改进YOLOv5：结合ICCV2023｜动态蛇形卷积，构建不规则目标识别网络

🔥🔥🔥 提升多尺度、不规则目标检测，创新提升 🔥🔥🔥 🔥🔥🔥 捕捉图像特征和处理复杂图像特征 🔥🔥🔥 👉👉👉: 本专栏包含大量的新设计的创新想法，包含详细的代码和说明，具备有效的创新组合，可以有效应用到改进创新当中 👉👉👉: �…
阅读更多...
查看apk签名

查看apk签名

cmd 命令&#xff1a; keytool -v -list -keystore "E:\xxx\release.jks"
阅读更多...
kubernetes集群编排——k8s存储（configmap，secrets）

kubernetes集群编排——k8s存储（configmap，secrets）

configmap 字面值创建 kubectl create configmap my-config --from-literalkey1config1 --from-literalkey2config2kubectl get cmkubectl describe cm my-config 通过文件创建 kubectl create configmap my-config-2 --from-file/etc/resolv.confkubectl describe cm my-confi…
阅读更多...
Unreal UnLua + Lua Protobuf

Unreal UnLua + Lua Protobuf

Unreal UnLua Lua Protobuf https://protobuf.dev/ protobuf wire format&#xff1a;pb 编译到底层的数据协议 https://github.com/starwing/lua-protobuf/blob/master/README.zh.md buffer 处理 lua string 可以当 buffer 用&#xff0c;# len 不会遇到 0 截断&#xf…
阅读更多...
算法leetcode｜85. 最大矩形（rust重拳出击）

算法leetcode｜85. 最大矩形（rust重拳出击）

文章目录 85. 最大矩形&#xff1a;样例 1&#xff1a;样例 2&#xff1a;样例 3&#xff1a;样例 4&#xff1a;样例 5&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 85. 最…
阅读更多...
Python算法例8 将整数A转换为B

Python算法例8 将整数A转换为B

1. 问题描述 给定整数A和B&#xff0c;求出将整数A转换为B&#xff0c;需要改变bit的位数。 2. 问题示例 把31转换为14&#xff0c;需要改变2个bit位&#xff0c;即&#xff1a;&#xff08;31&#xff09;10&#xff08;11111&#xff09;2&#xff0c;&#xff08;14&…
阅读更多...
CAN 协议常见面试题总结

CAN 协议常见面试题总结

0.讲一下CAN通讯的过程 第一段&#xff1a;需要发送的通讯设备&#xff0c;先发送一个显性电平0&#xff0c;告诉其他通讯设备&#xff0c;需要开始通讯。 第二段&#xff1a;就是发送仲裁段&#xff0c;其中包括ID帧和数据帧类型&#xff0c;告诉其他通讯设备&#xff0c;需…
阅读更多...
智慧农业：农林牧数据可视化监控平台

智慧农业：农林牧数据可视化监控平台

数字农业是一种现代农业方式&#xff0c;它将信息作为农业生产的重要元素&#xff0c;并利用现代信息技术进行农业生产过程的实时可视化、数字化设计和信息化管理。能将信息技术与农业生产的各个环节有机融合&#xff0c;对于改造传统农业和改变农业生产方式具有重要意义。 图扑…
阅读更多...
Android Studio(项目收获)

Android Studio(项目收获)

取消按钮默认背景色 像按钮默认背景色为深蓝色&#xff0c;即使使用了background属性指定颜色也不能生效。 参考如下的解决方法&#xff1a; 修改/res/values/themes.xml中的指定内容如下&#xff1a; <style name"Theme.TianziBarbecue" parent"Theme.Mater…
阅读更多...
OSCP系列靶场-Esay-Dawn

OSCP系列靶场-Esay-Dawn

总结 getwebshell → SMB共享无密码 → SMB存在上传功能 → 存在周期执行任务 → SMB上传反弹shell → 被执行获得webshell 提 权 思 路 → suid发现zsh → -p容器提权 准备工作 启动VPN 获取攻击机IP > 192.168.45.163 启动靶机 获取目标机器IP > 192.168.242.11 信…
阅读更多...
51单片机-定时计数器

51单片机-定时计数器

文章目录 前言1 原理2.编程 前言 1 原理 2.编程 定时计算&#xff1a; 50ms501000us 一个机器周期&#xff1a;1.085us 65535 - 501000/1.08546082 故 40082*1.08549998.97 /*定时器1&#xff0c;定时模式 工作模式1 16位计数器&#xff0c; 定时20秒后使能蜂鸣器*/ #include…
阅读更多...
5 Tensorflow图像识别（下）模型构建

5 Tensorflow图像识别（下）模型构建

上一篇&#xff1a;4 Tensorflow图像识别模型——数据预处理-CSDN博客 1、数据集标签 上一篇介绍了图像识别的数据预处理&#xff0c;下面是完整的代码&#xff1a; import os import tensorflow as tf# 获取训练集和验证集目录 train_dir os.path.join(cats_and_dogs_filter…
阅读更多...
AI+BI行业数字化转型研讨会 - 总结精华回顾

AI+BI行业数字化转型研讨会 - 总结精华回顾

带您一起观看研讨会精彩内容回顾&#xff01; || 导语 AIBI行业数字化转型研讨会—引领未来&#xff0c;智慧转型 德昂信息技术(北京)有限公司于2023年10月26日成功举办了AIBI行业数字化转型研讨会。此次盛会汇聚了产业精英、企业领袖以及技术专家&#xff0c;共同探讨在快速…
阅读更多...
Python的编码规范：PEP 8介绍及基本遵循原则

Python的编码规范：PEP 8介绍及基本遵循原则

文章目录 PEP 8简介基本遵循原则1. 缩进2. 行宽3. 空行4. 导入5. 空格6. 命名约定7. 表达式和语句中的空格8. 注释9. 编码声明10. 文档字符串PEP 8简介 PEP 8，或Python Enhancement Proposal 8，是一个官方文档，发布于2001年。它由Guido van Rossum，Python语言的创始人，以…
阅读更多...
前端框架Vue学习 ——（二）Vue常用指令

前端框架Vue学习 ——（二）Vue常用指令

文章目录 常用指令 常用指令 指令: HTML 标签上带有 “v-” 前缀的特殊属性&#xff0c;不同指令具有不同含义。例如: v-if, v-for… 常用指令&#xff1a; v-bind&#xff1a;为 HTML 标签绑定属性值&#xff0c;如设置 href&#xff0c;css 样式等 <a v-bind:href"…
阅读更多...
Spark 新特性+核心回顾

Spark 新特性+核心回顾

Spark 新特性核心 本文来自 B站 黑马程序员 - Spark教程 &#xff1a;原地址 1. 掌握Spark的Shuffle流程 1.1 Spark Shuffle Map和Reduce 在Shuffle过程中&#xff0c;提供数据的称之为Map端&#xff08;Shuffle Write&#xff09;接收数据的称之为Reduce端&#xff08;Sh…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023