这篇文章主要为大家详细介绍了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中文网其他相关文章！