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