前端实战之登陆注册页

---

这是我自己仿照的板式用bootstrap写的一个登陆注册页面，由于是新手，估计有的方法用的很不恰当，请大家不吝赐教。

废话不多说了，直接上代码

• HTML部分

  
  
    
    
    
    
    
    
  
  
  
    

      

        
          
        
        
          
        
      
    
    

      

        

          

            注册成功，请登陆
          
        
        

          

            

              Sign up with Email
            
            

              Join us, start working
            
            

              
              
            
            

            

              
              
            
            

            

              
              
            
            

            

              
              
            
            

            
              注册
            
          
        
        

          

            

              Sign in
            
            

              Quick Start
            
            

              
              
            
            

            

              
              
            
            

            
              
                
                Remember Me |
              
              Forgot Password?
            
            

            
              登陆
            
          
        
      
    
  

• CSS部分

.navbar-USF{
        left:0;
        top:0;
        position:fixed;
        height:100%;
        width:45px;
        background-color:#3C3C3C;
    }
    .navbar-USF a{
        display:block;
        padding:10px;
        line-height: 25px;
        height:45px;
        font-size:16px;
        text-align: center;
    }
    .navbar-USF a:hover{
      background:#E0E0E0;
    }
    .navbar-USF a span{
        height:25px;
        width: 25px;
    }
    
  .sign-page{
    margin-top:30px;
    padding:40px;
  }
  
  .alert{
    position:absolute;
    width:18%;
    left:40%;
    top:5%;
    display:none;
  }
  
  
  .alert p{
    text-align:center;
  }
  .signup-page{
    float:left;
    width:49%;
    display:inline-block;
    vertical-align:top;
    border-right: 1px solid #d9d9d9;
  }
  
  .signin-page{
    float:left;
    width:49%;
    display:inline-block;
    vertical-align:top;
  }
  
  form{
    width:301px;
    display:block;
    margin:20px;
    margin-left:100px;
  }
  .input-prepend span{
    width:42px;
    height:42px;
  }
  .input-prepend input{
    width:228px;
    height:42px;
    padding:4px 12px;
  }
 span#control-group{
   margin:0 0 100px 0;
 }

• 效果截图

Screenshot from 2014-11-22 16:27:19.png