使用Html制作简单登录页面的方法-html教程-PHP中文网

首页

web前端

html教程

使用Html制作简单登录页面的方法

Jun 14, 2018 am 09:33 AM

html 登录

这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先来看看样子。

html源码：

&lt;!DOCTYPE html&gt;  
&lt;html lang=&quot;en&quot;&gt;  
&lt;head&gt;  
    &lt;meta charset=&quot;UTF-8&quot;&gt;  
    &lt;title&gt;Login&lt;/title&gt;  
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;Login.css&quot;/&gt;  
&lt;/head&gt;  
&lt;body&gt;  
    &lt;p id=&quot;login&quot;&gt;  
        &lt;h1&gt;Login&lt;/h1&gt;  
        &lt;form method=&quot;post&quot;&gt;  
            &lt;input type=&quot;text&quot; required=&quot;required&quot; placeholder=&quot;用户名&quot; name=&quot;u&quot;&gt;&lt;/input&gt;  
            &lt;input type=&quot;password&quot; required=&quot;required&quot; placeholder=&quot;密码&quot; name=&quot;p&quot;&gt;&lt;/input&gt;  
            &lt;button class=&quot;but&quot; type=&quot;submit&quot;&gt;登录&lt;/button&gt;  
        &lt;/form&gt;  
    &lt;/p&gt;  
&lt;/body&gt;  
&lt;/html&gt;

登录后复制

css代码：

html{   
    width: 100%;   
    height: 100%;   
    overflow: hidden;   
    font-style: sans-serif;   
}   
body{   
    width: 100%;   
    height: 100%;   
    font-family: &#39;Open Sans&#39;,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;   
}

登录后复制

总结

代码如下:

&lt;input type=&quot;text&quot; required=&quot;required&quot; **placeholder=&quot;用户名&quot;** name=&quot;u&quot;&gt;&lt;/input&gt; 
&lt;input type=&quot;password&quot; required=&quot;required&quot; **placeholder=&quot;密码&quot;** name=&quot;p&quot;&gt;&lt;/input&gt;

登录后复制

placeholder="用户名"的作用:占位符