css二级相册,利用css制作简易相册

简易css相册 by linxz http://www.linxz.cn

* {margin:0;padding:0;}

ul {width:148px;height:590px;float:right;list-style:none;}

li {width:54px;height:54px;float:left;margin:10px;display:inline;overflow:hidden;}

li a {width:50px;height:50px;display:block;overflow:hidden;border:2px solid #ccc;}

img {display:block;overflow:hidden;border:none;margin:-150px 0 0 -80px;} /* margin的负值是控制图片显示小图的大概位置 */

/* 主要针对IE6的a:hover的BUG */

li a {position:static;}

li a:hover {border:2px solid #000;}

/* 主要针对IE6的a:hover的BUG end */

li a:hover img {margin:0;position:absolute;top:10px;left:10px;border:2px solid #fff;}

#photo {width:748px;height:590px;margin:0 auto;position:relative;background:#333;}

h1 {width:100px;height:20px;position:absolute;bottom:20px;right:10px;text-align:right;font:normal 12px/1.5em "宋体";color:#fff;}

p {width:100px;height:20px;position:absolute;bottom:0;right:10px;text-align:right;font:normal 12px/1.5em Verdana;color:#fff;}

简易css相册

by linxz

• 

• 

• 

• 

• 

• 

• 

• 

•