标签：html5 图片 html javascript css
<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{margin:0px;}
#imgList{width:989px;height:370px;}
#imgList .box1{width:325px;height:370;
float:left;margin-right:4px;}
#imgList .box1 .top{width:325px;height:244px;margin-bottom:4px;}
#imgList .box1 .bottom1{width:161px;height:120px;
float:left;}
#imgList .box1 .bottom2{width:161px;height:120px;
float:right;}
#imgList .box1 .common{position:relative;}
#imgList .box1 .common p{width:100% ; height:0px;overflow:hidden;
background:rgba(0,0,0,0.5);position:absolute;left:0px ;
bottom:0px;text-align:center;padding-top:0px;}
</style>
</head>
<body >
<div id="imgList">
<div class="box1">
<div class="top common">
<img src="images/pic1.jpg"/>
<p><img src="images/button.png"></p>
</div>
<div class="bottom1 common">
<img src="images/pic4.jpg"/>
<p><img src="images/button.png"></p>
</div>
<div class="bottom2 common">
<img src="images/pic5.jpg"/>
<p><img src="images/button.png"></p>
</div>
</div>
<div class="box1">
<div class="top common">
<img src="images/pic2.jpg"/>
<p><img src="images/button.png"></p>
</div>
<div class="bottom1 common">
<img src="images/pic7.jpg"/>
<p><img src="images/button.png"></p>
</div>
<div class="bottom2 common">
<img src="images/pic6.jpg"/>
<p><img src="images/button.png"></p>
</div>
</div>
<div class="box1">
<div class="top common">
<img src="images/pic3.jpg"/>
<p><img src="images/button.png"></p>
</div>
<div class="bottom1 common ">
<img src="images/pic8.jpg"/>
<p><img src="images/button.png"></p>
</div>
<div class="bottom2 common">
<img src="images/pic9.jpg"/>
<p><img src="images/button.png"></p>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
$("#imgList .box1 .common").hover(
function(){
$(this).find("p").stop().animate(
{height:"27px",paddingTop:"6px"},500);
},function(){
$(this).find("p").stop().animate(
{height:"0px",paddingTop:"0px"},500);
}
);
</script>
</body>
</html>
</strong>
标签：html5 图片 html javascript css
原文地址：http://blog.csdn.net/u012651389/article/details/43941331
