This time to sum up the company's Task 1 implements a login screen.
In fact, the login screen have done in the junior year, but the interface was doing super low, the main difference lies in whether the css, due to the company's design requirements, it is not easy to deal with many of the details of the interface. So, still I want to write something about the record.
First cut a figure, show what the effect of it:
Then we look at the code:
Before we make a page, like a good one of his first overall layout, which is our main page and there's login.html, roughly structured as follows:
Let's take the code and look at the specific method:
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<Title> login page </ title>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<div id="login_frame">
<p id="image_logo"><img src="images/login/fly.png"></p>
<form method="post" action="login.js">
<p><label class="label_input">用户名</label><input type="text" id="username" class="text_field"/></p>
<p><label class="label_input">密码</label><input type="text" id="password" class="text_field"/></p>
<div id="login_control">
<input type="button" id="btn_login" value="登录" οnclick="login();"/>
<a id="forget_pwd" href="forget_pwd.html">忘记密码？</a>
</div>
</form>
</div>
</body>
</html>
Description:
After this html inside, our main login screen for the overall layout planning, the use of div inside the window, pictures, labels, input boxes, buttons, links, divided into blocks, so easy to use css we be accurate position adjustment , adjusting margins. But also on a few important things set id and class, and this is easy after our accurate color tone with its css, adjust font.
login.js
/**
* Created by WinkJie on 2019/11/17.
*/
function login() {
var username = document.getElementById("username");
var pass = document.getElementById("password");
if (username.value == "") {
alert ( "Please enter your user name");
} else if (pass.value == "") {
alert ( "Please enter your password");
} else if(username.value == "admin" && pass.value == "123456"){
window.location.href="welcome.html";
} else {
alert ( "Please enter the correct user name and password!")
}
}
Description:
The js is used to determine the user name and password are correct, and fairly simple to implement.
You can remember what the interface jump statement:
window.location.href="welcome.html";
The second is the return value of acquired input box, here we use the knowledge of document.getElementById to get the object ID value specified by the document object methods. Here we must note that byId, so html in front of the username and password to be set id value instead of name value, or get less than!
About this document can click on this link: Detailed JavaScript Document Object
login.css
body {
background-image: url("images/login/loginBac.jpg");;
background-size: 100%;
background-repeat: no-repeat;
}
#login_frame {
width: 400px;
height: 260px;
padding: 13px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: rgba(240, 255, 255, 0.5);
border-radius: 10px;
text-align: center;
}
form p > * {
display: inline-block;
vertical-align: middle;
}
#image_logo {
margin-top: 22px;
}
.label_input {
font-size: 14px;
font-family: Arial;
width: 65px;
height: 28px;
line-height: 28px;
text-align: center;
color: white;
background-color: #3CD8FF;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.text_field {
width: 278px;
height: 28px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 0;
}
#btn_login {
font-size: 14px;
font-family: Arial;
width: 120px;
height: 28px;
line-height: 28px;
text-align: center;
color: white;
background-color: #3BD9FF;
border-radius: 6px;
border: 0;
float: left;
}
#forget_pwd {
font-size: 12px;
color: white;
text-decoration: none;
position: relative;
float: right;
top: 5px;
}
#forget_pwd:hover {
color: blue;
text-decoration: underline;
}
#login_control {
padding: 0 28px;
}
Description:
The css is the hardest part, and the interface has been able to achieve such a beautiful effect, such as the login window to be centered on screen display, transparent background, the four corners of the box have a little arc, login button alignment, and so on down the input box .
Summary:
① make the background image is stretched and occupy the entire screen:
background-size: 100%;
background-repeat: no-repeat;
② make a div block is centered across the screen:
width: 400px;
height: 260px;
padding: 13px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px
(Where margin-left: margin-top and the best value is set to half the width and height, that is totally centered effect, of course, remember to add a minus sign in front!)
③ fillet provided:
text-align: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
④ set the background color and transparency plus:
background-color: rgba(240, 255, 255, 0.5);
⑤ so that the input box and label alignment center:
form p > * {
display: inline-block;
vertical-align: middle;
}
⑥ remove the underlining of links:
text-decoration: underline;
7, a label or a button centrally disposed inside the text:
width: 120px;
height: 28px;
line-height: 28px;
text-align: center;
(Need to set the line-height is a value equal to it in the higher label, button height high word line!)
8, to the middle "Login" and "forgot password" setting spacing:
First in html where they bind to a div:
<div id="login_control">
<input type="button" id="btn_login" value="登录" οnclick="login();"/>
<a id="forget_pwd" href="forget_pwd.html">忘记密码？</a>
</div>
Then set it in the css padding:
#login_control {
padding: 0 28px;
}