<html>
<!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>
<style type='text/css'>
img{
border:none;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
margin-right:5px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;/*此处使链接变为块状显示，才可以定义宽和高*/
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;/*定义区域外隐藏*/
position:relative;/*相对对位*/
z-index:1; /*Z轴处于1的位置，为鼠标悬浮时做铺垫*/
}
ul#thumbs a img{
float:left;
position:absolute;/*让图像居中显示的定义部分，包括下面top、left的两处定位*/
top:-20px;/**/
left:-50px; /**/
}
ul#thumbs a:hover{ /*此处最为重要，当鼠标移动到图像上时，让图像显示，Z轴位置为1000置于最上面*/
overflow:visible;
z-index:1000;
border:none;
}
</style>
</head>
<body>
<title>无标题文档</title>
<ul id="thumbs">
<li><a href="#"><img src="Penguins.jpg" /></a></li>
<li><a href="#"><img src="Penguins.jpg" /></a></li>
<li><a href="#"><img src="Penguins.jpg" /></a></li>
<li><a href="#"><img src="Penguins.jpg" /></a></li>
<li><a href="#"><img src="Penguinse.jpg" /></a></li>
</ul>
</body></html>
