简单照片墙制作html5

最新推荐文章于 2024-07-27 23:01:21 发布

reb0rn初代

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量6.6k

点赞数 7

分类专栏： html5

本文链接：https://blog.csdn.net/qq_34195441/article/details/86483127

版权

html5 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

.html

<!-- html静态网页：数据静态 -->
<!-- html:标签
  1、单标签：img、a...2、双标签 -->
<!-- CSS样式：装饰标签
	三种存在方式：1、在开始标签内声明style属性
			  2、在html内部声明style标签
			  3、在该项目创建style文件
			  4、优先级：择近优先
 -->

<!DOCTYPE html>
<!-- 文档类型html，打开浏览器渲染引擎的钥匙 -->
<html>
<!-- 限制标签存放在html双标签内部 -->
<head>
<!-- 头部：包含网页的基本信息及设置 -->
<meta charset="UTF-8">
<!-- 设置网页编码格式 -->
<title>照片墙</title>
<link href="Css/index-style.css" rel="stylesheet">
</head>
<body>

<!-- div容器，盛放其他所有的标签，div+Css做网页的排版布局 -->
	<div class="box" id="box">
		<img alt="此图片无法加载" src="img/1.jpg" class="pic pic1"/>
		<img alt="此图片无法加载" src="img/2.jpg" class="pic pic2"/>
		<img alt="此图片无法加载" src="img/3.jpg" class="pic pic3"/>
		<img alt="此图片无法加载" src="img/4.jpg" class="pic pic4"/>
		<img alt="此图片无法加载" src="img/5.jpg" class="pic pic5"/>
		<img alt="此图片无法加载" src="img/6.jpg" class="pic pic6"/>
		<img alt="此图片无法加载" src="img/7.jpg" class="pic pic7"/>
		<img alt="此图片无法加载" src="img/8.jpg" class="pic pic8"/>
		<img alt="此图片无法加载" src="img/9.jpg" class="pic pic9"/>
	</div>

</body>
</html>

.css

/*选择所有，默认外边距为8px*/
*{
	margin:0px;
	padding:0px;
}
body{
	background:#333;
}
.box{
	width:900px;
	height:450px;
	/*background:blue;*/
	/*position margin使用绝对居中*/
	position:absolute;/*设四个方向，窗口居中*/
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin;auto;/*auto在父容器中水平居中*/
	/*margin:100px 50px;上下、左右 四个：顺时针 上右下左*/
}

.pic{
	background:blue;
	width:150px;/*只设置宽度，高会随着宽度的改变，按比例缩放*/
	margin-left:20px;
	padding:5px;/*扩充内部的边距，增加本身的宽度和高度*/
	border:5px solid blue;/*边框：宽度、样式、颜色 dashed虚线*/
	/*border-radius:50%;/*剪切圆形，根据指定的半径改变四角的弧度*/
}

.pic1{
	/*transform:改变标签的形态：大小、位置、透明、角度...
	  rotate:角度，deg(单位)  正值：顺时针
	  scale:缩放 默认值为1  >1放大   <1缩小*/
	transform:rotate(-30deg) scale(1);
	
}
.pic2{
	transform:rotate(-10deg) scale(0.5);
	
}
.pic3{
	transform:rotate(20deg) scale(1.2);
	
}
.pic4{
	transform:rotate(-30deg) scale(1);
	
}
.pic5{
	transform:rotate(10deg) scale(1.2);
	
}
.pic6{
	transform:rotate(-20deg) scale(1.2);
	
}
.pic7{
	transform:rotate(-40deg) scale(0.8);
	
}
.pic8{
	transform:rotate(-10deg) scale(1.5);
	
}
.pic9{
	transform:rotate(10deg) scale(0.7);
	
}
/*HOVER：悬浮事件*/
.pic:HOVER{
	transition:all 2s;/*过渡*/
	transform:rotate(0deg) scale(1.5);
	position:relative;
	z-index:10;
}