html 照片墙

news/2024/12/26 21:51:46/

html 照片墙

代码很简单,首先准备一些照片放入一个文件夹。

之后上代码,难度不大,可以直接复制粘贴使用:

html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像墙</title>
<link  type="text/css" href="style.css"  rel="stylesheet">
</head>
<body>
<div class="container">
<img class="pic pic0" src="img/0.jpg" >
<img class="pic pic1" src="img/1.jpg" >
<img class="pic pic2" src="img/2.jpg" >
<img class="pic pic3" src="img/3.jpg" >
<img class="pic pic4" src="img/4.jpg" >
<img class="pic pic5" src="img/5.jpg" >
<img class="pic pic6" src="img/6.jpg" >
<img class="pic pic7" src="img/7.jpg" >
</div>
</body>
</html>

css文件:

*{margin:0;padding: 0;
}body{background-color: #eeeeee;
}.container{width: 1000px;height: 450px;margin:60px auto;position: relative;
}.container img{padding: 10px 10px 15px ;background:white;border: 1px solid #ddd;box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
}.pic{width: 200px;margin-right: 1%;
}.container>img:hover{opacity:0.6;
}

效果:


强制分割线


如果说你要给你的照片墙添加一些特效的话,也ok,那就用下面这个css文件

*{margin:0;padding: 0;
}body{background-color: #eeeeee;
}.container{width: 1000px;height: 450px;margin:60px auto;position: absolute;
}.pic1{left: 400px;top: 0;transform:rotate(-5deg);-webkit-transform:rotate(-5deg);
}.pic2{left: 200px;top: 10px;transform:rotate(-20deg);-webkit-transform:rotate(-20deg);
}
.pic3{top: 220px;right: 80px;transform:rotate(5deg);-webkit-transform:rotate(5deg);
}.pic4{top: 100px;left: 300px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);
}.pic5{top: 20px;right: 150px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);
}
.pic6{left: 10px;top: 0;transform:rotate(10deg);-webkit-transform:rotate(10deg);
}.pic7{left: 850px;top: 0;transform:rotate(20deg);-webkit-transform:rotate(20deg);
}
.pic0{bottom: -20px;top: 190px;transform:rotate(5deg);-webkit-transform:rotate(-15deg);
}.container img{padding: 10px 10px 15px;background: white;border: 1px solid #ddd;box-shadow: 2px 2px 3px rgba(50,50,50,0.4);-webkit-transition: all 0.5s ease-in;-moz-transition: all 0.5s ease-in;-ms-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;transition: all 0.5s ease-in;position: absolute;z-index: 1;
}.pic{width: 200px;margin-right: 1%;
}.container>img:hover{box-shadow: 15px 15px 20px rgba(50,50,50,0.4);transform:rotate(0deg) scale(2.20);-webkit-transform:rotate(0deg) scale(1.50);z-index: 1000;
}

效果: 


http://www.ppmy.cn/news/918036.html

相关文章

Matplotlib刻度和刻度标签

刻度指的是轴上数据点的标记&#xff0c;Matplotlib 能够自动的在 x 、y 轴上绘制出刻度。这一功能的实现得益于 Matplotlib 内置的刻度定位器和格式化器&#xff08;两个内建类&#xff09;。在大多数情况下&#xff0c;这两个内建类完全能够满足我们的绘图需求&#xff0c;但…

如何理解闭包函数的特性(golang版)

特性&#xff1a;闭包可以在多次调用之间保持原始状态 我们来看一个例子&#xff1a; func main() {adder : makeAdder(10)fmt.Println(adder(5)) // 输出&#xff1a;15&#xff0c;因为 10 5 15fmt.Println(adder(20)) // 输出&#xff1a;30&#xff0c;因为 10 20 30 …

朋友圈小霸王游戏机,领取链接和源码找回青春记忆

今天不知道什么情况&#xff0c;朋友圈、微信群都在发小霸王游戏机。 作为互联网从业者&#xff0c;体验一番之后肯定是找源码看看啦&#xff0c;发现作者是在 2020-09 就发版了&#xff0c;可能最近被短视频带火了。 作者是基于 JSNES 这个库开发的&#xff0c;JSNES 是一个…

2019最新多款毕业季照片排版素材,附送图片排版神器

毕业季照片排版素材 格式&#xff1a;PSD 大小&#xff1a;7G 提供方式&#xff1a;百度网盘 下载方式&#xff1a;详见文章底部 6、7月是毕业的季节&#xff0c;自然有很多小伙伴需要毕业季设计素材的了&#xff0c;so&#xff0c;今天可图君为大家带来多种风格的毕业季设…

迅雷下载:触动人心:设计优秀的iPhone应用,Tapworthy:DesigningGreat iPhone Apps

转自:http://www.lwxshow.com/archives/457 迅雷下载 触动人心&#xff1a;设计优秀的iPhone应用 高速下载

Java项目中一些注解的作用

项目中一些注解的作用 1. PostConstruct 1. PostConstruct PostConstruct 是一个Java注解&#xff0c;它用于指示一个方法应在其所在的类初始化之后立即执行。通常将它用于在依赖注入完成后执行一些初始化工作或设置。当容器创建一个带有 PostConstruct 注解的 bean 时&#x…

证件照排版软件_傻瓜式证件照片排版以及尺寸的调整

工具:1. 光影魔术手 2. 美图秀秀 3.在线的照片排版工具 忙着证明“自己是谁”的人们,不断地提交自己的证件照,忙着报考资格证的人,也在提交复合系统规定的证件照。 一、证件照的标准尺寸(1寸、2寸等) 可能懂得PS软件,你就玩得很溜。但学习它会花费比较多的时间。如果你…

Java拼图小游戏总结

程序启动入口 import com.itDong.ui.GrameJFrame; import com.itDong.ui.LoginJFrame; import com.itDong.ui.RegisterJFrame;public class APP {public static void main(String[] agrs) {//程序启动入口//如果开启一个界面,就创建谁的对象就行//new LoginJFrame();new Gram…