您的位置：首页 > 编程语言

照片墙代码

2015-11-18 10:11 465 查看 
<!DOCTYPE html><!--STATUS OK-->
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
background:#fff;
}
ul.polaroids li{
display: inline;
}
ul.polaroids a{
background: #fff;
display: inline;
float: left;
margin: 0 0 27px 30px;
width: auto;
padding: 10px 10px 15px;
text-align: center;
font-family: "Marker Felt", sans-serif;
text-decoration: none;
color: #333;
font-size: 18px;

/*设置阴影  参数1 x轴阴影 x>0在右边 <0在左边 =0两边都有
参数2 y轴阴影 y>0在下面边 <0在上边 =0两边都有
参数3 阴影模糊半径
参数4 颜色   */
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);

-webkit-transitioin:-webkit-transform .15s linear;

-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}

ul.polaroids img{
display: block;
height: 100px;
margin: 0 0 12px 0;
border: none;
}
/*伪类选择器  在元素之后添加内容*/
ul.polaroids a:after{
content: attr(title);
}
ul.polaroids li:nth-child(even) a{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
}
ul.polaroids li:nth-child(3n) a{
position: relative;
top:-5px;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
ul.polaroids li:nth-child(5n) a{
position: relative;
right:5px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
ul.polaroids li:nth-child(8n) a{
position: relative;
right:5px;
top:8px;
}
ul.polaroids li:nth-child(11n) a{
position: relative;
right:-5px;
top:3px;
}
ul.polaroids li a:hover{
/*放大*/
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);

position: relative;
z-index: 5;
}
</style>
</head>
<body>
<ul class="polaroids">
<li><a title="风景1" href="1"> <img src="images/bg.jpg" alt="风景1" /> </a></li>
<li><a title="风景2" href="2"> <img src="images/bg.jpg" alt="风景2" /> </a></li>
<li><a title="风景3" href="3"> <img src="images/bg.jpg" alt="风景3" /> </a></li>
<li><a title="风景4" href="4"> <img src="images/bg.jpg" alt="风景4" /> </a></li>
<li><a title="风景5" href="5"> <img src="images/bg.jpg" alt="风景5" /> </a></li>
<li><a title="风景6" href="6"> <img src="images/bg.jpg" alt="风景6" /> </a></li>
<li><a title="风景7" href="7"> <img src="images/bg.jpg" alt="风景7" /> </a></li>
<li><a title="风景8" href="8"> <img src="images/bg.jpg" alt="风景8" /> </a></li>
<li><a title="风景9" href="9"> <img src="images/bg.jpg" alt="风景9" /> </a></li>
<li><a title="风景10" href="10"> <img src="images/bg.jpg" alt="风景10" /> </a></li>
<li><a title="风景11" href="11"> <img src="images/bg.jpg" alt="风景11" /> </a></li>
<li><a title="风景12" href="12"> <img src="images/bg.jpg" alt="风景12" /> </a></li>
<li><a title="风景13" href="13"> <img src="images/bg.jpg" alt="风景13" /> </a></li>
<li><a title="风景14" href="14"> <img src="images/bg.jpg" alt="风景14" /> </a></li>
<li><a title="风景15" href="12"> <img src="images/bg.jpg" alt="风景15" /> </a></li>
<li><a title="风景16" href="13"> <img src="images/bg.jpg" alt="风景16" /> </a></li>
<li><a title="风景17" href="14"> <img src="images/bg.jpg" alt="风景17" /> </a></li>
<li><a title="风景18" href="12"> <img src="images/bg.jpg" alt="风景18" /> </a></li>
<li><a title="风景19" href="13"> <img src="images/bg.jpg" alt="风景19" /> </a></li>
<li><a title="风景20" href="14"> <img src="images/bg.jpg" alt="风景20" /> </a></li>
<li><a title="风景21" href="12"> <img src="images/bg.jpg" alt="风景21" /> </a></li>
<li><a title="风景22" href="13"> <img src="images/bg.jpg" alt="风景22" /> </a></li>
<li><a title="风景23" href="14"> <img src="images/bg.jpg" alt="风景23" /> </a></li>
</ul>
</body>
</html>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航