html+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>
技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。