©2020-2024 ioDraw All rights reserved
As an aesthetic procedural ape , I hope I can write a beautiful page . Today, share a simple and nice login interface , It's only going to take a while !
Let's see what the finished product looks like first
Briefly introduce the effect of this login page . When we focus the mouse on two input boxes , The length of the input box becomes larger , And the color of the border changes . When the mouse moves to the submit button , The button fills the interior with color .
Don't say much , Let's get to the point now ：
* First of all, set up HTML frame , In it, I will realize all the modules that I want to display on the page <body> <form class="box" action="Login.html"
method="POST"> <h1>Login</h1> <input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="password"> <input type="submit" name
="" value="Login"> </form> </body>
You can see it in the code , The whole page is body A form is nested inside , There is a title inside the form , User name input box , Password input box and submit button .
only HTML Is your page super ugly
* And then we use CSS Make it look good , Of course, if you want to have a little animation effect , We still need to use our famous CSS3.（ To tell you the truth, I feel it CSS3 The charm of ） /*
First set the background color and font for the whole page */ body { margin: 0; padding: 0; font-family: sana-fserif;
background: #34495e; } /* Setting the width and height of the whole form is self shrinking according to the content of the form , And set the positioning so that the whole form is in the middle of the page */ .box{
width: 300px; padding: 40px; position: absolute; /* Absolute positioning , Positioning relative to the parent label */ top: 50%
; left: 50%; transform: translate(-50%,-50%); background: #191919; text-align:
center; /* Center content in form */ }
transform: translate(-50%,-50%); css3 New features of , Without knowing its own width and height , You can use it to center horizontally and vertically . When using ：top:
50%;left: 50%; It takes the upper left corner of the whole form as the origin , So the form is not in the center , It's going to be a little lower right .
translate(-50%,-50%) The role is , Up （x axis ）, Left （y axis ） Move your own length and width 50%, So the form is right in the middle .
/* Set title style */ .box h1{ color: white; /* Set font color */ text-transform: uppercase; /*
Set all fonts to uppercase */ font-weight: 500; /* Set font thickness */ } /* Set the user name input box and password input box style */ .box
input[type="text"],.box input[type="password"]{ border-radius: 24px; border:
2px solid #3498db; background: none; display: block; margin: 20px auto;
text-align: center; padding: 14px 10px; width: 200px; outline: none; color:
white; /* Sets the color of the vertical line in the input box */ transition: 0.25s; /* Set element transition effect */ } /* Sets the style of the text box when it gets focus */
.box input[type="text"]:focus,.box input[type="password"]:focus{ width: 280px;
border-color: #2ecc71; }
Cooperate with transition: 0.25s; Just a little bit of animation .
/* Set the style of the submit button */ .box input[type="submit"]{ border-radius: 24px; border: 2px
solid #2ecc71; background: none; display: block; margin: 20px auto; text-align:
center; padding: 14px 40px; outline: none; color: white; /* Set the color in the vertical box */
transition: 0.25s; cursor: pointer; /* Sets the style of the cursor */ } /* Set the style of mouse over button */ .box
input[type="submit"]:hover{ background: #2ecc71; }
* last , clang , Our login page is fresh .（ Yeah , What's the best , Let's review the knowledge points used in it , I may have experimented too much recently , I can't remember clearly ）
Two more renderings are attached
Technology