b2主题美化-两款弹窗公告美化

jaysun

公告是网站必不可少,今天分享两款公告样式,一款简约公告,朴素大方,比较干净,一款比较实用,大家可以根据自己实际的需求实用。

效果图:

1.png

Css代码:

隐藏内容
评论可见
前往评论


放入主题的style.css文件中,或自行引入。


效果图二

2.webp.jpg

Css代码:


<div class="web_notice" style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
z-index: 99999;
">
    <div style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
        <h3 style="font-weight: bold;text-align: center;font-size: 30px;">网站通知
            <div style="
		font-size: 16px;
		margin-top: 26px;
		line-height: 30px;
		color: #999;">我是通知的内容,您好...</div>
            <a style="
		display: block;
		background: #98a3ff;
		color: #FFF;
		text-align: center;
		font-weight: bold;
		font-size: 19px;
		line-height: 60px;
		margin: 0 auto;
		margin-top: 45px;
		border-radius: 32px;
		width: 80%;
		" onclick="javascript:document.querySelector('.web_notice').remove()">
                我知道了</a>
    </div>
</div>





您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
评论列表 (有 5 条评论,163人围观)
网友昵称:zkpengg
zkpengg V 普通用户 Google Chrome 109.0.0.0 Windows 10 x64 凉席
今天 来自安徽 回复
看一下
网友昵称:123456
123456 V 普通用户 Google Chrome 86.0.4240.198 Windows 10 x64 板凳
01-13 来自山东 回复
看一下
网友昵称:sunian
sunian V 普通用户 Safari 16.0 Apple iPhone 椅子
2022-12-24 来自山东 回复
看一下
网友昵称:svip
svip V 普通用户 Google Chrome 102.0.0.0 Windows 10 x64 沙发
2022-12-10 来自河南 回复
emmmmm……看不懂怎么破?

目录[+]

取消
微信二维码
微信二维码
支付宝二维码