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

实现效果:

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

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

相关文章

SpringBoot整理-Spring Boot配置

Spring Boot 的配置系统是其核心功能之一,旨在简化 Spring 应用的配置过程。Spring Boot 提供了一种灵活的方式来配置你的应用,无论是通过外部配置文件,环境变量,命令行参数还是在代码中直接配置。以下是关于 Spring Boot 配置的几个重要方面: 配置文件 application.prope…

JavaEE的MVC(Model-View-Controller)设计模式

JavaEE的MVC&#xff08;Model-View-Controller&#xff09;设计模式是一种用于组织和管理Web应用程序的架构模式。MVC模式将应用程序分为三个主要组件&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#x…

binary_search_tree的介绍与实现(二叉搜索树精美图示详解哦)

二叉搜搜索树 引言二叉搜索树的介绍二叉搜索树的实现框架默认成员函数构造析构赋值重载 InsertR&#xff08;插入&#xff09;EraseR&#xff08;删除&#xff09;SearchR&#xff08;查找&#xff09; 源码概览总结 引言 在C语言部分&#xff0c;我们已经认识了树与二叉树的结…

【嵌入式经验积累】C语言实现傅里叶变换

文章目录 C 语言实现离散傅利叶变换&#xff08;DFT&#xff09;代码如下&#xff1a;C 语言实现快速傅利叶变换&#xff08;FFT&#xff09;&#xff0c;代码如下&#xff1a;分裂基快速傅利叶变换代码如下。实序列快速傅利叶变换&#xff08;一&#xff09;&#xff0c;代码如…

Nginx 实战指南

Nginx 是一款高性能的开源反向代理服务器,也可用作负载均衡器、Web服务器和缓存服务器。本实战指南将带你深入了解 Nginx 的安装、基础配置、高级配置、最佳实践以及性能调优。 步骤 1: 安装 Nginx Ubuntu sudo apt update sudo apt install nginx CentOS sudo yum insta…

python使用分治算法找出出现次数最多的数字

对于给定的一个长度为n的数组nums&#xff0c;需要找出起重工出现次数大于n/2向下取整的元素&#xff0c;假设给定的数组中一定存在符合给定要求的数&#xff0c;例如给定如下的例子&#xff1a; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添加图片注…

docker使用http_proxy配置代理

钢铁知识库&#xff0c;一个学习python爬虫、数据分析的知识库。人生苦短&#xff0c;快用python。 在内网服务器中&#xff0c;docker经常需要下载拉取镜像&#xff0c;但由于没有网络要么只能手动导入镜像包&#xff0c;又或者通过http_proxy代理到其它服务器下载。 解决方法…

看书标记【R语言数据分析项目精解:理论、方法、实战 9】

看书标记——R语言 Chapter 9 文本挖掘——点评数据展示策略9.1项目背景、目标和方案9.1.1项目背景9.1.2项目目标9.1.3项目方案1.建立评论文本质量量化指标2.建立用户相似度模型3.对用户评论进行情感性分析 9.2项目技术理论简介9.2.1评论文本质量量化指标模型1.主题覆盖量2.评论…

FA-分配行重分配报错【APP-OFA-48313】

FA-重分配行报错 已存在行只能分多次转移调整 Ref1&#xff1a; APP-OFA-48313 You Cannot Create Identical Distribution Lines with Transfer (Doc ID 336894.1) APPLIES TO: Oracle Assets - Version 11.5.10.0 and later Information in this document applies to any…

Ubuntu20 服务器版磁盘扩容

Ubuntu20 服务器版磁盘扩容 Ubuntu20 服务器版磁盘不够用进可以使用fdisk命令对磁盘进行扩容 本案例中是基于vmware虚拟化环境下&#xff0c;ubuntu服务器按默认磁盘大小16G进行安装后&#xff0c;运行一段时间后发面/分区磁盘空间全部用完&#xff0c;导致服务无法正常运行。基…

计算机网络自顶向下Wireshark labs1-Intro

Wireshark labs1 实验文档&#xff1a;http://www-net.cs.umass.edu/wireshark-labs/Wireshark_Intro_v8.0.pdf 介绍 加深对网络协议的理解通常可以通过观察协议的运行和不断调试协议来大大加深&#xff0c;具体而言&#xff0c;就是观察两个协议实体之间交换的报文序列&…

厨艺学习_

选食用油 https://www.bilibili.com/video/BV1oC4y1u799 葵花籽油&#xff1a;万能 玉米油&#xff1a;有香气 菜籽油&#xff1a;又香气&#xff0c;但芥酸高 对三高不好 对老人不好 花生油&#xff1a;不要清炒蔬菜、不能油炸 大豆油&#xff1a;便宜&#xff0c;高温炒…

长虹智能电视 Q2F系列 ZLS59GiQ2机芯 强制刷机升级方法,及刷机升级数据,维修模式进入方法等

适配机芯&#xff1a;ZLS59GiQ2 适配机型&#xff1a;50Q2F、48Q2E、55Q2E、55Q2F、58Q2F、43Q2F、49Q2F、32Q2F 软件强制升级方法&#xff1a; 1、下载后解压&#xff0c;找到upgrade_ZLS59GiQ2_V1.00XXX.bin 、ZLS59GiQ2_mboot.bin复制到U盘根目录&#xff08;不要有任何…

C++ //练习 2.31 假设已有上一个练习中所做的那些声明,则下面的哪些语句是合法的?请说明顶层const和底层const在每个例子中有何体现。

C Primer&#xff08;第5版&#xff09; 练习 2.31 练习 2.31 假设已有上一个练习中所做的那些声明&#xff0c;则下面的哪些语句是合法的&#xff1f;请说明顶层const和底层const在每个例子中有何体现。 r1 v2; p1 p2; p2 p1; p1 p3; p2 p3;环境&#xff1a;Linux Ubun…

React三大属性

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…

只会 Python 不行,不会 Python 万万不行 。。。

当下的环境大家有目共睹&#xff0c;未来一段时间情况如何&#xff0c;想必不少人心里也清楚&#xff0c;技术人走到中年&#xff0c;难免会焦虑&#xff0c;职场上干得不爽&#xff0c;但是跳槽也不容易&#xff0c;加上不少企业裁员&#xff0c;换个满意的工作更是难上加难。…

数学建模--Radar图绘制

1.Radar图简介 最近在数学建模中碰见需要绘制Radar图(雷达图)的情况来具体分析样本的各个特征之间的得分与优劣关系&#xff0c;这样的情况比较符合雷达图的使用场景&#xff0c;一般来说&#xff0c;雷达图适用于展示多个维度的数据&#xff0c;并在一个平面上直观地呈现出不同…

长虹智能电视ZLS58Gi4X机芯刷机升级方法,附整机USB升级固件数据 U3、1U、U1、U3C、6000i系列等适用

适用机芯&#xff1a;ZLS58Gi4X 适用机型&#xff1a; 40U3、65U3、43A1U、49A1U、55A1U、43C1U、50C1U、43U1、49U1、50U1、55U1、58U1、43U1A、49U1A、50U1A、55U1A、58U1A、43U3C、49U3C、50U3C、55U3C、43Z80U、50Z80U、55Z80U、LED49Z80U、LED55Z80U、UD43D6000i、UD49D…

sql数据库的相关概念与底层介绍

本文中的数据库指的是磁盘数据库。如果有sql语言&#xff08;CRUD&#xff0c;增删改查&#xff09;的使用经验会更容易理解本文的知识点。 数据库与redis的区别 数据库&#xff1a;数据存储长期在磁盘中&#xff0c;小部分频繁需要的数据会被临时提取在内存中。 Redis&…

np.argsort排序问题(关于位次)-含GitHub上在numpy项目下提问的回复-总结可行方案

np.argsort 与获取位相关问题 位次: 数组中的数据在其排序之后的另一个数组中的位置 [1,0,2,3] 中 0的位次是1 1的位次是2 2的位次是3 3的位次是4 这里先直接给出结论&#xff0c;np.argsort()返回的索引排序与实际位次在确实在某些情况下会出现一致&#xff0c;但后来numpy的开…