网站都是以营利为目的的，增加广告是非常有必要的，要在不影响用户体念的前提下让广告显眼突出。

所有增加一个可关闭式广告很有必要的。

如上图所示，518主题巴士网站在顶部增加了一个腾讯云服务器的广告，点击右上角的关闭图标可以把广告关闭。

核心代码如下：

<div class="pane">    
<a href="https://www.518theme.com/go/topten"  target="_blank"  rel="nofollow"><div class="click"></div></a>    
<img src="https://www.518theme.com/topad/picture/close.png" alt="delete" class="delete" />    
</div>

需要在头部引入的js

<script type="text/javascript">    
$(document).ready(function(){    
	$(".pane .delete").click(function(){    
		$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");    
	});    
});    
</script>

css引入代码：

@media screen and (max-width: 766px){
    .pane {
    background: url(https://www.518theme.com/topad/picture/wap88.jpg) no-repeat;
    background-size:100% 100%;
    position: relative;
    height: 220px;
    width: 100%;
    display: block;
}
  .pane .delete {
	position: absolute;
	top: 10px;
	right: 10px;
	width:22px;
	cursor: pointer;
}
  .click {
    position: relative;
    height: 180px;
    width: 100%;
    display: block;
}
}
@media screen and (min-width: 767px){

.pane {
    background: url(https://www.518theme.com/topad/picture/88.jpg) no-repeat center;
    position: relative;
    height: 300px;
    width: 100%;
    display: block;
}

.pane .delete {
	position: absolute;
	top: 10px;
	right: 10px;
	width:38px;
	cursor: pointer;
}
  .click {
    position: relative;
    height: 300px;
    width: 100%;
    display: block;
}
}

广告图和关闭广告可以自己替换。

广告图是通过css来控制的，pc端和手机端分别调用不同的广告图片。