<!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" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>
<title>贴图墙</title>
<style type="text/css">
body {
background-color:#e9e9e9;
color:#333;
margin:0;
padding:0;
}
a, a:hover {
color:#333;
text-decoration:none;
}
.box {
width:960px;
height:450px;
margin:30px auto 0px;
font:0.75px;
position:relative;
background-color:#F90;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.pic {
display:block;
padding:10px 10px 15px;
text-align:center;
background:white;
border:1px solid #bfbfbf;
-webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
-moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
box-shadow:2px 2px 3px rgba(135,139,144,0.4);
/* For IE 8 */
-webkit-transition:all 0.5s ease-in;
position:absolute;
z-index:1;
}
.pic img {
display:block;
margin-bottom:10px;
border:0;
}
.pic:hover, .pic:focus, .pic:active {
border-color:#9a9a9a;
-webkit-transform:rotate(0deg) scale(1.05);
-moz-transform:rotate(0deg) scale(1.05);
transform:rotate(0deg) scale(1.05);
z-index:2;
-webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
-moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
.pic1 {
bottom: 10px;
left: 100px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.pic2 {
top: 50px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.pic3 {
left: 350px;
top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.pic4 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.pic5 {
bottom: 0;
right: 0;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.pic6 {
bottom: 60px;
right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.pic7 {
bottom:0;
left:400px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.pic8 {
bottom: -20px;
left: 700px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.pic9 {
top: 50px;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.pic10 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.gradient1 {
width:300px;
height:100px;
background:-webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background:-moz-linear-gradient(top, reb, blue);
}
.gradient2 {
background:white; /* 为较旧的或者不支持的浏览器设置备用属性 */
/* background: -moz-linear-gradient(top, #dedede, white 8%);*/
background: -moz-linear-gradient(top, #dedede, white 20%, red 30%);
/* background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(20%, white), color-stop(30%, red));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */
border-top: 10px solid white;
width:300px;
height:100px;
}
.bordercolor {
width:300px;
height:100px;
border: 8px solid #555;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
}
.button {
width: 120px;
height: 30px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;
/* Label */
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.aqua {
background-color: rgba(60, 132, 198, 0.8);
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
/* for FF 3.6 */
background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
}
.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
</style>
<script>
$(function(){
var pics = "";
for(var i=1; i<10;i++){
var random_width = 100 +106*Math.random();
pics += '<a href="#" class="pic pic'+i+'"><img style="min-height:75px;" width="'+random_width+'" src="img/'+i+'.jpg" />图片'+i+'</a>';
}
$("#photo").html(pics);;
})
</script>
</head>
<body>
<div class="box">
<div id="photo"></div>
</div>
<div class="gradient1">fh</div>
<div class="gradient2">sdgsdg</div>
<div class="bordercolor"></div>
<div class="button aqua">
<div class="glare">按钮</div>
</div>
</body>
</html>