一款纯CSS的相册

代码

<!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>rutongnet.com 相册</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:12px; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }
#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}
span{visibility:hidden; position:absolute; overflow:hidden;}
ul,li{ list-style:none; margin:0; padding:0;}
a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px;  z-index:20px; visibility: visible; margin-left:-500px;}
#info img{ width:400px; height:280px; border:7px solid #FFFFFF}
#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}
.b1{ background:url('b1.jpg')
}
.b2{ background:url('b2.jpg')
}
.b3{ background:url('b3.jpg')
}
.b4{ background:url('b4.jpg')
}
.b5{ background:url('b5.jpg')
}
.b6{ background:url('b6.jpg')
}
</style>
</head>
<body>
<div id="info">
  <h3>FLYSO Blog 相册</h3>
  <div id="zs">
    <ul>
      <li><a href="http://www.rutongnet.com" class="b1 z" target="_blank" title="照片1">
      <span><img src="a1.jpg" alt="照片1" /><br />这是照片1<br />www.rutongnet.com</span></a></li>



      <li><a href="http://www.rutongnet.com" class="b2 z" target="_blank" title="照片2"><span>
        <img src="a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.rutongnet.com</span></a></li>
      <li><a href="http://www.rutongnet.com" class="b3 z" target="_blank" title="照片3"><span>
        <img src="a3.jpg" alt="照片3" /><br />
        这是照片3<br />
        www.rutongnet.com</span></a></li>
      <li><a href="http://www.rutongnet.com" class="b4 z" target="_blank" title="照片4"><span>
        <img src="a4.jpg" alt="照片4" /><br />
        这是照片4<br />
        www.rutongnet.com</span></a></li>
      <li><a href="http://www.rutongnet.com" class="b5 z" target="_blank" title="照片5"><span>
        <img src="a5.jpg" alt="照片5" /><br />
        这是照片5<br />
        www.rutongnet.com</span></a></li>
      <li><a href="http://www.rutongnet.com" class="b6 z" target="_blank" title="照片6"><span>
        <img src="a6.jpg" alt="照片6" /><br />
        这是照片6<br />
        www.rutongnet.com</span></a></li>
      <li><a href="http://www.rutongnet.com" class="b1 z" target="_blank" title="照片1"><span>
        <img src="a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.rutongnet.com</span></a></li>
      <li><a href="http://www.rutongnet.com" class="b2 z" target="_blank" title="照片2"><span>
        <img src="a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.rutongnet.com</span></a></li>
    </ul>
  </div>
</div>
</body>
</html>

效果如图：

posted @ 2010-04-03 17:23 ChaunceyHao 阅读(323) 评论(0) 收藏举报

刷新页面返回顶部

一款纯CSS的相册

公告