Html completes a simple login page-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Html completes a simple login page

May 24, 2017 am 09:17 AM

html Log in

This article mainly introduces in detail the specific code for making a simple and beautiful login page in Html. It has certain reference value. Interested friends can refer to it.

Let’s take a look first.

html source code:

##XML/HTML CodeCopy content to clipboard

&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;

Copy after login

css code:

CSS CodeCopy content to clipboard Board

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;   
}

Copy after login

Summary:

The code is as follows:

&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;

Copy after login

The role of placeholder="username":

Placeholder

##[Related recommendations]

Html free video tutorial

Detailed explanation of commonly used HTML tags in front-end development

Pure html code to complete the scrolling effect through the marquee tag

html Detailed explanation of an example of using Mailto to implement email sending function

The order in which the browser loads and renders HTML

The above is the detailed content of Html completes a simple login page. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn