<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位练习</title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;}
.bg{display:block;width:220px;height:220px;padding:4px;background:#ddd;position:relative;margin:50px 0 0 50px;float:left;}
.bg span{display:block;width:25px;height:25px;background:url(images/tu.gif) no-repeat left bottom;position:absolute;left:20px;bottom:20px;}
.bg p{display:none;width:226px;height:226px;padding:6px;background:#fff url(images/logo.gif)no-repeat 10px 10px;border:1px solid #6E939C;position:absolute;left:0;top:0;filter:alpha(opacity=50);opacity:.5;text-indent:40px;line-height:34px;color:#333;}
.bg:hover span{background:url(images/tu2.gif)no-repeat left bottom;}
.bg:hover p{display:block;}
</style>
</head>
<body>
<a class="bg" href="#"><img src="images/img01.jpg"/>
<span></span>
<p>中国动物搞笑排行榜：第一名
第一名第一名</p>
</a>
<a class="bg" href="#"><img src="images/img02.jpg"/>
<span></span>
<p>中国动物搞笑排行榜：第一名
第一名第一名</p>
</a>
<a class="bg" href="#"><img src="images/img03.jpg"/>
<span></span>
<p>中国动物搞笑排行榜：第一名
第一名第一名</p>
</a>
</body>
</html>
