IOS turn on the front end of the copy-write login page __ios

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.