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

Detailed explanation of MySQL user rights management

Table of contents Preface: 1. Introduction to Use...

Nginx rush purchase current limiting configuration implementation analysis

Due to business needs, there are often rush purch...

Analyze the role of rel="nofollow" in HTML and the use of rel attribute

Adding the rel="nofollow" attribute to ...

js+canvas realizes code rain effect

This article shares the specific code of js+canva...

Summary of Vue's common APIs and advanced APIs

Table of contents nextTick Mixins $forceUpdate se...

How to permanently change the host name in Linux

If you want to change your host name, you can fol...

Detailed explanation of the frame and rules attributes of the table in HTML

The frame and rules attributes of the table tag c...

Linux checkup, understand your Linux status (network IO, disk, CPU, memory)

Table of contents 1. Core commands 2. Common comm...

A Different Kind of "Cancel" Button

The “Cancel” button is not part of the necessary ...

Detailed discussion of MySQL stored procedures and stored functions

1 Stored Procedure 1.1 What is a stored procedure...

What qualities should a good advertisement have?

Some people say that doing advertising is like bei...

Detailed explanation of formatting numbers in MySQL

Recently, due to work needs, I need to format num...

Simple comparison of meta tags in html

The meta tag is used to define file information an...

Learn the common methods and techniques in JS arrays and become a master

Table of contents splice() Method join() Method r...

Tutorial on downloading, installing, configuring and using MySQL under Windows

Overview of MySQL MySQL is a relational database ...