一个简单的登录界面 

注意：图片自找

*{
        margin:0;
        padding: 0;
    }
    body{
        background: url(../img/1.jpg);
        background-size: cover;
        background-attachment: fixed;
        background-color: gray; 
    }
    #box{
        
        width: 400px;
        height: 250px;
        margin:200px auto;
        position: relative;
    
    }
    #box h1{
        text-align:center;
        color:#ffffcc;
        left:120px;
        top:40px;
        font-size:30px;
    }
    #box form p{
        text-align: center;
    }
    #user{
        width: 233px;
        height: 30px;
        border:solid lightgray 1px;
        background: lightgray;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    #pwd{
        
        width: 233px;
        height: 30px;
        background: lightgray;
        border:solid lightgray 1px;
        margin-bottom: 30px;
    }
    #submit{
        width: 120px;
        height: 30px;
        background: lightgray;
        border:solid #ccc 1px;
        font-size: 14px;
        
    
    }
    #submit:hover{
        cursor: pointer;
        background:#FFFFCC;
    }
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet"href="css/zuoye.css">
    </head>
    <body>
      <div id="box">
<h1>登录管理</h1>    
    <form method="post">
        <p><input type="text" name="user" id="user" placeholder="用户名"></p>
        <p><input type="password" name="password" id="pwd" placeholder="密码"></p>
        <p><input type="submit" id="submit" value="登录"/>
           <input type="submit" id="submit"value="注册"/>
        </p>
    </form>
</div>
<div style="text-align:center;">
</div>
    </body>
</html>

 

posted on 2018-07-19 20:46  阿衍小同学  阅读(108)  评论(0)    收藏  举报