<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>照片墙</title>
<link href="../css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!---------------------标题-------------------------------------------->
<h1>照片墙</h1>
<!---------------------照片墙------------------------------------------->
<div class="container">
<img class="pic1" src="../img/照片墙/照片1.jpg" />
<img class="pic2" src="../img/照片墙/照片2.jpg" />
<img class="pic3" src="../img/照片墙/照片4.jpg" />
<img class="pic4" src="../img/照片墙/照片3.jpg" />
<img class="pic5" src="../img/照片墙/照片5.jpg" />
<img class="pic6" src="../img/照片墙/照片6.jpg" />
<img class="pic7" src="../img/照片墙/照片7.jpg" />
<img class="pic8" src="../img/照片墙/照片9.jpg" />
<img class="pic9" src="../img/照片墙/照片8.jpg" />
<img class="pic10" src="../img/照片墙/照片12.jpg" />
<img class="pic11" src="../img/照片墙/照片11.jpg" />
<img class="pic12" src="../img/照片墙/照片13.jpg" />
<img class="pic13" src="../img/照片墙/照片14.jpg" />
<img class="pic14" src="../img/照片墙/照片16.jpg" />
<img class="pic15" src="../img/照片墙/照片18.jpg" />
</div>
</body>
</html>
position:absolute;
top:180px;
left:30px;@charset "utf-8";
/* CSS Document */
body{ background-color:#CCC;}
h1{ text-align:center;}
.container{ margin:0 auto; position:relative;
width:1000px;}
img{ background:#000;
padding:5px;
transition:all 0.35s;}
img:hover{
transform:rotate(0deg);
transform:scale(1.2,1.2);
box-shadow:5px 5px;
z-index:2;}
.pic1{ transform:rotate(-15deg);
position:absolute;
top:60px;
left:10px;
z-index:1;
}
.pic2{ transform:rotate(-15deg);
position:absolute;
top:60px;
left:180px;}
.pic3{ transform:rotate(15deg);
position:absolute;
top:60px;
left:400px;
z-index:1;}
.pic4{ transform:rotate(-20deg);
position:absolute;
top:60px;
left:550px;}
.pic5{ transform:rotate(20deg);
position:absolute;
top:60px;
left:750px;}
.pic6{ transform:rotate(15deg);
position:absolute;
top:300px;
left:20px;
z-index:1;}
.pic7{ transform:rotate(-15deg);
position:absolute;
top:300px;
left:210px;}
.pic8{ transform:rotate(-20deg);
position:absolute;
top:300px;
left:450px;
z-index:1;}
.pic9{ transform:rotate(-20deg);
position:absolute;
top:300px;
left:600px;}
.pic10{ transform:rotate(20deg);
position:absolute;
top:300px;
left:800px;}
.pic11{ transform:rotate(-30deg);
position:absolute;
top:500px;
left:20px;
z-index:1;
}
.pic12{ transform:rotate(15deg);
position:absolute;
top:500px;
left:250px;}
.pic13{ transform:rotate(-30deg);
position:absolute;
top:550px;
left:400px;
z-index:1;}
.pic14{ transform:rotate(15deg);
position:absolute;
top:520px;
left:650px;
}
.pic15{ transform:rotate(-20deg);
position:absolute;
top:580px;
left:800px;}