<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="css/photo.css">
</head>
<body>
<div class="photo">
<div class="a">
<div class="a-one"><img class="p p1" src="images/1.gif"></div>
<div class="a-two"><img class="p p2" src="images/1.gif"></div>
<div class="a-three"><img class="p p3" ?src="images/1.gif"></div>
<div class="a-four"><img class="p p4" ?src="images/1.gif"></div>
</div>
<div class="b">
<div class="b-one"><img class="p p5" ?src="images/2.gif"></div>
<div class="b-two"><img class="p p6" ?src="images/2.gif"></div>
<div class="b-three"><img class="p p7" ?src="images/2.gif"></div>
<div class="b-four"><img class="p p8" ?src="images/2.gif"></div>
<div class="b-five"><img class="p p9" ?src="images/2.gif"></div>
<div class="b-six"><img class="p p10" ?src="images/2.gif"></div>
</div>
<div class="c">
<div class="c-one"><img class="p p11" ?src="images/3.gif"></div>
<div class="c-two"><img class="p p12" ?src="images/3.gif"></div>
<div class="c-three"><img class="p p13" ?src="images/10.gif"></div>
<div class="c-four"><img class="p p14" ?src="images/10.gif"></div>
<div class="c-five"><img class="p p15" ?src="images/10.gif"></div>
<div class="c-six"><img class="p p16" ?src="images/3.gif"></div>
<div class="c-seven"><img class="p p17" ?src="images/3.gif"></div>
</div>
<div class="d">
<div class="d-one"><img class="p p18" src="images/4.gif"></div>
<div class="d-two"><img class="p p19" src="images/4.gif"></div>
<div class="d-three"><img class="p p20" src="images/10.gif"></div>
<div class="d-four"><img class="p p21" src="images/10.gif"></div>
<div class="d-five"><img class="p p22" src="images/10.gif"></div>
<div class="d-six"><img class="p p23" ?src="images/4.gif"></div>
<div class="d-seven"><img class="p p24" ?src="images/4.gif"></div>
</div>
<div class="e">
<div class="e-one"><img class="p p25" src="images/5.gif"></div>
<div class="e-two"><img class="p p26" src="images/5.gif"></div>
<div class="e-three"><img class="p p27" src="images/10.gif"></div>
<div class="e-four"><img class="p p28" src="images/10.gif"></div>
<div class="e-five"><img class="p p29" src="images/10.gif"></div>
<div class="e-six"><img class="p p30" src="images/5.gif"></div>
<div class="e-seven"><img class="p p31" src="images/5.gif"></div>
</div>
<div class="f">
<div class="f-one"><img class="p p32" src="images/6.gif"></div>
<div class="f-two"><img class="p p33" ?src="images/6.gif"></div>
<div class="f-three"><img class="p p34" ?src="images/10.gif"></div>
<div class="f-four"><img class="p p35" ?src="images/10.gif"></div>
<div class="f-five"><img class="p p36" ?src="images/10.gif"></div>
<div class="f-six"><img ?class="p p37" src="images/6.gif"></div>
<div class="f-seven"><img ?class="p p38" src="images/6.gif"></div>
</div>
<div class="g">
<div class="g-one"><img class="p p39" src="images/7.gif"></div>
<div class="g-two"><img class="p p40" src="images/7.gif"></div>
<div class="g-three"><img class="p p41" src="images/10.gif"></div>
<div class="g-four"><img class="p p42" src="images/10.gif"></div>
<div class="g-five"><img class="p p43" src="images/10.gif"></div>
<div class="g-six"><img class="p p44" src="images/7.gif"></div>
<div class="g-seven"><img class="p p45" src="images/7.gif"></div>
</div>
<div class="h">
<div class="h-one"><img class="p p46" src="images/8.gif"></div>
<div class="h-two"><img class="p p47" src="images/8.gif"></div>
<div class="h-three"><img class="p p48" src="images/8.gif"></div>
<div class="h-four"><img class="p p49" src="images/8.gif"></div>
<div class="h-five"><img class="p p50" src="images/8.gif"></div>
<div class="h-six"><img class="p p51" src="images/8.gif"></div>
</div>
<div class="i">
<div class="i-one"><img class="p p52" src="images/9.gif"></div>
<div class="i-two"><img class="p p53" ?src="images/9.gif"></div>
<div class="i-three"><img class="p p54" ?src="images/9.gif"></div>
<div class="i-four"><img class="p p55" ?src="images/9.gif"></div>
</div>
</div>
</body>
</html>
css属性
*{
margin: 0;
padding: 0;
margin: 0 auto;
}
.photo{
width: 800px;
height: 1000px;
position: relative;
}
.p {
/*内边距*/
padding:10px 10px 10px;
background:white;/*图片白色背景*/
/*背景*/
/*左移，下移，虚化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);/*图片阴影*/
width:50px; /*图片宽度*/
/*相对定位*/
}
.photo img:hover {
/*旋转角度变回0*/
transform:rotate(0deg) scale(1.5);
z-index:9;
}
.photo .a{
display: inline-block;
left: 50px;
}
.photo .a .a-one{
margin-top: 60px;
}
.photo .b{
display: inline-block;
position: absolute;
left: 90px;
}
.photo .c{
display: inline-block;
position: absolute;
left: 180px;
}
.photo .d{
display: inline-block;
position: absolute;
left: 270px;
}
.photo .d .d-one{
margin-top: 60px;
}
.photo .e{
display: inline-block;
position: absolute;
left: 360px;
}
.photo .e .e-one{
margin-top: 120px;
}
.photo .f{
display: inline-block;
position: absolute;
left:450px;
}
.photo .f .f-one{
margin-top: 60px;
}
.photo .g{
display: inline-block;
position: absolute;
left:540px;
}
.photo .g .g-one{
margin-top: 0px;
}
.photo .h{
display: inline-block;
position: absolute;
left:630px;
}
.photo .h .h-one{
margin-top: 0px;
}
.photo .i{
display: inline-block;
position: absolute;
left:720px;
}
.photo .i .i-one{
margin-top: 60px;
}
使用css3制作照片墙
原文地址：http://www.cnblogs.com/zy66blogs/p/7507875.html