• 纯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>
  • 相关阅读:
    hdu1003 最大连续子序和
    ACM 线性规划
    ACM 概率&&动态规划
    ACM 数论 质因数分解
    ACM 计数
    ACM 概率
    ACM矩形嵌套问题LIS
    ACM 编辑距离
    ACM线性方程
    ACM 错排
  • 原文地址:https://www.cnblogs.com/ishuanghe/p/5082423.html
Copyright © 2020-2023  润新知