怎么写一个页头广告

效果：

Paste_Image.png Paste_Image.png

html部分：

<!--广告-->
<div class="homeTopAd01" style="position: absolute; left: 50%; margin: 0 0 0 -600px;">
  <div style="margin: 0 auto; width: 1200px;">
      <img src="1.jpg">
  </div>
  <div style="position: absolute; z-index: 1; top: 5px; right:5px">
    <img src="2.png" class="adv-close">
  </div>
</div><!--adv01-->
<div id="homeTopAd02" style="height: 100px;"></div>
<script type="text/javascript">
  $(".adv-close").click(function(){
    $(".homeTopAd01").css("display", "none");
    $("#homeTopAd02").css("display", "none");
  });
</script>
<!--广告end-->

CSS部分：

/*广告*/
.homeTopAd01{
  animation-name: bounceOutDown;
  animation-duration: 1s;
}
@keyframes bounceOutDown{
      0%{
        -webkit-transform:translate3d(0,-999px,0);
            transform:translate3d(0,-999px,0)
      }
      100%{
        -webkit-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0)
        }
      }
/*广告end*/

重点：
1.外层一个div-homeTopAd01用于给广告图片定位
2.div-homeTopAd02用于撑开位置给广告
3.display: none;不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
注：visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。