阿里云服务器

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

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

20191018085017.jpg

如上图所示,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端和手机端分别调用不同的广告图片。

相关阅读:
  • 去掉织梦网站index.html的简便方法
  • 使用Editplus批量搜索文件字符串的技巧
  • 网站正在建设中提示页设置方法
  • 用宝塔设置网站301重定向的方法
  • 网站调用百度地图无法显示内容的解决方法
  • 忘记linux系统宝塔用户名和密码的解决方法