web Front end landing page production

    The landing page has the system to log in ( website ) Name of , Input the input box of account password , And the landing buttons , The rest can be added at will , But page layout should be reasonable
Title of landmark page
The image before the page input box is a special font , Therefore, you need to import it in the directory where you make the page font-awesome-4.7.0, Implement the font style by calling .

It can be divided into several parts according to the above page :

1. The whole big one is a div Wrap the rest of it ;

2. The name of the login system is a title h1;

3. The two input boxes and buttons are one form; They are also one div;

4. The copyright notice is a label p;

The implementation steps are : Reset first Page default properties (reset.css); Re establishment html(login.html), stay head It says :

<link rel="stylesheet"  href="font-awesome-4.7.0/css/font-awesome.min.css" />

  <link rel="stylesheet" href="css/reset.css"
/>,font-awesome-4.7.0/css/font-awesome.min.css Is import font-awesome-4.7.0 In the catalog css, Again body Middle distribution layout ; Last write layout css(
login.css), Rewrite html Of head in .

reset.css code :
*{ marjn:0; padding: 0; } a{ font-size: 12px; text-decoration: 0; color: #222;
} a, input, buttom{ outline: none; } ul,ol,li{ list-style: none; }
h1,h2,h3,h4,h5,h6{ font-weight: 100; } img{ display: block; border: 0; }
login.html code :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport"
content="width=device-width, initial-scale=1"> <title></title> <link
rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" /> <link
rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet"
href="css/login.css" /> </head> <body> <div class="wrap"> <h1> Science and military management system </h1> <form
action="" method=""> <div class="input-group"> <i class="icon-user fa
fa-user"></i> <input type="text" name="" class="form-control"
placeholder=" Please enter your account number " /> </div> <div class="input-group"> <i class="icon-user fa
fa-lock"></i> <input type="text" name="" class="form-control"
placeholder=" Please input a password " /> </div> <div class="input-group btn-group"> <button
> Button </button> </div> </form> <p>© Kewu group   copyright </p> </div> </body> </html>
login.css code :
body { background: rgba(0, 0, 0, 0.8); } .wrap { position: absolute; left:
50%; top: 50%; margin: -175px 0 0 -250px; padding: 20px; width: 500px; height:
350px; background: rgba(255, 225, 225, 0.8); box-shadow: 0 0 10px rgba(255,
225, 225, 0.5); box-sizing: border-box; } h1 { height: 50px; font-size: 1.6em;
text-align: center; border-bottom: 1px solid rgba(255, 225, 225, 0.5); }
.input-group { margin: 20px auto; height: 40px; width: 300px; border: 1px solid
rgba(0, 0, 0, 0.2); } i { float: left; width: 40px; height: 40px; text-align:
center; line-height: 40px !important; background: rgb(22, 160, 93); color:
#fff; /* font-size: 20px !important; */ } .form-control { float: left; padding:
0 10px; height: 40px; boder: 0; width: 260px; font-size: 18px; box-sizing:
border-box; } .btn-group { border: 0; margin-top: 40px; } button { display:
block; width: 100%; height: 40px; font-size: 1.2em; letter-spacing: 10px;
border: 1px solid rgb(22, 160, 93); color: rgb(22, 160, 93); background: #fff;
cursor: pointer; } button:hover { color: #fff; background: rgb(22, 160, 93); }
p { font-size: 12px; text-align: center; color: #888; }
 

Technology
©2019-2020 Toolsou All rights reserved,
java Four functional interfaces ( a key , simple )os Simple use of module Browser kernel ( understand ) Some East 14 Pay change 16 salary , Sincerity or routine ?HashMap Explain in detail It's unexpected Python Cherry tree (turtle The gorgeous style of Library )html Writing about cherry trees , Writing about cherry trees