一个可关闭的,可用于显示活动、通知、广告等的HTML

一个可关闭的,可用于显示活动、通知、广告等的HTML

这是在一个网站上看到的,感觉不错,以后可能有用,就扒下来了,就一个横幅显示。已经被我扒到一个静态html文件中了。示例如下:

图片[1]-一个可关闭的,可用于显示活动、通知、广告等的HTML-北冥博客

代码如下:

<style>
.sitetips-default{background: #fff3e9;border: 1px solid #fcecdf;position: fixed;bottom: 20px;left:0;right: 0;z-index: 1000;width: 70%;max-width:1000px;border-radius: 3px;font-size: 15px;display: none;padding:14px 35px 12px;color:#f58b36;margin:0 auto;}
.sitetips-default .close{position:absolute;top:calc(50% - 12px);right:15px;color:#FF7C3C !important;text-decoration: none;height: 24px;line-height: 24px;}
.sitetips-default .close .icon{font-size:24px;top:-1px;}
.sitetips-default a{padding:0 !important;background:transparent !important;color:var(--theme-color) !important;text-decoration: underline;}
.sitetips-default .btn{padding:6px 12px !important;background: var(--theme-color) !important;color:#fff !important;border-radius: 20px;font-size:12px;display: inline-block;text-decoration: none;line-height: 1;}
.sitetips-default{width: 90%;text-align: left;font-size: 14px;padding:15px;right: 0;left: 0;bottom: 50px;}
.sitetips-default .close{right:calc(50% - 12px);bottom:-30px;top:inherit;font-size:28px;}
</style>

<div class="sitetips sitetips-default" style="display: block;" id="sitetips">
 <span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">为祖国庆生,为今朝华夏喝彩,愿祖国国泰民安,愿全球华人幸福安康!</span>
<strong><span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">国庆节10月1日-7日限时优惠,全站八五折(包括VIP),优惠码:</span>dt85</strong><a href="javascript:;" class="close" id="close">×</i></a>
</div>
<script type="text/javascript">
window.onload=function(){
    var wenzi=document.getElementById('close');
    var div=document.getElementById('sitetips');
    wenzi.onfocus=function(){
            if(div.style.display=='block'){ // == 判断div.display是否为显示
                    div.style.display='none'; //= 赋值也可了解成改变
                }
                else{
                    div.style.display='block';
                }
        }
}; 
</script>
温馨提示:本文最后更新于2023-01-15,若文件或内容有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞16赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容