先來看看樣子。

html源碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title Login /title  link rel= stylesheet type= text/css href= Login.css /  /head  body  p id= login  h1 Login /h1  form method= post  input type= text required= required placeholder= 用戶名 name= u /input  input type= password required= required placeholder= 密碼 name= p /input  button >
css代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
html{  width: 100%;  height: 100%;  overflow: hidden;  font-style: sans-serif; body{  width: 100%;  height: 100%;  font-family: Open Sans ,sans-serif;  margin: 0;  background-color: #4A374A; #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;  letter-spacing: 1px;  text-align: center;  font-size: 2em;  margin: 0.67em 0; input{  width: 278px;  height: 18px;  margin-bottom: 10px;  outline: none;  padding: 10px;  font-size: 13px;  color: #fff;  text-shadow:1px 1px 1px;  border-top: 1px solid #312E3D;  border-left: 1px solid #312E3D;  border-right: 1px solid #312E3D;  border-bottom: 1px solid #56536A;  border-radius: 4px;  background-color: #2D2D3F; .but{  width: 300px;  min-height: 20px;  display: block;  background-color: #4a77d4;  border: 1px solid #3762bc;  color: #fff;  padding: 9px 14px;  font-size: 15px;  line-height: normal;  border-radius: 5px;  margin: 0; }
總結(jié)：
復(fù)制代碼
代碼如下:
 input type= text required= required **placeholder= 用戶名 ** name= u /input  input type= password required= required **placeholder= 密碼 ** name= p /input 
placeholder= 用戶名 的作用:占位符
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)推薦：
向HTML中插入視頻并兼容所有瀏覽器的方法
以上就是Html制作簡單而漂亮的登錄頁面的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。