zoukankan      html  css  js  c++  java
  • 好看的dialog样式

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    .mask{
    100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:1000;
    background:rgba(0,0,0,0.8);
    }
    .dialog{
    260px;
    height:260px;
    margin:-130px 0 0 -130px;
    z-index:1001;
    background:#fff;
    position:absolute;
    left:50%;
    top:50%;
    border-radius:8px;
    }
    .dialog h3{
    font-weight:normal;
    font-size:18px;
    padding-top:5px;
    padding-left:20px;
    border-bottom:1px solid #ddd;
    }
    .icon-box{
    80px;
    height:80px;
    border-radius:45px;
    border-color: #ff9090;
    border:4px solid #f63;
    margin: 15px auto 5px;
    position:relative;
    text-align:center;
    }
    .line1{
    background:#ff9090;
    height:5px;
    position:absolute;
    left:17px;
    top:40px;
    40px;;
    text-align:center;
    margin:0 auto;
    transform:rotate(45deg);
    }
    .line2{
    background:#ff9090;
    height:5px;
    position:absolute;
    left:17px;
    top:40px;
    40px;;
    text-align:center;
    margin:0 auto;
    transform:rotate(-45deg);
    }
    .success{
    text-align:center;
    color:#f00;
    }
    .button{
    margin:20px auto;
    text-align:center;


    }
    button{
    100%;
    height:40px;
    background:#6c3;
    border:none;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    border:1px solid #ddd;
    }
    </style>
    </head>
    <body>
    <div class="mask"></div>
    <div class="dialog">
    <div class="icon">
    <div class="icon-box">
    <div class="line1"></div>
    <div class="line2"></div>
    </div>
    </div>
    <div class="success">操作成功

    </div>
    <div class="button">
    <button>确定</button>
    </div>

    </div>
    </body>
    </html>

  • 相关阅读:
    面试题:JS中map的陷阱
    C#中正则表达式进行忽略大小写的字符串替换
    C#窗体钉在桌面、置底、嵌入桌面的办法
    创建C#串口通信程序详解
    为类和函数代码自动添加版权注释信息
    C# 如何编辑文件的摘要信息
    C# GDI在控件上绘图
    泛型Dictionary的用法详解
    Winform 导出成Excel打印代码
    C#反射深入学习
  • 原文地址:https://www.cnblogs.com/zhouzhou163/p/6100481.html
Copyright © 2011-2022 走看看