【Web前端实操11】定位实操_照片墙（无序摆放）
设置一个板块，将照片随意无序摆放在墙上，从而形成照片墙。本来效果应该是很唯美好看的，就像这种，但是奈何本人手太笨，只好设置能达到照片墙的效果就可。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位实操_照片墙</title><style>/* 宽高，左右居中，设置边框线 相对定位 */.wall{width: 960px;height: 600px;margin: 0 auto;border: 1px rgb(128, 128, 128) double;position: relative;}/* 设置图片宽度，设置边框，绝对定位 */.wall img {width: 200px;border: 10px solid #f1f1f1;position: absolute;}/* CSS3新特性设置定位之后，才可以使用1. 动画-旋转：transform:rotate(-10deg)*/.img1 {top: 0;left: 10px;transform: rotate(0deg);}.img2 {transform: rotate(5deg);top: 20px;left: 220px;}.img3 {transform: rotate(-20deg);top: 40px;left: 450px;}.img4 {transform: rotate(-5deg);top: 30px;left: 700px;}.img5 {transform: rotate(20deg);top: 100px;left: 10px;}.img6 {transform: rotate(-5deg);top: 160px;left: 350px;}.img7 {transform: rotate(-5deg);top: 300px;left: 0px;}.img8 {transform: rotate(5deg);top: 270px;left: 180px;}.img9 {transform: rotate(-10deg);top: 290px;left: 370px;}.img10 {transform: rotate(20deg);top: 280px;left: 600px;}</style>
</head>
<body><div class="wall"><img class="img1" src="img/1.jpg"><img class="img2" src="img/2.jpg"><img class="img3" src="img/3.jpg"><img class="img4" src="img/4.jpg"><img class="img5" src="img/5.jpg"><img class="img6" src="img/6.jpg"><img class="img7" src="img/7.jpg"><img class="img8" src="img/8.jpg"><img class="img9" src="img/9.png"><img class="img10" src="img/10.jpg"></div>
</body>
</html>实现效果：
相关文章：
【Web前端实操11】定位实操_照片墙（无序摆放）
设置一个板块，将照片随意无序摆放在墙上，从而形成照片墙。本来效果应该是很唯美好看的，就像这种，但是奈何本人手太笨，只好设置能达到照片墙的效果就可。 代码如下： <!DOCTYPE html> <html lang&…...
图像处理------调整色调
什么是色调？ 色调，在画面上表现思想、感情所使用的色彩和色彩的浓淡。分为暖色调和冷色调。 from cv2 import destroyAllWindows, imread, imshow, waitKey#创建棕褐色色调 def make_sepia(img, factor: int):pixel_h, pixel_v img.shape[0], img.shap…...
【操作系统】实验七 显示进程列表
🕺作者： 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注：👍点赞🙌收藏✍️留言 🏇码字不易，你的👍点赞🙌收藏❤️关注对我真的很重要&…...
[实战]加密传输数据解密
前言 下面将分享一些实际的渗透测试经验，帮助你应对在测试中遇到的数据包内容加密的情况。我们将以实战为主，技巧为辅，进入逆向的大门。 技巧 开局先讲一下技巧，掌握好了技巧，方便逆向的时候可以更加快速的找到关键函数…...
yarn install 报错 证书过期 Certificate has expired
“Certificate has expired” 的意思是证书已过期。这通常是指数字证书在其有效期限之前已经失效了。数字证书通常用于加密和保护网络通信，以及验证网站的身份。如果证书已经过期，那么使用该证书的网站或服务可能会受到安全威胁。为了保证安全࿰…...
多流转换 （分流，合流，基于时间的合流——双流联结 ）
目录 一，分流 1.实现分流 2.使用侧输出流 二，合流 1，联合 2，连接 三，基于时间的合流——双流联结 1，窗口联结 1.1 窗口联结的调用 1.2 窗口联结的处理流程 2，间隔联结 2.1 间隔联…...
Linux破解密码
破解root密码（Linux 7） 1、先重启——e 2、Linux 16这一行 末尾加rd.break（不要回车）中断加载内核 3、再ctrlx启动，进入救援模式 4、mount -o remount，rw /sysroot/——（mount挂载 o——opti…...
ABAP 批导demo调用SM30表维护demo
ABAP 批导demo&调用SM30表维护demo &--------------------------------------------------------------------- *& Report ZPP036 &--------------------------------------------------------------------- *& &-----------------------------------…...
Mysql 文件导入与导出
i/o 一、导出(mysqldump)<一>、导出sql文件<二>、导出csv文件 二、导入(load)三、常见报错The Mysql server is running with the --secure-file-priv option so it cannot execute this statement 一、导出(mysqldump) <一>、导出sql文件 1、整库 mysqld…...
《每天十分钟》-红宝书第4版-迭代器与生成器
理解迭代 计数循环就是一种最简单的迭代 for (let i 1; i < 10; i) { console.log(i); }迭代之前需要事先知道如何使用数据结构。数组中的每一项都只能先通过引用取得数组对象，然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。遍…...
1、【vue篇】vue框架快速上手
注意事项： methods必须要加s 导入vue：<script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>导入Axios:<script src"https://unpkg.com/axios/dist/axios.min.js"></script> 简单Vue程序…...
Unity 编辑器篇|（九）编辑器美化类（ GUIStyle、GUISkin、EditorStyles） （全面总结 | 建议收藏）
目录 1. GUIStyle1.1 参数总览1.2 样式代码 2. GUISkin2.1 参数总览2.2 创建自定义Skin 3. EditorStyles2.1 参数总览1.2 反射获取所有EditorStyles 1. GUIStyle GUIStyle是一个用于定制GUI控件样式的类，它包含了控件的外观属性，如字体、颜色、背景等。…...
Spring Boot Starters
Spring Boot Starters 概述 Spring Boot Starters是一系列为特定应用场景预设的依赖管理和自动配置方案。每个Starter都是为了简化特定类型的项目构建和配置。例如，spring-boot-starter-web是为创建基于Spring MVC的Web应用程序而设计的。 Starter的结构 一个典型…...
Qt防止创建窗口抢焦点
问题是，当我在 Qt 中打开一个新窗口时，它会自动窃取前一个应用程序的焦点。 有什么办法可以防止这种情况发生吗？ setAttribute(Qt::WA_ShowWithoutActivating);这会强制窗口不激活。即使有Qt::WindowStaysOnTopHint flag 出处： S…...
shared_ptr 与 unique_ptr 的转换 笔记
推荐B站文章： 6.shared_ptr与unique_ptr_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p6&vd_sourcea934d7fc6f47698a29dac90a922ba5a3我的往期文章： 独占指针：unique_ptr 与 函数调用-CSDN博客https://blog.csdn.n…...
python windows和linux 文件同步
在Python中，可以使用paramiko库来实现Windows和Linux之间的文件同步。paramiko是一个用于SSH连接的Python库，可以用于在Windows和Linux之间进行文件传输。 以下是一个简单的示例代码，演示如何使用paramiko库在Windows和Linux之间同步文件&am…...
【数据结构】72变的双端队列
双端队列 前言一、双端队列1.1 双端队列的定义1.2 输入受限的双端队列1.3 输出受限的双端队列1.5 输入输出都受限的双端队列1.6 小结 二、双端队列的使用2.1 双端队列的出队序列——暴力求解2.1.1 栈的出栈序列2.1.2 输入受限的双端队列2.1.3 输出受限的双端队列2.1.4 输入输出…...
kafka为什么不支持读写分离？
kafka为什么不支持读写分离？ 在kafka中，生产者写入消息，消费者读取消息的操作都是与 leader 副本进行交互的，从而实现的是一种主写主读的生产消费模型。kafka不支持读写分离，也就是主写从读。 读写分离有以下不足&am…...
arcgis 面要素shp数据处理
面要素是工作中用到最多的，那么面要素是如何形成的呢，主要还是由闭合的线要素转换而成。在面要素数据中常用的有以下几点： 一、 线转面（要素转面） 通过上一篇得到了点转线的要素，那么根据上节的线要素&am…...
上有n个不同点，最多只能移动一个点，移动到[1, m]中任意一点，求最终最小相邻两个点的距离的最大值是什么)
数轴(0 ~ m)上有n个不同点，最多只能移动一个点，移动到[1, m]中任意一点，求最终最小相邻两个点的距离的最大值是什么
题目 思路：先找到相邻距离最小的位置，假设为pos, 那么不是移动第pos个点就是移动第(pos - 1)个点，先移动pos点，用数组vec存除了pos点之外的所有点，求出最小相邻距离和最大相邻距离，那么肯定将pos点插入到最大相邻距离中。 #include <bits/stdc++.h> using namesp…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...