zoukankan      html  css  js  c++  java
  • 纯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>
  • 相关阅读:
    99乘法表-利用数组
    100以内素数
    99乘法表
    第6周小组作业:软件测试和评估
    第4周小组作业:WordCount优化
    第2周个人作业:WordCount
    博客阅读和思考
    第一个C#窗体应用程序开发总结-----单号单面法调整单操作程序
    实验十——一维数组的定义及引用
    实验九——基本数据类型存储及应用总结
  • 原文地址:https://www.cnblogs.com/ishuanghe/p/5082423.html
Copyright © 2011-2022 走看看