Html makes a simple and beautiful login page

Html makes a simple and beautiful login page

Let’s take a look first.

HTML source code:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. < head >   
  4.      < meta   charset = "UTF-8" >   
  5.      < title > Login </ title >   
  6.      < link   rel = "stylesheet"   type = "text/css"   href = "Login.css" />   
  7. </ head >   
  8. < body >   
  9.      < div   id = "login" >   
  10.          < h1 > Login </ h1 >   
  11.          < form   method = "post" >   
  12.              < input   type = "text"   required = "required"   placeholder = "username"   name = "u" > </ input >   
  13.              < input   type = "password"   required = "required"   placeholder = "password"   name = "p" > </ input >   
  14.              < button   class = "but"   type = "submit" > Login </ button >   
  15.          </ form >   
  16.      </ div >   
  17. </ body >   
  18. </ html >   

CSS code:

CSS CodeCopy content to clipboard
  1. html{
  2.      width : 100%;
  3.      height : 100%;
  4.      overflow : hidden ;
  5.      font-style : sans-serif ;
  6. }
  7. body{
  8.      width : 100%;
  9.      height : 100%;
  10.      font-family : 'Open Sans' , sans-serif ;
  11.      margin : 0;
  12.      background-color : #4A374A ;
  13. }
  14. #login {
  15.      position : absolute ;
  16.      top : 50%;
  17.      left :50%;
  18.      margin : - 150px 0 0 - 150px ;
  19.      width : 300px ;
  20.      height : 300px ;
  21. }
  22. #login h1{
  23.      color : #fff ;
  24.      text-shadow :0 0 10px ;
  25.      letter-spacing : 1px ;
  26.      text-align : center ;
  27. }
  28. h1{
  29.      font-size : 2em;
  30.      margin : 0.67em 0;
  31. }
  32. input{
  33.      width : 278px ;
  34.      height : 18px ;
  35.      margin-bottom : 10px ;
  36.      outline : none ;
  37.      padding : 10px ;
  38.      font-size : 13px ;
  39.      color : #fff ;
  40.      text-shadow : 1px   1px   1px ;
  41.      border-top : 1px   solid   #312E3D ;
  42.      border-left : 1px   solid   #312E3D ;
  43.      border-right : 1px   solid   #312E3D ;
  44.      border-bottom : 1px   solid   #56536A ;
  45.      border -radius: 4px ;
  46.      background-color : #2D2D3F ;
  47. }
  48. .but{
  49.      width : 300px ;
  50.      min-height : 20px ;
  51.      display : block ;
  52.      background-color : #4a77d4 ;
  53.      border : 1px   solid   #3762bc ;
  54.      color : #fff ;
  55.      padding : 9px   14px ;
  56.      font-size : 15px ;
  57.      line-height : normal ;
  58.      border -radius: 5px ;
  59.      margin : 0;
  60. }

Summarize:

Copy code
The code is as follows:
<input type="text" required="required" **placeholder="Username"** name="u"></input>
<input type="password" required="required" **placeholder="password"** name="p"></input>

The role of placeholder="user name": placeholder

The above is the full content of this article. I hope it will be helpful for everyone’s study.

<<:  Detailed steps to install Nginx on Linux

>>:  How to locate MySQL slow queries

Recommend

Beginners understand MySQL deadlock problem from source code

After many difficult single-step debugging late a...

Detailed explanation of Docker usage under CentOS8

1. Installation of Docker under CentOS8 curl http...

What is HTML?

History of HTML development: HTML means Hypertext...

Summary of experience in using div box model

Calculation of the box model <br />Margin + ...

Vue uses ECharts to implement line charts and pie charts

When developing a backend management project, it ...

mysql5.7.19 winx64 decompressed version installation and configuration tutorial

Recorded the installation tutorial of mysql 5.7.1...

Mini Programs use Mini Program Cloud to implement WeChat payment functions

Table of contents 1. Open WeChat Pay 1.1 Affiliat...

Share 13 excellent web wireframe design and production tools

When you start working on a project, it’s importa...

Tutorial on how to remotely connect to MySQL database under Linux system

Preface I recently encountered this requirement a...

Solution to 2059 error when connecting Navicat to MySQL

Recently, when I was learning Django, I needed to...

Detailed explanation of the application of meta tags in mobile platform development

Everyone is familiar with the meta tag in desktop...

React Hook usage examples (6 common hooks)

1. useState: Let functional components have state...

Examples of using provide and inject in Vue2.0/3.0

Table of contents 1. What is the use of provide/i...

Do you know how to use vue-cropper to crop pictures in vue?

Table of contents 1. Installation: 2. Use: 3. Bui...

Detailed explanation of using javascript to handle common events

Table of contents 1. Form events 2. Mouse events ...