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>

  • 相关阅读:
    spring 事物(一)—— 事物详解
    XMPP即时通讯协议使用(十一)——Openfire表结构汇总
    java 关键字汇总
    基于数据库的分布式锁实现
    hibernate 参数一览
    数据库并发及锁机制及Hibernate锁实现
    redis 分布式锁的正确实现方式
    支持跨域的html元素
    九度OJ 上剑指 offer 习题目录
    Leetcode: Palindrome Partition I II
  • 原文地址:https://www.cnblogs.com/zhouzhou163/p/6100481.html
Copyright © 2011-2022 走看看