当前位置:首页 > 网站应用 > 正文内容

可关闭的活动/通知/广告源代码

cjw1232个月前 (01-22)网站应用810
<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;">2025年1月24日至2025年2月5日充值有活动</span>95折</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>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=141

分享给朋友:
返回列表

上一篇:4K高画质必应每日壁纸获取php源码

没有最新的文章了...

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

css3实现加载动画,边框跑马灯

<style> body{/*让body所有元素正居中*/ display:flex; justify-content:center;/*水平居中*/ align-items: center;/*垂直居中*/ height:100vh;/*不加高,无法垂直居中...

js实现批量生成18位身份证号码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title&g...

js实现鼠标经过列表弹出提示层效果

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋转。通过巧妙地运用CSS的动画属性和变换属性,你可以实现这个效果。首先,使用CSS创建一个心形图案,可以通过调整元素的宽高、边框、背景色等属性来塑造心形的形状。然后...

神经变形跷板

<html> <head>     <meta charset="utf-8">     <title>神经变形跷板</tit...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。