登录页面

    今天经过哥哥的辅导写了一个简单的登录页面。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用户登录</title>
    <style>
    .login{
        width:400px;
            height:240px;
        border: 1px solid #BCE8F1 ;
        background-color: oyster white;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        border-radius: 5px;
    }
    #div1{
        height: 35px;
        background-color: #D9EDF7;
        color: #31708F;
        padding-top: 15px;


    }
    #div2{
        height: 70px;
        padding:5px 10px 5px 5px;
    }
    #div3{
        height: 70px;
        padding:5px 10px 5px 5px;
    }
    #div4{
        height: 50px;
        text-align:right;
        margin-right: 5px;


    }
    .name{
        font-weight: bold;
        padding:5px 0;
    }
    .input{
        width: 100%;
        height:25px;
        border-radius: 6px;
        border: 1px solid #eee;  
    }
    .button{
        background-color: #5CB85C;
        color: white;
        border-radius: 6px;
        border:1px solid #5CB85C;

    }
    </style>        
</head>
<body>

    <div class="login" >
        <div id="div1">专拍管理员登录</div>
        <div id="div2">
            <div class="name">管理员账号</div>
            <div><input class="input" placeholder="管理员账号"></input></div>
        </div>
        <div id="div3">
            <div class="name">管理员密码</div>
            <div><input type="password" class="input" placeholder="管理员密码"></input></div>
        </div>

        <div id="div4"><button class="button">登录</button></div>
    </div>
</body>
</html>

 



你可能感兴趣的:(登录页面)