demo1-登录界面模仿

再看了视频之后，模仿做了一个登录界面
效果展示：

代码实现：

    
    
    
    



    
"container">
        
"login-wrapper">
            
"header">Login
            
"form-wrapper">
                "text" name="username" placeholder="username" class="input-item">
                "password" name="password" placeholder="password" class="input-item">
                
"btn">Login
            
            
"msg">
                Don't have account?"#">Sign up
            
        
    

get new idea：
1.实现背景渐变效果用linear-gradient
2.字母之间的间隙用letter-spacing
3.实现盒子的水平垂直居中，也可以使用绝对定位后（父级使用相对定位），top:50%,left:50%,transform:translate(-50%,-50%)

视频原地址：https://www.bilibili.com/video/BV1tA411h7id