zoukankan      html  css  js  c++  java
  • 作着玩:登录页(纯css,不支持ie9以下)

     支持chrome FireFox 和 IE10+,(IE9也能显示,IE9以下不支持) 

    <style type="text/css">
    body{position:relative;}
    #login{position:relative;width:500px;margin:0 auto;box-shadow:2px 0px 10px rgba(0,0,0,0.5);border-radius:16px;}
    .login-bg{position:absolute;width:1000px;height:190px;left:-250px;right:-250px;top:70px;background:#76ceff;z-index:-1;}
    
    .login-head{box-sizing:border-box;width:100%;height:35px;border:1px solid #0f80c2;border-top-left-radius:16px;border-top-right-radius:16px;z-index:1;}
    .login-head-in{box-sizing:border-box;width:100%;height:33px;border:1px solid #5bcefd;border-top-left-radius:16px;border-top-right-radius:16px;
        background:#1ab4f2;
        background:linear-gradient(0deg,#1ab4f2 0,#0592e2 45%,#14a3ef 50%,#02b4fe 100%);
        }
    .login-body{box-sizing:border-box;width:100%;height:260px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;
        padding:50px;text-align:center;font-size:16px;z-index:1;
        background:#ecf9ff;
        background:radial-gradient( #fff 25%, #c6eaf8 100%);
        }
    .login-body label{font-family: "微软雅黑";font-size:16px;margin-right:0.5em;}
    .input32{height:32px;box-sizing:border-box;font-family: "微软雅黑";font-size:16px;line-height:20px;padding:5px 10px;border:1px solid #d0d0d0;}
    .button32{height:32px;box-sizing:border-box;font-family: "微软雅黑";font-size:16px;line-height:20px;padding:5px 10px;border:1px solid #5fcffd;
        border-radius:5px;color:#FFF;text-shadow:2px 0px 4px #0c7dc1;text-shadow: 0px 0px 3px #094568;cursor:pointer;
        background:#1ab4f2;
        background:linear-gradient(0deg,#1ab4f2 0,#0592e2 45%,#14a3ef 50%,#02b4fe 100%);
        }
    .button32-box{display:inline-block;border:1px solid #0c7dc1;border-radius:5px;}
    </style>
    </head>
    <body>
    
    <h2>支持chrome FireFox 和 IE10+,(IE9也能显示,IE9以下不支持)</h2>
    <div id="login">
        <div class="login-bg"></div>
        <div class="login-head">
            <div class="login-head-in"></div>
        </div>
        <div class="login-body">
            <p><label>用户</label><input type="text" name="" class="input32"></p>
            <p><label>密码</label><input type="text" name="" class="input32"></p>
            <div class="button32-box"><input type="submit" name="" value="登录" class="button32"></div>
        </div>
    </div>
  • 相关阅读:
    关于效应量
    sc 与 net 命令
    隐函数求导
    关于向量空间的基本性质,与子空间的最最基本性质
    生成随机数(C++)
    关于 setw() 函数(C++)
    关于 加减乘除 基本运算的性质
    为什么文件无法用wps打开,甚至wps.exe本身都无法打开?
    with open()函数中,如何在文件名设置中引用变量(python)
    pygame 运行心理学问卷
  • 原文地址:https://www.cnblogs.com/qq21270/p/4048689.html
Copyright © 2011-2022 走看看