<html>
<head>
<title>照片墙</title>
<meta charset="UTF-8"/>
<style type="text/css">
body{
text-align:center;
background-color:orange;
}
img{
width:250px;
height:250px;
border:solid 1px gray;
padding:10px;/*设置边框与图片间的距离*/
background-color:white;
/*设置倾斜角度，正数为顺时针转，负数为逆时针转*/
transform:rotate(-5deg);
/*外边距*/
margin:10px;
}
/*使用伪类标签添加样式
把鼠标放在上面会出现定义的效果
*/
img:hover{
border:solid 2px yellow;
transform:rotate(0deg) scale(1.2);/*0表示转正 scale表示缩放，()内设置比例*/
z-index:1;/*设置显示优先级，会优先显示*/
/*设置显示到相应大小所需要的时间*/
transition:1.5s;
}
</style>
</head>
<body>
<br /><br />
<img src="img/6.jpg"/>
<img src="img/7.jpg"/>
<img src="img/8.jpg"/>
<img src="img/9.jpg"/><br />
<img src="img/10.jpg"/>
<img src="img/11.jpg"/>
<img src="img/12.jpg"/>
<img src="img/13.jpg"/>
</body>
</html>