這篇文章主要為大家詳細介紹了Html製作簡單而漂亮的登入頁面具體程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下

先來看看樣子。

html原始碼：

1.   
     
     
         
         
         
   
     
     
       
     
           
   Login
     
           
     
                 
                 
               登录  
           
     
       
     
     
   

   登入後複製

css程式碼：

CSS Code複製內容到剪貼簿

1. 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;   
   }   
   h1{   
       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;   
   }

   登入後複製

總結：

程式碼如下:

placeholder="用戶名"的作用:佔位符

##

以上是一個用Html製作的漂亮登入頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！