<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>Login</title> <style type="text/css"> html{ width: 100%; height: 100%; overflow: hidden; } body{ width: 100%; height: 100%; font-family: "微软雅黑"; background: #092756; } .login { position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -150px; width:300px; height:300px; } .login h1{ color: #fff; text-shadow: 0 0 10px rgb(0,0,0,0.3); letter-spacing: 1px; text-align: center; } input { width: 100%; margin-bottom: 10px; background: rgba(0,0,0,0.3); border: none; outline: none; padding: 10px; font-size: 13px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3); border-radius: 4px; box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2); } input:focus{ box-shadow: inset 0 -5px 45px rgba(100,100,100,0.3),0 1px 1px rgba(255,255,255,0.2); } .btn{ -webkit-appearance: none; background: #009dff; border: none; border-radius: 2px; color: #fff; cursor: pointer; height: 50px; font-family: 'Open Sans', sans-serif; font-size: 1.2em; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; transition: background 0.3s ease-in-out; width: 320px; } </style> </head> <body> <div class="login"> <h1>Login</h1> <form method="post"> <input type="text" class="user" placeholder="用户名" required="required"/> <input type="password" class="passwd" placeholder="密码" required="required"/> <button type="submit" class="btn">登录</button> </form> </div> </body></html>