The first two times I had a general understanding of the relationship between servers, browsers, ASP engines, HTML code, and connected to the database server, but in general, the whole page was ugly.
HTML page itself is a tagging language, although each tag has rich style attributes to choose from, but for each tag design style is a very cumbersome, very unfriendly process. In the early years, HTML web page design has always been WYG. The main software are FrontPage and dreanweaver. FrontPage once joined the compulsory computer exam in junior high school. Of course, these two IDEs have gradually withdrawn from the historical arena. The IDE currently in use is WebStorm.
Based on the principle that tag language should focus on content rather than style, in HTML4, the W3C organization unifies all kinds of bloated styles into cascading style sheets (CSS). That is to say, in HTML, you only need to care about the structure of the whole page and the content of each tag, style to CSS, and dynamic interaction to script.
Like scripts, CSS can be embedded in HTML documents or saved as a CSS file separately. Generally speaking, if you want to improve the reusability of CSS style, you should save it as a single file.
The syntax of CSS is very simple, and the common structure is
selector {property: value}for example
h1 {color:red; font-size:14px;}This sentence sets the color of element h1 as red and the font size as 14px.
In HTML, an element's style has multiple attributes, and for those attributes that we do not explicitly specify, the browser's default items will be used. Generally speaking, there are four types of style sources for elements, which can be divided into four categories according to their priority:
- Inline Styles (Styles defined directly on tags)
- Internal Styles (Styles defined with style tags in HTML headers)
- External Styles (Styles in External CSS)
- Browser default settings
These four styles are stacked together and selected according to priority, that is, the origin of the name of the stacked style sheet.
At the beginning, we designed two pages, one is the landing page and the other is the registration page. Now we link the two pages together. The interface is designed as follows: 
This normal and simple interface can be divided into three parts: structure, content, style and interactive script.
From a structural point of view, the page should have an external box (gray part), which is familiar with the Form structure. In Form are two tags, two editable text boxes, and below are check boxes for remembering passwords and links for forgetting passwords. The next part of the Form should be a link to the user registration interface and a login button.
Writing HTML code should be:
<html>
<head>
<charset="utf-8">
</head>
<body>
<div class="wrapper">
<form action="" method="post">
<div class="loginBox">
<div class="loginBoxCenter">
<p><label for="username">User name:</label></p>
<p><input type="text" id="username" name="username" class="loginInput" autofocus="autofocus" required="required" autocomplete="off" placeholder="Please enter your mailbox/Cell-phone number" value=""></p>
<p><label for="password">Password:</label></p>
<p><input type="password" id="password" name="password" class="loginInput" required="required" placeholder="Please input a password" value=""></p>
<p><a class="forgetLink" href="#">Forget password?</a></p>
<input id="remember" type="checkbox" name="remember">
<label for="remember">Remember login status</label>
</div>
<div class="loginBoxButtons">
<button class="loginBtn">Sign in</button>
<div> <a href="agent.asp">User registration</a> </div>
</div>
</div>
</form>
</div>
</body>
</html>At this point, because we did not add styles, the browser will choose the default style to render these elements, and the page in my chrome is like this: 
The first thing that needs to be adjusted is the position in the page. The middle style gives people a better feeling. In HTML, all elements are under the "wrapper" class, so you just need to adjust the "wrapper" to the right place.
Add the following code at the head of HTML
<style>
.wrapper {
margin-left: 35%;
margin-top: 100px;
width: 400px;
}
</style>Margin is used to adjust the margin and width is used to adjust the size. For an element, there is an outer margin and an inner margin. The outer margin defines the margin of the parent element. The outer layer of wrapper is a window, and the middle effect can be achieved by defining the left margin. It's about 35% to the left.
Similarly, within wrapper, you can continue to define the styles of these elements. When defining a class, if the style of the class is defined directly, the style of all the elements of that class changes uniformly. When you want to design a particular element, you can find it by id or name. The more precise the description, the higher the priority.
The complete code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login interface</title>
<style>
html {
background-color: #B5DEF2;
}
.wrapper {
margin-left: 35%;
margin-top: 100px;
width: 400px;
}
a:link{
color: #B7D4EA;
}
a:visited{
color: darkcyan;
}
a:hover{
color: black;
}
.loginBox {
background-color: #F0F4F6;
/*Upper divcolor*/
border: 1px solid #BfD6E1;
border-radius: 5px;
color: #444;
font: 14px 'Microsoft YaHei', 'Microsoft YaHei';
margin: 0 auto;
width: auto;
}
.loginBox .loginBoxCenter {
border-bottom: 1px solid #DDE0E8;
padding: 24px;
}
.loginBox .loginBoxCenter p {
margin-bottom: 10px
}
.loginBox .loginBoxButtons {
/*background-color: #F0F4F6;*/
/*Next divcolor*/
color: darkcyan;
border-top: 0px solid #FFF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
line-height: 28px;
overflow: hidden;
padding: 20px 24px;
vertical-align: center;
filter: alpha(Opacity=80);
-moz-opacity: 0.5;
opacity: 0.5;
}
.loginBox .loginInput {
border: 1px solid #D2D9dC;
border-radius: 2px;
color: #444;
font: 12px 'Microsoft YaHei', 'Microsoft YaHei';
padding: 8px 14px;
margin-bottom: 8px;
width: 300px;
}
.loginBox .loginInput:FOCUS {
border: 1px solid #B7D4EA;
box-shadow: 0 0 8px #B7D4EA;
}
.loginBox .loginBtn {
background-image: -moz-linear-gradient(to bottom, blue, #85CFEE);
border: 1px solid #98CCE7;
border-radius: 20px;
box-shadow: inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
color: #444;
/*Sign in*/
cursor: pointer;
float: right;
font: bold 13px Arial;
padding: 10px 50px;
}
.loginBox .loginBtn:HOVER {
background-image: -moz-linear-gradient(to top, blue, #85CFEE);
}
.loginBox a.forgetLink {
color: #ABABAB;
cursor: pointer;
float: right;
font: 11px/20px Arial;
text-decoration: none;
vertical-align: middle;
/*Forget password*/
}
.loginBox a.forgetLink:HOVER {
color: #000000;
text-decoration: none;
/*Forget password*/
}
.loginBox input#remember {
vertical-align: middle;
}
.loginBox label[for="remember"] {
font: 11px Arial;
}
</style>
</head>
<body>
<div class="wrapper">
<form action="" method="post">
<div class="loginBox">
<div class="loginBoxCenter">
<p><label for="username">User name:</label></p>
<p><input type="text" id="username" name="username" class="loginInput" autofocus="autofocus" required="required" autocomplete="off" placeholder="Please enter your mailbox/Cell-phone number" value="" /></p>
<p><label for="password">Password:</label></p>
<p><input type="password" id="password" name="password" class="loginInput" required="required" placeholder="Please input a password" value="" /></p>
<p><a class="forgetLink" href="#">Forget password?</a></p>
<input id="remember" type="checkbox" name="remember" />
<label for="remember">Remember login status</label>
</div>
<div class="loginBoxButtons">
<button class="loginBtn">Sign in</button>
<div> <a href="agent.asp">User registration</a> </div>
</div>
</div>
</form>
</div>
</body>
</html>