1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>web设计大本营</title> 5 <style type="text/css"> 6 <!-- 7 html,body {height:100%; margin:0px; font-size:12px;} 8 9 .mydiv { 10 background-color: #FFCC66; 11 border: 1px solid #f00; 12 text-align: center; 13 line-height: 40px; 14 font-size: 12px; 15 font-weight: bold; 16 z-index:99; 17 width: 300px; 18 height: 120px; 19 left:50%;/*FF IE7*/ 20 top:50%;/*FF IE7*/ 21 22 margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */ 23 margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ 24 25 margin-top:0px; 26 27 position:fixed!important;/*FF IE7*/ 28 position:absolute;/*IE6*/ 29 30 _top: expression(eval(document.compatMode && 31 document.compatMode=='CSS1Compat') ? 32 documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 33 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 34 35 } 36 .bg { 37 background-color: #666; 38 width: 100%; 39 height: 100%; 40 left:0; 41 top:0;/*FF IE7*/ 42 filter:alpha(opacity=50);/*IE*/ /*点击后背景透明效果*/ 43 opacity:0.5;/*FF*/ 44 z-index:1; 45 46 position:fixed!important;/*FF IE7，this line code is extremely important*/ 47 position:absolute;/*IE6*/ 48 49 _top: expression(eval(document.compatMode && 50 document.compatMode=='CSS1Compat') ? 51 documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 52 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 53 54 } 55 --> 56 </style> 57 <script language="javascript" type="text/javascript"> 58 function showDiv(){ 59 document.getElementById('popDiv').style.display='block'; 60 document.getElementById('bg').style.display='block'; 61 } 62 63 function closeDiv(){ 64 document.getElementById('popDiv').style.display='none'; 65 document.getElementById('bg').style.display='none'; 66 } 67 68 </script> 69 </head> 70 <body> 71 72 <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你！<br/>Q群号:26868887<br/> 73 <a href="javascript:closeDiv()">关闭窗口</a> 74 </div> 75 76 <div id="bg" class="bg" style="display:none;">5555555555</div> 77 <div> 78 <pre> 春江花月夜 79 唐 张若虚 80 81 春江潮水连海平，海上明月共潮生。 82 83 滟滟随波千万里，何处春江无月明？ 84 </pre> 85 <p><br /> 86 87 88 </p> 89 <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div> 90 91 </body> 92 </html>