<!doctype html> <html charset="en"> <head> <meta charset="utf-8"/> <title>你好!音乐</title> <style type="text/css"> body{ white-space:normal; word-break:break-all; overflow:hidden;/** 这几句是对所有的子框都做了处理 **/ text-align:center; } #music{ margin:0 auto; width:800px; height:550px; background-color:#9998; box-shadow: 10px 10px 20px 10px rgba(0,250,154,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5) } #mleft{ width:200px; height:500px; float:left; background-color:rgb(0,191,255); } #mright{ width:600px; height:500px; float:left; background-color:rgb(0,250,154); } #mright .mhead{ width:600px; height:50px; background-color:rgb(0,250,154); } #mright #mbody{ width:600px; height:450px; opacity:1; background-color:rgb(0,250,154); } .footer{ width:800px; height:50px; float:right; background-color:rgb(255,255,0); } #adv{ width:100%; height:50px; background-color:rgb(255,165,0); position:fixed; bottom:0px; right:0px; } </style> </head> <body> <div id="music"> <!-- 左侧 --> <div id="mleft"> </div> <!-- 右侧 --> <div id="mright"> <!-- mhead --> <div class="mhead"> </div> <!-- mbody --> <iframe name="mbody" class="mbody" id="mbody" src="https://www.baidu.com" frameborder="0"> </iframe> </div> <!-- footer --> <div class="footer"> </div> </div> <!-- Advertisement广告 --> <div id="adv"> <a href="https://www.qq.com" target="mbody"> 腾讯网</a> <button id="reduction">还原</button><button id="fullscreen">最大化</button> </div> </body> </html> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script type="text/javascript"> //查看jquery版本，以及是否加载成功，在浏览器调试，控制台输入$.fn.jquery //600px; //height:450px; //opacity:1; //background-color:rgb(0,250,154); $(document).ready(function(){ $("#reduction").click(function(){ $(".mbody").css({"width":"600px","height":"450px","position":"static"}); //下面的fixed的样式也要变 $("#adv").css({"position":"fixed","width":"100%"}); }); $("#fullscreen").click(function(){ $(".mbody").css({"width":$(window).width()+"px","height":$(window).height()+"px","position":"fixed","top":"0px","left":"0px"}); //下面的fixed的样式也要变 $("#adv").css({"float":"left","width":"200px","height":"50px"}); }); }); </script>
效果：
1、原来的大小：
2、最大化
