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

【Web前端实操11】定位实操_照片墙（无序摆放）

news 2026/5/13 16:18:30

设置一个板块，将照片随意无序摆放在墙上，从而形成照片墙。本来效果应该是很唯美好看的，就像这种，但是奈何本人手太笨，只好设置能达到照片墙的效果就可。

代码如下：

<!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>

实现效果：

183430cacfdc413890e11313e2de3763.png

 

相关文章：

【Web前端实操11】定位实操_照片墙（无序摆放）

设置一个板块&#xff0c;将照片随意无序摆放在墙上&#xff0c;从而形成照片墙。本来效果应该是很唯美好看的&#xff0c;就像这种&#xff0c;但是奈何本人手太笨&#xff0c;只好设置能达到照片墙的效果就可。 代码如下&#xff1a; <!DOCTYPE html> <html lang&…...

编程日记 2024/1/25 22:50:22

图像处理------调整色调

什么是色调&#xff1f; 色调&#xff0c;在画面上表现思想、感情所使用的色彩和色彩的浓淡。分为暖色调和冷色调。 from cv2 import destroyAllWindows, imread, imshow, waitKey#创建棕褐色色调 def make_sepia(img, factor: int):pixel_h, pixel_v img.shape[0], img.shap…...

编程日记 2024/1/25 22:42:15

【操作系统】实验七 显示进程列表

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…...

编程日记 2024/1/25 22:40:14

[实战]加密传输数据解密

前言 下面将分享一些实际的渗透测试经验&#xff0c;帮助你应对在测试中遇到的数据包内容加密的情况。我们将以实战为主&#xff0c;技巧为辅&#xff0c;进入逆向的大门。 技巧 开局先讲一下技巧&#xff0c;掌握好了技巧&#xff0c;方便逆向的时候可以更加快速的找到关键函数…...

编程日记 2024/1/25 22:37:11

yarn install 报错 证书过期 Certificate has expired

“Certificate has expired” 的意思是证书已过期。这通常是指数字证书在其有效期限之前已经失效了。数字证书通常用于加密和保护网络通信&#xff0c;以及验证网站的身份。如果证书已经过期&#xff0c;那么使用该证书的网站或服务可能会受到安全威胁。为了保证安全&#xff0…...

编程日记 2024/1/25 22:36:10

多流转换 （分流，合流，基于时间的合流——双流联结 ）

目录 一&#xff0c;分流 1.实现分流 2.使用侧输出流 二&#xff0c;合流 1&#xff0c;联合 2&#xff0c;连接 三&#xff0c;基于时间的合流——双流联结 1&#xff0c;窗口联结 1.1 窗口联结的调用 1.2 窗口联结的处理流程 2&#xff0c;间隔联结 2.1 间隔联…...

编程日记 2024/1/25 22:32:05

Linux破解密码

破解root密码&#xff08;Linux 7&#xff09; 1、先重启——e 2、Linux 16这一行 末尾加rd.break&#xff08;不要回车&#xff09;中断加载内核 3、再ctrlx启动&#xff0c;进入救援模式 4、mount -o remount&#xff0c;rw /sysroot/——&#xff08;mount挂载 o——opti…...

编程日记 2024/1/25 22:30:04

ABAP 批导demo调用SM30表维护demo

ABAP 批导demo&调用SM30表维护demo &--------------------------------------------------------------------- *& Report ZPP036 &--------------------------------------------------------------------- *& &-----------------------------------…...

编程日记 2024/1/25 22:27:01

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

编程日记 2024/1/25 22:17:53

《每天十分钟》-红宝书第4版-迭代器与生成器

理解迭代 计数循环就是一种最简单的迭代 for (let i 1; i < 10; i) { console.log(i); }迭代之前需要事先知道如何使用数据结构。数组中的每一项都只能先通过引用取得数组对象&#xff0c;然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。遍…...

编程日记 2024/1/25 22:12:48

1、【vue篇】vue框架快速上手

注意事项&#xff1a; methods必须要加s 导入vue&#xff1a;<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程序…...

编程日记 2024/1/25 22:11:46

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控件样式的类&#xff0c;它包含了控件的外观属性&#xff0c;如字体、颜色、背景等。…...

编程日记 2024/1/25 22:09:44

Spring Boot Starters

Spring Boot Starters 概述 Spring Boot Starters是一系列为特定应用场景预设的依赖管理和自动配置方案。每个Starter都是为了简化特定类型的项目构建和配置。例如&#xff0c;spring-boot-starter-web是为创建基于Spring MVC的Web应用程序而设计的。 Starter的结构 一个典型…...

编程日记 2024/1/25 22:08:44

Qt防止创建窗口抢焦点

问题是&#xff0c;当我在 Qt 中打开一个新窗口时&#xff0c;它会自动窃取前一个应用程序的焦点。 有什么办法可以防止这种情况发生吗&#xff1f; setAttribute(Qt::WA_ShowWithoutActivating);这会强制窗口不激活。即使有Qt::WindowStaysOnTopHint flag 出处&#xff1a; S…...

编程日记 2024/1/25 22:05:41

shared_ptr 与 unique_ptr 的转换 笔记

推荐B站文章&#xff1a; 6.shared_ptr与unique_ptr_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p6&vd_sourcea934d7fc6f47698a29dac90a922ba5a3我的往期文章&#xff1a; 独占指针&#xff1a;unique_ptr 与 函数调用-CSDN博客https://blog.csdn.n…...

编程日记 2024/1/25 22:04:40

python windows和linux 文件同步

在Python中&#xff0c;可以使用paramiko库来实现Windows和Linux之间的文件同步。paramiko是一个用于SSH连接的Python库&#xff0c;可以用于在Windows和Linux之间进行文件传输。 以下是一个简单的示例代码&#xff0c;演示如何使用paramiko库在Windows和Linux之间同步文件&am…...

编程日记 2024/1/25 22:03:39

【数据结构】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 输入输出…...

编程日记 2024/1/25 21:58:34

kafka为什么不支持读写分离？

kafka为什么不支持读写分离&#xff1f; 在kafka中&#xff0c;生产者写入消息&#xff0c;消费者读取消息的操作都是与 leader 副本进行交互的&#xff0c;从而实现的是一种主写主读的生产消费模型。kafka不支持读写分离&#xff0c;也就是主写从读。 读写分离有以下不足&am…...

编程日记 2024/1/25 21:57:33

arcgis 面要素shp数据处理

面要素是工作中用到最多的&#xff0c;那么面要素是如何形成的呢&#xff0c;主要还是由闭合的线要素转换而成。在面要素数据中常用的有以下几点&#xff1a; 一、 线转面&#xff08;要素转面&#xff09; 通过上一篇得到了点转线的要素&#xff0c;那么根据上节的线要素&am…...

编程日记 2024/1/25 21:52:28

数轴(0 ~ m)上有n个不同点，最多只能移动一个点，移动到[1, m]中任意一点，求最终最小相邻两个点的距离的最大值是什么

题目 思路：先找到相邻距离最小的位置，假设为pos, 那么不是移动第pos个点就是移动第(pos - 1)个点，先移动pos点，用数组vec存除了pos点之外的所有点，求出最小相邻距离和最大相邻距离，那么肯定将pos点插入到最大相邻距离中。 #include <bits/stdc++.h> using namesp…...

编程日记 2024/1/25 21:46:23

别只盯着YOLOv5了！从R-CNN到DETR：手把手带你看懂目标检测算法演进史（附论文精读笔记）

从R-CNN到DETR&#xff1a;目标检测算法的范式革命与技术演进 当计算机视觉领域的研究者翻开2023年的顶会论文时&#xff0c;会发现目标检测任务已经呈现出与五年前截然不同的技术图景。这个看似"古老"的计算机视觉基础任务&#xff0c;正在经历着从传统卷积到Transf…...

编程新知 2026/5/13 15:52:51

来勒光电发布双FA自动耦合系统：突破硅光模块封装效率瓶颈

导读&#xff1a;来勒光电推出的双FA自动耦合系统&#xff0c;是一款专为高速光模块TX/RX端量身打造的高精度自动化耦合设备&#xff0c;以独特的双FA同步耦合设计、全流程无人化作业与模块化兼容能力&#xff0c;为800G/1.6T/3.2T光模块的规模化量产提供高效、稳定、智能的封装…...

编程新知 2026/5/13 15:05:12

告别串口助手：用STM32CubeIDE和HAL库，手把手教你打造自己的IAP上位机（附源码）

从零构建STM32 IAP上位机&#xff1a;C#实战与协议解析全指南 在嵌入式开发中&#xff0c;IAP&#xff08;In Application Programming&#xff09;技术为设备固件升级提供了极大便利&#xff0c;但一个稳定可靠的上位机软件往往是整个流程中最薄弱的环节。市面上通用的串口助手…...

编程新知 2026/5/13 13:51:31

保姆级教程：手把手教你用Wireshark诊断Ubuntu apt update的‘NOSPLIT’网络认证问题

深度解析Ubuntu apt update的NOSPLIT错误&#xff1a;从网络抓包到安全协议的全链路诊断 当你在Ubuntu终端中满怀期待地输入apt update&#xff0c;却看到一串刺眼的"NOSPLIT"错误时&#xff0c;那种挫败感每个Linux用户都深有体会。这个看似简单的网络错误背后&…...

编程新知 2026/5/13 13:26:16

从零部署noVNC：一次完整的远程桌面服务搭建与排错实录

1. 为什么选择noVNC&#xff1f; 最近在帮朋友部署远程桌面服务时&#xff0c;发现很多传统VNC方案都需要安装客户端&#xff0c;操作复杂不说&#xff0c;兼容性还差。直到发现了noVNC这个神器&#xff0c;它直接用浏览器就能访问远程桌面&#xff0c;彻底解决了跨平台访问的痛…...

编程新知 2026/5/13 13:13:27

终极指南：使用dmg2img免费快速转换苹果DMG镜像文件

终极指南&#xff1a;使用dmg2img免费快速转换苹果DMG镜像文件 【免费下载链接】dmg2img DMG2IMG allows you to convert a (compressed) Apple Disk Images (imported from http://vu1tur.eu.org/dmg2img). Note: the master branch contains imported code, but lacks bugfix…...

编程新知 2026/5/13 13:11:26

如何快速掌握硬件性能优化：面向暗影精灵的完整教程

如何快速掌握硬件性能优化&#xff1a;面向暗影精灵的完整教程 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度&#xff0c;自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 你是否曾经在玩游戏时突然遭遇卡顿&#xf…...

编程新知 2026/5/13 13:03:03

深入解析BaiduNetdiskPlugin-macOS：逆向工程破解百度网盘速度限制的技术实践

深入解析BaiduNetdiskPlugin-macOS&#xff1a;逆向工程破解百度网盘速度限制的技术实践 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 在macOS平台上…...

编程新知 2026/5/13 12:06:53

Task Slack集成：团队协作的任务管理终极指南

Task Slack集成&#xff1a;团队协作的任务管理终极指南 【免费下载链接】task A fast, cross-platform build tool inspired by Make, designed for modern workflows. 项目地址: https://gitcode.com/gh_mirrors/ta/task Task 是一款受 Make 启发的快速跨平台构建工具…...

编程新知 2026/5/13 10:52:56

客户受电工程图纸审核｜全网独家复现，多模态+知识图谱创新改进篇 引入MM-KG融合架构，多模态感知+知识关联助力图纸全检、隐患精准定位、审核效率翻倍

目录 一、行业痛点：人工抽检模式的致命瓶颈（附真实场景痛点） 1.1 审核效率极低，无法适配规模化需求 1.2 漏判误判率高，审核质量依赖个人经验 1.3 审核标准不统一，追溯难度大 1.4 人力成本高昂，专业人才缺口大 二、创新突破：多模态+知识图谱融合架构（核心改进解析…...

编程新知 2026/5/13 9:47:01