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

<!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;145px;height:44px;}
.alert-warning-box{490px;margin:0 auto;position: relative;}
.alert-warning{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{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{90%;margin:0 auto;}
.alert-waring-foot a{display:inline-block;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;20px;height:20px;opacity:0;right:0; }
.btn{position:absolute;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