1 *{padding: 0;margin: 0;}
 2 
 3 /* 清除浮动 */
 4 .clearfix:after {content: "";display: table;clear: both;}
 5 html, body { height: 100%; }
 6 body {    font-family:"Microsoft YaHei"; background:#EBEBEB; background:url(../images/stardust.png);       font-weight: 300;  font-size: 15px;  color: #333;overflow: hidden;}
 7 a {text-decoration: none; color:#000;}
 8 a:hover{color:#F87982;}
 9 
10 /*home*/
11 #home{padding-top:100px;}
12 
13 /*logint界面*/
14 #login{ padding:20px 30px 30px; width:300px; background:#FFF; margin:auto;
15 border-radius: 3px;
16 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
17 }
18 
19 .current1{
20 -moz-transform: scale(0);
21 -webkit-transform: scale(0);
22 -o-transform: scale(0);
23 -ms-transform: scale(0);
24 transform: scale(0);
25 -moz-transition: all 0.4s ease-in-out;
26 -webkit-transition: all 0.4s ease-in-out;
27 -o-transition: all 0.4s ease-in-out;
28 transition: all 0.4s ease-in-out;
29 }
30 
31 
32 .current{
33 -moz-transform: scale(1);
34 -webkit-transform: scale(1);
35 -o-transform: scale(1);
36 -ms-transform: scale(1);
37 transform: scale(1);
38 
39 }
40 #login h3{ font-size:18px; line-height:25px; font-weight:300; letter-spacing:3px; margin-bottom:20px; color:#C8C8C8; text-align:center;}
41 #login label{ color:#C8C8C8; display:block; height:35px; padding:0 10px; font-size:12px; line-height:35px;  background:#EBEBEB; margin-bottom:10px;position:relative;}
42 #login label input{  font:13px/20px "Microsoft YaHei"; background:none;  height:20px; border:none; margin:7px 0 0 10px;width:245px;outline:none ; letter-spacing:normal;  z-index:1; position:relative;  }
43 #login label  span{ display:block;  height:35px; color:#F30; width:100px; position:absolute; top:0; left:190px; text-align:right;padding:0 10px 0 0; z-index:0; display:none; }
44 #login button{ font-family:"Microsoft YaHei"; cursor:pointer; width:300px;  height:35px; background:#FE4E5B; border:none; font-size:14px; line-height:30px;  letter-spacing:3px; color:#FFF; position:relative; margin-top:10px;
45 -moz-transition: all 0.2s ease-in;
46 -webkit-transition: all 0.2s ease-in;
47 -o-transition: all 0.2s ease-in;
48 transition: all 0.2s ease-in;}
49 #login button:hover{ background:#F87982; color:#000;}
50 
51 /*头像*/
52 .avator{
53     display:block;
54     margin:0 auto 20px;
55     border-radius:50%;
56 }

$(function(){
    $("#login").addClass("current");    
    
    /**
     * 正则检验邮箱
     * email 传入邮箱
     * return true 表示验证通过
     */
    function check_email(email) {
        if (/^[\w\-\.]+@[\w\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(email)) return true;
    }
    
    
    //input 按键事件
    $("input[name]").keyup(function(e){
          //禁止输入空格  把空格替换掉
          if($(this).attr(‘name‘)=="pass"&&e.keyCode==32){
              $(this).val(function(i,v){
                  return $.trim(v);
              });
          }
          if($.trim($(this).val())!=""){
              $(this).nextAll(‘span‘).eq(0).css({display:‘none‘}); 
          }
    });
    
    
    //错误信息
    var succ_arr=[];
    
    //input失去焦点事件
    $("input[name]").focusout(function(e){
        
            var msg="";
             if($.trim($(this).val())==""){
                  if($(this).attr(‘name‘)==‘name‘){
                          succ_arr[0]=false;
                          msg="登入名为空";
                  }else if($(this).attr(‘name‘)==‘pass‘){
                           succ_arr[1]=false;
                           msg="密码为空";
                  }
                
            }else{
                  if($(this).attr(‘name‘)==‘name‘){
                          succ_arr[0]=true;
                         
                  }else if($(this).attr(‘name‘)==‘pass‘){
                           succ_arr[1]=true;
                           
                  }
            }
              var a=$(this).nextAll(‘span‘).eq(0);
             a.css({display:‘block‘}).text(msg);
    });
    
    
    //Ajax用户注册
    $("button[type=‘button‘]").click(function(){
         $("input[name]").focusout();  //让所有的input标记失去一次焦点 来设置msg信息
         for (x in succ_arr){if(succ_arr[x]==false) return;}
        // $("#login").removeClass("current");    
         var data=$(‘#login‘).serialize(); //序列化表单元素
        
        
        
        /**
             有兴趣的可以到这里 自行发送Ajax请求 实现注册功能
        */
         
        
        
    });
    
    
    
    
    
    
});