简易的电子相册

来源:互联网 发布:网络扎金花 编辑:程序博客网 时间:2024/04/30 03:52

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{
 margin:0;
 }
#d1{
 position:relative;
 width:748px;
 height:590px;
 background:#333333;
 margin:0 auto;
 }
ul{
 list-style:none;
 width:148px;
 height:590px;
 float:right;
 }
li{
 float:left;
 width:54px;
 height:54px;
 overflow:hidden;
 margin:10px;
 }
li a{
 display:block;
 width:50px;
 height:50px;
 overflow:hidden;
 border:2px solid #cccccc;
 }
img{
 display:block;
 border:0 none;
 margin:-150px 0 0 -80px;
 }
li a:hover{
 border:2px solid #000000;
 }
li a:hover img{
 position:absolute;
 top:10px;
 left:10px;
 margin:0;
 border:2px solid #ffffff;
 width:460;
 height:380;
 }
</style>
</head>

<body>
<div id="d1">
   <ul>
     <li><a href="#"><img src="p1.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p2.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p3.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p4.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p5.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p6.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p7.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p8.jpg" width="560" height="480"></a></li>
     

     <li><a href="#"><img src="p9.jpg" width="560" height="480"></a></li>
     <li><a href="#"><img src="p10.jpg" width="560" height="480"></a></li>
   </ul>
</div>
</body>
</html>