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

Docker uses root to enter the container

First run the docker container Run the command as...

MySQL Quick Data Comparison Techniques

In MySQL operation and maintenance, a R&D col...

Ant designing vue table to achieve a complete example of scalable columns

Perfect solution to the scalable column problem o...

Design sharing of the download page of the Pengyou.com mobile client (picture and text)

Let's first look at some simple data: Accordin...

jQuery implements simple pop-up window effect

This article shares the specific code of jQuery t...

Element sample code to implement dynamic table

Table of contents 【Code background】 【Code Impleme...

Implementation steps for enabling docker remote service link on cloud centos

Here we introduce the centos server with docker i...

A brief discussion on JS regular RegExp object

Table of contents 1. RegExp object 2. Grammar 2.1...

js to write the carousel effect

This article shares the specific code of js to ac...

Service management of source package installation under Linux

Table of contents 1. Startup management of source...

MySQL 8.0.15 installation and configuration graphic tutorial under Win10

This article records the installation and configu...

js date and time formatting method example

js date time format Convert the date and time to ...

Installation and usage analysis of Portainer, a visual UI management tool for Docker

Portainer is an excellent Docker graphical manage...

Detailed explanation of browser negotiation cache process based on nginx

This article mainly introduces the detailed proce...

What are the file attributes of crw, brw, lrw, etc. in Linux?

What is a file? All files are actually a string o...