<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
#photo{
position: relative;
width: 748px;
height: 590px;
margin: 0 auto;
background: #333333;
}
h1{
position: absolute;
bottom: 10px;
right: 10px;
width: 10px;
height: 10px;
text-align: right;
font: normal 12px/1.5em "宋体";
color: #FFFFFF;
}
ul{
list-style: none;
float: right;
width: 148px;
height: 590px;
list-style: none;
}
li{
float: left;
width: 54px;
height: 54px;
margin: 10px;
display: inline;
overflow: hidden;
}
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;
top:10px;
left: 10px;
margin: 0;
border:2px solid #FFFFFF;
}
</style>
</head>
<body>
<div id="photo">
<h1>简易相册</h1>
<ul>
<li><a href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="2.jpg"></a></li>
<li><a href="#"><img src="3.jpg"></a></li>
<li><a href="#"><img src="4.jpg"></a></li>
<li><a href="#"><img src="5.jpg"></a></li>
<li><a href="#"><img src="6.jpg"></a></li>
<li><a href="#"><img src="7.jpg"></a></li>
<li><a href="#"><img src="8.jpg"></a></li>
<li><a href="#"><img src="9.jpg"></a></li>
</ul>
</div>
</body>
</html>
CSS之简易相册
最新推荐文章于 2023-02-07 00:00:00 发布