如何制作网站右下角弹出广告（附代码）

相信大家都有这样的经历,当我们在打开某一个网站的时候,在电脑屏幕的右下角会弹出来一个小广告窗口。如下图：

这个是如何制作出来的呢?在我们学做网站过程中,也可能在我们自己的网站中做出这样的效果。

方法/步骤

1. 在网页的底部</body>标签上方粘贴以下的HTML代码：（相关教程：什么是HTML?）

   
   <div id="rbbox"><a class="button" onclick="closeBox()">关闭</a><iframe src="https://www.xuewangzhan.net/" frameborder="0" height="200" width="300" scrolling="no"></iframe></div>
   
   

2. 在</body>标签下方，粘贴以下的JS代码：

   
   <script language="javascript" type="text/javascript"> 
   
   window.onload=function(){showBox();setTimeout("closeBox()",5000)} 
   
   function showBox(o){ 
   
   if (o==undefined) o=document.getElementById("rbbox"); 
   
   o.style.height=o.clientHeight+2+"px"; 
   
   if (o.clientHeight<200) setTimeout(function(){showBox(o)},5); 
   
   } 
   
   function closeBox(){document.getElementById("rbbox").style.display="none";} 
   
   </script>
   
   

3. 在网页头部标签</head>上面粘贴以下的CSS样式代码：

   
   <style type="text/css"> 
   
   #rbbox{position:absolute;right:0;bottom:0;width:300px;height:0px;overflow:hidden} 
   
   .button{display:inline;float:right;font-size:12px;cursor:pointer} 
   
   </style>
   
   

4. 这样，网站右下角弹出广告效果就制作好了。