网站底部悬浮广告可关闭html代码

源码概述：

在访问网站或博客时，偶尔会看到一些弹窗广告。虽然很烦，但有时候还是挺实用的。比如某些促销活动还剩几天的时候，可以在活动结束后投放和关闭这样的广告。感觉这种广告形式挺好的。我自己研究过，也参考了网上的一些内容。最后效果还不错。我喜欢老规矩，在这里收藏下载。

效果

如上图所示，整体广告窗口比较简洁。只是一张照片，一些推广文字，一个关闭按钮和一个链接按钮会一直悬浮在右下角。点击链接按钮【立即购买】进入目标页面，点击右上角的关闭按钮 X 暂时关闭这个广告弹窗，再次刷新或打开时页面会重新出现。实现这个浮动广告窗口的代码很简单，全是HTML 代码，如下:

<code class="code" data-enlighter-language="php" data-enlighter-linenumbers="true" data-enlighter-lineoffset="" data-enlighter-highlight=""><div id="ycxfxxk" style="display: block;max-width: 392px;width: 392px;height: auto;z-index: 1000;border: 5px solid #1abc9c;right: 15px;position: fixed;bottom: 30px;background: #fff;">
<div>
<img src="https://www.huizhanii.com/wp-content/uploads/2023/03/76abb-190823_ecs.png" alt="Download" width="110" height="110" style="float: left;position: absolute;left: -60px;top: -12px;border-radius: 50%;border: 5px solid #1abc9c;background: #fff;" scale="0">
<div style="max-width: 319px;float: right;margin-top: 5px;font-size: 14px;">好消息！阿里云 100%CPU 性能 1 核 2G1M 云服务器仅需 <strong style="color: #f00;">69.86 元/年</strong>，券后价仅需 <strong style="color: #f00;">210 元/3 年</strong>  
<div class="link" style="float: right;"><a href="https://www.aliyun.com/minisite/goods?userCode=bfol0yvy&share_source=copy_link" rel="nofollow noopener" target="_blank"><span style="color: #f00;">【立刻前往了解】</span></a>  
  
<div style="position: absolute;top: -15px;right: -14px;text-align: center;width: 24px;line-height: 16px;background: #fff;color: #1abc9c;border: 3px solid #1abc9c;border-radius: 50%;font-size: 15px; cursor: pointer; padding-bottom: 2px;"><a title="关闭" onclick="this.style.display='none';document.getElementById('ycxfxxk').style.display='none'" href="javascript:void(0)">x</a> 

转载请注明：汇站网 » 网站底部悬浮广告可关闭 html 代码