<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="keywords" content="网页关键字"/>
        <meta name="description" content="网页简短描述"/>
        <meta name="author" content=""/>
        <title>登陆页面</title>
        <link rel="stylesheet" href="css/Login.css">
    </head>
    <body>
        <h1>标题</h1>
        <div>
        <form class="box" action="主页面.html" method="get">
            <h2>Login</h2>
            <input type="text" name="" placeholder="用户名" />
            <input type="password" name="" placeholder="密码"/>
            <input type="submit" name=""  value="登陆"/>
        </form>
        </div>
        <table cellspacing="0" >
            <tr>
                <td width="350">地址：</td>
                <td width="300">邮编：</td>
                <td >联系我们：1234567890</td>
            </tr>
        </table>    
    </body>
</html>


//                               CSS部分

body{
    margin: 0;
    padding: 0;
    font-family:sans-serif;
    background-image: url(../img/，，，.jpg);
    background-size: cover;
}
h1{
    color: #782da4;
    text-align: center;
    font-family: 仿宋;
    font-weight: 900;
    font-size: 50px;
}
div{
    top: 20%;
    left: 36%;
    opacity: 0.8;     
}
div:hover{
    animation: name 1s linear 0s;
    position: absolute;
    top: 20%;
    left: 28%;
}
.box{
    width: 300px;
    padding: 40px;
    position: absolute;
    top: 20%;
    left: 36%;
    transform: translate (-50%,-50%);
    background: #191919;
    text-align: center;
}
.box h2{
    color: white;
    text-transform: uppercase;
    font-weight:600;
    font-size: 50px;
}
.box input[type="text"],.box input[type="password"]{
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 24px;
    transform: 0.25s;
}
.box input[type="text"]:hover,.box input[type="password"]:hover{
    width: 280px;
    border-color: #2ecc71;
}
.box input[type="submit"]{
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    border: 2px solid #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: white;
    border-radius: 24px;
    transform: 0.25s;
    cursor: pointer;
}
.box input[type="submit"]:hover{
    background: #2ECC71;
}
table{
    color: white;
    position: absolute;
    top: 97%;
    left: 20%;
    background: #191919;
    opacity: 0.8;
}
@keyframes name{
                from{    
                    position: absolute;              
                    top: 20%;
                    left: 36%;
                    }
                50%{                                 
                    top: 20%;
                    left: 32%;                       
                    }
                to{
                    top: 20%;
                    left: 28%;         
                }                
}

图片说明