先来看看样子。
html源码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Login</title> 6 <link rel="stylesheet" type="text/css" href="Login.css"/> 7 </head> 8 <body> 9 <div id="login"> 10 <h1>Login</h1> 11 <form method="post"> 12 <input type="text" required="required" placeholder="用户名" name="u"></input> 13 <input type="password" required="required" placeholder="密码" name="p"></input> 14 <button class="but" type="submit">登录</button> 15 </form> 16 </div> 17 </body> 18 </html>
css代码：
1 html{ 2 100%; 3 height: 100%; 4 overflow: hidden; 5 font-style: sans-serif; 6 } 7 body{ 8 100%; 9 height: 100%; 10 font-family: 'Open Sans',sans-serif; 11 margin: 0; 12 background-color: #4A374A; 13 } 14 #login{ 15 position: absolute; 16 top: 50%; 17 left:50%; 18 margin: -150px 0 0 -150px; 19 300px; 20 height: 300px; 21 } 22 #login h1{ 23 color: #fff; 24 text-shadow:0 0 10px; 25 letter-spacing: 1px; 26 text-align: center; 27 } 28 h1{ 29 font-size: 2em; 30 margin: 0.67em 0; 31 } 32 input{ 33 278px; 34 height: 18px; 35 margin-bottom: 10px; 36 outline: none; 37 padding: 10px; 38 font-size: 13px; 39 color: #fff; 40 text-shadow:1px 1px 1px; 41 border-top: 1px solid #312E3D; 42 border-left: 1px solid #312E3D; 43 border-right: 1px solid #312E3D; 44 border-bottom: 1px solid #56536A; 45 border-radius: 4px; 46 background-color: #2D2D3F; 47 } 48 .but{ 49 300px; 50 min-height: 20px; 51 display: block; 52 background-color: #4a77d4; 53 border: 1px solid #3762bc; 54 color: #fff; 55 padding: 9px 14px; 56 font-size: 15px; 57 line-height: normal; 58 border-radius: 5px; 59 margin: 0; 60 }