<!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>
<style type="text/css">
body { background:#fffurl(images/bg3.JPG); }
ul.polaroids li { display: inline; }
ul.polaroids a {
background: #fff;
display: inline;
float: left;
margin: 0 0 27px30px;
width: auto;
padding: 10px 10px15px;
text-align: center;
font-family: "MarkerFelt",sans-serif;
text-decoration: none;
color: #333;
font-size: 18px;
-webkit-Box-shadow: 0 3px6px rgba(0,.25);
-moz-Box-shadow: 0 3px6px rgba(0,.25);
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform.15s linear;
-moz-transform: rotate(-2deg);
}
ul.polaroids img {
display: block;
height: 100px;
margin-bottom: 12px;
}
ul.polaroids a:after { content: attr(title); }
ul.polaroids li:nth-child(even)a {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
}
ul.polaroids li:nth-child(2n)a {
position: relative;
top: -5px;
-webkit-transform: none;
-moz-transform: none;
}
ul.polaroids li:nth-child(3n)a {
position: relative;
right: 5px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
ul.polaroids li:nth-child(4n)a {
position: relative;
right: 5px;
top: 8px;
}
ul.polaroids li:nth-child(5n)a {
position: relative;
left: -5px;
top: 3px;
}
ul.polaroids lia:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-Box-shadow: 0 3px6px rgba(0,.5);
-moz-Box-shadow: 0 3px6px rgba(0,.5);
position: relative;
z-index: 5;
}
</style>
</head>
<body>
<ul class="polaroids">
<li> <a href="1" title="相识"> <img src="images/11.jpg" alt="相识" /> </a> </li>
<li> <a href="2" title="凝视"> <img src="images/22.jpg" alt="凝视" /> </a> </li>
<li> <a href="3" title="甜睡"> <img src="images/33.jpg" alt="甜睡" /> </a> </li>
<li> <a href="4" title="逗乐"> <img src="images/44.jpg" alt="逗乐" /> </a> </li>
<li> <a href="5" title="奔跑"> <img src="images/55.jpg" alt="奔跑" /> </a> </li>
<li> <a href="6" title="漠视"> <img src="images/66.jpg" alt="漠视" /> </a> </li>
<li> <a href="7" title="险峰"> <img src="images/image-07.jpg" alt="险峰" /> </a> </li>
<li> <a href="8" title="胜景"> <img src="images/image-08.jpg" alt="胜景" /> </a> </li>
</ul>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
