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>

  • 相关阅读:
    有趣的机器学习视频-第四章.强化学习
    有趣的机器学习视频-第五章.进化算法
    有趣的机器学习视频-第二章.人工神经网络
    有趣的机器学习视频-第三章.如何评价/检验神经网络
    有趣的机器学习视频-第一章.什么是机器学习
    AlphaStar
    AlphaZero
    AlphaGo分析
    nfs自动挂载
    postfix简单记录
  • 原文地址:https://www.cnblogs.com/zhouzhou163/p/6100481.html
Copyright © 2011-2022 走看看