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

  
  
  
      
      
      

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

Summary:

The code is as follows:

The role of placeholder="username":

Placeholder

##[Related recommendations]

1.

Html free video tutorial

2.

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

3.

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

4.

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

5.

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!