学与致用,学了些前端知识自己随便弄了下,和大家分享分享!- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
- <script src="jquery-1.7.1.min.js"></script>
- <script>
- $(document).ready(function(){
- $(".aa").hover(function(){
- $(this).children("div").fadeIn("slow");
- },function(){
- $(this).children("div").fadeOut("slow");
- })
- })
-
- </script>
- <title>无标题文档</title>
- <style>
- .aa:hover{display:block;}
- </style>
- </head>
- <body>
- <div style="width:950px;height:463px;outline:1px dashed #666;margin:0 auto;">
-
- <div class="aa" style="width:228px;height:463px;float:left;position:relative;">
- <img src="T1QiSDXmNAXXXXXXXX.jpg" />
- <div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute; display:none;"></div>
- </div>
-
- <div style="float:left;width:700px;">
- <div style="width:auto;">
- <div class="aa" style="float:left;position:relative;" ><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
- <div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
- <p style="margin:0;padding:0;clear:both;"></p>
- </div>
- <div style="width:auto;">
- <div class="aa" style="float:left;position:relative;"><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
- <div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
- <p style="margin:0;padding:0;clear:both;"></p>
- </div>
- </div>
- <p style="margin:0;padding:0;clear:both;"></p>
-
- </div>
- </body>
- </html>
复制代码 http://bbs.itheima.com/forum.php?mod=attachment&aid=OTMxMnw4MTA4OTM5MmY2N2ZiMTE3YjIzNTM2ZWUxMjVlNjhhMnwxNzM1MTM2ODI0&request=yes&_f=.rar |