登录界面

html部分

    
    
    
    


   

       

           
Login2
           

               
               
               
Login
           
           

               Dont't have account? Sign up
           
       
   
 

<�cml>

css部分

*{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans Light';
    letter-spacing: .05em; /*字母之间的距离*/
}
html {
    height: 100%;

}
body {
    height: 100%;
}
.container {
    height: 100%;
    background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);/*向右背景渐变颜色*/
}
.Login-wrapper {
     background-color: #fff;
     width: 250px;
     height: 600px;
     border-radius: 15px; /*圆角属性*/
     padding: 0 50px;
     position: relative;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);/*移到背景中央，跟定位有关*/

}
.Login-wrapper .header {
    font-size: 30px;
    font-weight: bold;
    text-align: center;/*文字居中*/
    line-height: 200px;
}
.Login-wrapper .form-wrapper .input-item {
    display: block;
    width: 100%;
    margin-bottom: 20px;/*两个框的底边距*/
    border: 0;/*边框无*/
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;/*无轮廓*/
}
.Login-wrapper .form-wrapper .input-item::placeholder {
    text-transform: uppercase;/*字母大写*/
} 
.Login-wrapper .form-wrapper .btn {
    text-align: center;
    padding: 10px;
    width: 100%;
    margin-top: 40px;
    background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
    color: #fff;
}
.Login-wrapper .msq {
    text-align: center;
    line-height: 80px;
}
.Login-wrapper .msq a{
    text-decoration: none;
    color: #a6c1ee;
}

然后是显示的界面

下面来说一下这次用到的css部分

letter-spacing: .05em; /*字母之间的距离*/

这个如注释所说，是设置字符间距的属性然后.05em是相对于font-size的长度

然后是

background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);/*向右背景渐变颜色*/

表示控制颜色的渐变方向

接下来是

transform: translate(-50%,-50%);/*移到背景中央，跟定位有关*/

实现水平垂直居中模式，是以左上角为原点定位，而后面的数字表示向上向左移动自身长度的50%，使元素位于中心。

然后剩下的就是最基本的css属性了，大部分都比较基础，不会的话百度查查

也很方便。

总结:这次登录界面所用的都是比较基础的知识，大部分都懂。