纯css实现警示框页面（带关闭窗口按钮）

最新推荐文章于 2022-05-20 10:24:00 发布

weixin_30832405

最新推荐文章于 2022-05-20 10:24:00 发布

阅读量329

点赞数

原文链接：http://www.cnblogs.com/ishuanghe/p/5082423.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nopermission</title>
    <style>
        h3{margin:0;padding: 0;}
        a{text-decoration: none;}
        img{display:inline-block;width:145px;height:44px;}
        .alert-warning-box{width:490px;margin:0 auto;position: relative;}
        .alert-warning{width:420px;height:290px;padding:35px;margin:0 auto;border:1px solid silver;box-shadow: 6px 6px 10px silver;}
        .alert-warning-title{color:#2E505B;border-bottom:3px solid #BBCCD8;padding-bottom:6px;padding-top:50px;}
        .alert-warning-content{width:100%;height:94px;line-height:94px;margin-bottom:30px;background:28px 32px/67px 67px no-repeat url(images/warning.jpg);padding-left:110px;}
        .alert-waring-foot{width:90%;margin:0 auto;}
        .alert-waring-foot a{display:inline-block;width:20%;text-align:center;color:#51636D;font-size:12px;float: left;}
        .alert-waring-foot a:hover{color:#1A1F1F;}
        input.cbox:checked ~ div.alert-warning,input.cbox:checked~button.btn{display: none;}
        .cbox{position:absolute;width:20px;height:20px;opacity:0;right:0; }
        .btn{position:absolute;width:20px;height:20px;z-index: -100;right:0;border:0;color:#b2b2b2;font-size:16px;}
    </style>
</head>
<body>
<div class="alert-warning-box">
<input type="checkbox" class="cbox"/>
<button class="btn">X</button>
<div class="alert-warning">
    <img src="images/zjb.png" alt="**"/>
    <h3 class="alert-warning-title">没有权限</h3>
    <div class="alert-warning-content"><b>您没有权限进行该操作</b></div>
    <div class="alert-waring-foot">
        <a href="#">关于**</a>
        <a href="#">营销中心</a>
        <a href="#">合作伙伴</a>
        <a href="#">帮助中心</a>
        <a href="#">诚征英才</a>
    </div>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/ishuanghe/p/5082423.html

weixin_30832405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css实现警示框页面（带关闭窗口按钮）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nopermission</title> <style> h3{margin:0;padding: 0;} a{text-decora...
复制链接

扫一扫