照片墙

重置：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img { 
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

@import url('reset.css');
body{
background:#f7f7f7 url(../images/pinstripe.gif) repeat top left;
color:#000;
font-family: Georgia, "Times New Roman",sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
header h1{
margin:10px 0 0 20px;
font-size:100px;
text-transform:uppercase;
text-shadow:0px 0px 1px #fff;
color:#444;
font-family: 'Wire One', arial, serif; 
}
header span{
font-style:italic;
margin:-10px 0 10px 188px;
display:block;
color:#555;
text-shadow:1px 1px 1px #fff;
}
.iw_wrapper{
width:70%;
margin:30px auto 100px auto;
position:relative;
}
ul.iw_thumbs li{
float:left;
margin:5px;
}
ul.iw_thumbs li div{
position:absolute;
top:5px;
width:180px;
padding:0px 10px;
display:none;
color:#fff;
z-index:100;
}
ul.iw_thumbs li div h2{
font-family: 'Wire One', arial, serif;
font-size:38px;
text-transform:uppercase;
text-shadow:0px 0px 1px #fff;
}
ul.iw_thumbs li div p{
font-size:11px;
line-height:16px;
font-style:italic;
}
ul.iw_thumbs li:nth-child(1){
margin-left:50px;
}
ul.iw_thumbs li:nth-child(even){
margin-top:30px;
}
ul.iw_thumbs li:nth-child(3n){
margin-left:20px;
}
ul.iw_thumbs li img{
border:7px solid #fff;
cursor:pointer;
position:relative;
-moz-box-shadow:1px 1px 1px #aaa;
-webkit-box-shadow:1px 1px 1px #aaa;
box-shadow:1px 1px 1px #aaa;
}
ul.iw_thumbs li img:hover{
-moz-box-shadow:1px 1px 7px #777;
-webkit-box-shadow:1px 1px 7px #777;
box-shadow:1px 1px 7px #777;
}
ul.iw_thumbs li:nth-child(even) img{
height:20px;
}
ul.iw_thumbs li:nth-child(odd) img{
height:40px;
}
ul.iw_thumbs li:nth-child(5n) img{
height:70px;
}
ul.iw_thumbs li:nth-child(6n) img{
height:110px;
}
ul.iw_thumbs li:nth-child(7n) img{
height:20px;
}
.iw_ribbon{
position:fixed;
height:126px; /*first 126 then 0 to close and 100% to open (while top goes to 0) */
width:0px;/*first 0 then animate to 100%*/
left:0px;/*or right 0*/
top:0px; /*First, top of thumb, then animate to 0*/
background:#000;
opacity:0.8;
z-index:10;
overflow:hidden;
display:none;
}
.iw_close{
position:absolute;
top:10px;
right:10px;
background:#f0f0f0 url(../images/close.gif) no-repeat center center;
width:18px;
height:18px;
display:none;
cursor:pointer;
}
.iw_zoom{
color:white;
font-size:8px;
font-family:Arial, sans-serif;
text-transform:uppercase;
padding:14px;
display:none;
float:right;
margin-right:30px;
}
.iw_ribbon img{
position:absolute;
top:50%;
left:50%;
border:7px solid #fff;
}
.iw_loading{
background: #fff url(../images/loader.gif) no-repeat center center;
width:28px;
height:28px;
position: absolute;
top: 50%;
left: 50%;
z-index: 10000;
margin: -14px 0px 0px -14px;
opacity:0.8;
}
/* Footer Style */
.footer{
position:fixed;
bottom:0px;
left:0px;
width:100%;
font-size:13px;
background:#000;
opacity:0.9;
height:20px;
padding-bottom:5px;
text-transform:uppercase;
font-family: 'PT Sans Narrow', Arial, sans-serif;
z-index:4;
}
.footer a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
float:right;
}
.footer a:hover{
color:#fff;
}
.footer a span{
font-weight:bold;
}
.footer a.left{
float:left;

　　

}

转载于:https://www.cnblogs.com/vivi-lxm/p/4958563.html