Today or to write a common login interface, to consolidate the knowledge before.
In the same way, we first build a project, create the corresponding CSS file and HTML file, then BEGIN code~
The first is HTML:
<!
DOCTYPE html>
After the basic skeleton is built, the layout and decoration are needed.
The following is a CSS file:
A, body, title, header, span, Div, p, label, IMG, Input, button, img{padding:0px;
margin:0px;
Body {background: #F2F2F2;
Text-align:center;
/* Panel/* #panel {display:inline-block;
margin-top:100px;
Background:white;
border:1px solid #ddd;
padding:20px;
border-radius:6px;
box-shadow:0px 0px 6px #999;
width:260px;
* * Panel head//#panel. panel-top {font-size:13px;
font-family:arial;
padding:5px 0px;
border-bottom:1px solid #ddd;
margin:0 Auto;
}/* Panel content/#panel. panel-content{margin-top:20px}
#panel. panel-content. int {margin-bottom:9px;
height:36px;
position:relative;
#panel. panel-content. int label {Position:absolute;
top:7px;
left:6px;
#panel. panel-content int input {width:100%;
height:100%;
border:1px solid #ddd;
padding-left:38px;
Box-sizing:border-box;
border-radius:5px;
} #panel. panel-content int Input:focus { Outline:none;
border:1px solid orangered;
box-shadow:0 0 2px orangered;
} #panel. panel-content. pwd-login a {color:gray;
font-size:13px;
margin-bottom:10px;
Text-decoration:none;
Color: #999;
} #panel. panel-content. pwd-login a.pwd-login-right {float:right;}
#panel. panel-content. Pwd-login a.pwd-login-left{Float:left;
#panel. panel-content. Pwd-login a.pwd-login-left input{margin-right:3px;
#panel. panel-content. login button {width:100%;
height:33px;
border:0;
Color:white;
font-size:17px;
margin-bottom:10px;
border-radius:5px;
Background:orange;
#panel. panel-content. reg {/*background:red;*/height:30px;
line-height:30px;
font-size:13px;
Text-align:center;
border-bottom:1px solid #ddd;
margin-bottom:10px;
#panel. panel-content. reg a {color:orange;
Text-decoration:none;
margin-left:3px; /* * Panel bottom//#panel. Panel-footer {height:30px;
line-height:30px;
Text-align:center;
#panel. Panel-footer img{width:30px;
Vertical-align:middle;
}
ok~, look at the effect chart below:
Specific demo, please go to the transmission door. Remember that you must practise a lot.