前端登录注册不容易啊

这个就留给自己看好了，懒得排版了，反正就自己知道

登录：可以达到点击按钮周围其他display：none;显示登录页面部分                                   

<script src="../JqueryDemo/jquery.min.js"></script>
<script src="../JqueryDemo/_login.js"></script>
<link href="../JqueryDemo/_login.css" rel="stylesheet"/>

<div id="reg">
        <div id="headreg">
            登录
             <input  id="closeme" type="button" value="ｘ" "/>
      
        </div>
         
        
        <div id="formdiv">
            <form name="register">
            
                <div>
                    <input type="text" name="username" value="用户名"/>
                        <span class="message" id="userspan">*用户名有误</span>
                </div>
                
                <div>
                    <input type="text" name="password1" value="密码"/>
                        <span class="message" id="pass1span">*密码有误</span>
                </div>
      
                <div id="subdiv">
                    <input type="button" value="提交" onclick="checkForm()" />
                </div>
            </form>
        
        </div>
    
    
    </div>
      <div>
        <input id="_register" type="button" value="登录"/>
    </div>
   

 

    function inputcolor(node){
        
        var div = node.parentNode;
        div.className = "normal";
        
        node.onfocus = function(){
            div.className = "focus";    
            node.value = "";
            
            if(node.name=="password1"){
                node.type="password"
            }
        }
        
        node.onblur = function(){
         
            div.className = "normal";
             if(node.name=="username"){
                    if(node.value==""||node.value=="用户名")
                        node.value = "用户名";
             }else{
                 if(node.value==""||node.value=="密码"){
                        node.value = "密码";
                        node.type = "text";
                }
             }
             
            
        }
    }
    function initborder(){
        
        var formnode = document.forms["register"];
//        alert(formnode.childNodes.length);
        with(formnode){
                inputcolor(password1);
                inputcolor(username);
        }
    }
    
//    window.onload = initborder;             //0000000000000
        $(function(){
            initborder();
            $("#closeme").click(function(){
                
                $("div:not[#reg]").show();
                $("#reg").hide();
            });
            $("#_register").click(function(){
                $("div").css(
                    "display","none"
                );
                $("#reg").css(
                    "display","block"
                );
                $("#reg div").show()
            });
            
        });
    
    function checkPlat(node,regex,nextid){
    
        var rs = false;
        var value = node.value;
        var parent = node.parentNode;  //改变边框
        var nextnode = document.getElementById(nextid);
//        alert(regex.test(value));
        if(regex.test(value)){
            nextnode.style.visibility = "hidden";
            parent.className = "normal";
            rs = true;
        }
        else{
            nextnode.style.visibility = "visible";
            parent.className = "error";
        }
        return rs;
    }
    function checkUser(user){
        var regex = /^\w{4,16}$/;
        return checkPlat(user,regex,"userspan");
    }
    function checkPass1(pass1){
        var regex = /^[a-z0-9]{4,16}$/i;
        return checkPlat(pass1,regex,"pass1span");
    }

    function checkForm(){
        with(document.forms["register"]){
            if(checkUser(username)&&checkPass1(password1)){
                    alert("success");    return true;
            }
            
            else 
                return false;
            
        }
    
        
    }
    

    #reg *{
        padding:0px;
        margin:0px;
    }
    #reg{
        width:520px;
        margin:auto;       // div居中
        height:600px;
        border:1px #06C solid;
        background-color:#CCC;
        
        position:absolute;
        display:none;
        top:100px;
        left:200px;
        right:200px;
    }
    #headreg{
            border:#000 2px;
            width:520px;
        text-align:center;
        vertical-align:bottom;
        background-color:#CCC;
        color:#000;
        font-size:36px;
        height:60px;
        line-height:60px;  // 内容居中的一种方法
                           //如果高度是可以伸缩的，可以用padding=height
    }
    #closeme{
        position:relative;
        left:180px;
        font-size:24px;
        background-color:#929292;
        border:1px thin #999;
    }
    #formdiv{
        margin-bottom:40px;
    }
    #formdiv div{
        width:400px;
        margin:auto;
        background-color:#999;
        border-radius:3px;
        margin-bottom:20px;
        height:40px;
        line-height:40px;
         font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
         font-weight:300px;
    
        text-shadow:black 0.1px;
        
    }
    #formdiv .label{
        margin-left:10px;
        width:80px;
        display:block;
        float:left;
        color:#333;
    
    }
    #formdiv input{
        border:none;
        outline:none;
        background:none;
        height:24px;
    //    margin-left:-6px;
        padding-left:20px;
        color:#FFF;
        letter-spacing:0.8px;    font-size:20px;
    }
    #formdiv span{
        font-size:14px;
        color:#FFF;
        visibility:hidden;
    }
    #subdiv input{
        
        background-color:#FF6060;
        height:40px;
        text-align:center;
        width:400px;
        margin-left:0px;
        border-radius:3px;
        border:#F60 1px solid;
    }
    #subdiv input:hover{
        background-color:#F87982;
    }
    
    .normal{
        border:#000 thin 1px;
    }
    .focus{
        border:#FF0 solid 1px;
        
    }
    .error{
        border:#F00 solid 1px;
    }

注册：不带验证码，哎，只能凑合着了，                                                                          

<div id="_regdiv">
    <div  style="text-align:center"><h2><span class="icon"></span>注册帐号</h2></div>
            <hr/>
    <form id="_regform">
        
        
             <ul>
                <li><label>用户名:</label>
                  <input type="text" name="username" />
                  <span>*以为字符结合4-16个</span>
                 </li>
                 
                <li><label>密码:</label>
                  <input type="password" name="password1"/>
                   <span>*以字母和数字结合4-16个</span>
                </li>
                
                <li><label>确认密码:</label>
                <input type="password" name="password2" />
                 <span>*密码要一致</span>
                </li>
                
               </ul>
       <input id="button" type="button" value="提交" onclick="checkForm()" />

    </form>
</div>

<script src="jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
    //    var valAttr = '116311316qq.com';
    //     var mail_filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    //var tmpresult = mail_filter.test(valAttr);
    
        //input边框焦点
        $(":input").css("border","#000 solid 1.5px").
        focus(function(){
            $(this).css("border","#069 solid 2px");    
        }).blur(function(){
            $(this).css("border","#000 solid 1.5px");    
        });
        
        //按钮颜色
        $(":button").mouseover(function(){
            $(this).css("background-color","#F87982")    
        }).mouseout(function(){
            $(this).css("background","none")    
        }).submit(function(){
            return checkForm();    
        });
        
        //用户名对错呈现的状态
/*        var userspanvalue ="*用户名为字符结合4-16个";
        $("input[name=username]").keydown(function(){
            if(checkUser($(this)))
                $(this).next().text("ok!").css('color','blue');
            else
                $(this).next().text(userspanvalue);
        });
*/    
    });
    function checkPlat($node,regex){
    
        var rs = false;
        if(regex.test($node.val())){    
            $node.next().css("color","");
            rs = true;
        }
        else{
            $node.next().css("color","red");
        }
        return rs;
    }
    function checkUser($user){
        var regex = /^\w{4,16}$/;
    //        alert(regex.test($user.val()));
    //    return true;
        return checkPlat($user,regex);
        
    }
    
    var pass2value;
    function checkPass1($pass1){
        pass2value = $pass1.val();
        var regex = /^[a-z0-9]{4,16}$/i;
    //    alert(pass2value);
    //    return true;
        return checkPlat($pass1,regex);
    }

    function checkPass2($pass2){
    //    alert($pass2.val()==pass2value);
        if($pass2.val()!=pass2value){
            $pass2.next().css("color","red");
            return false;
        }
        else{
            $pass2.next().css("color","");
            return true;
            
        }
    }

    function checkForm(){
            if(checkUser($("input[name=username]"))&&checkPass1($("input[name=password1]"))&&checkPass2($("input[name=password2]"))){
                    alert("success");    return true;
            }
            
            else {
                    alert("failue");
                return false;
                
            }
        }



</script>

style type="text/css">

#_regdiv *{
    padding:0px;
    margin:0px;
}
#_regdiv{
    margin-top:50px;
    margin-right:300px;
    margin-left:300px;
    height:500px;

    border:#999 solid 2px;
    border-radius:10px;
    padding:50px;
    
    
    //background:#CCC;
}
#_regform{
    margin-top:20px;
    font-size:18px;
}
#_regform input{
    //    border:#000 groove 1.5px;
    //    outline:none;
        background:none;
        height:34px;
        padding-left:8px;
        color:#666;
        letter-spacing:0.8px;    font-size:20px;
}
#_regform ul{
    list-style:none;
}
#_regform ul li{
    height:55px;
    
    line-height:55px;
}
#_regform label{
    font-weight:bold;
        width:100px;
        color:#333;
        margin-left:50px;

        display:block;
        float:left;
}
#button{
    margin-left:240px;
    margin-top:200px;
    width:100px;
    
}</style>

简单布局了，                                                                                                           

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<style type="text/css">
#container *{
    margin:0px;
    padding:0px;
}
#container{
    border:#03C 2px thin;
    margin-left:100px;
    margin-right:100px;
    padding:25px;
    padding-bottom:50px;
    background:#999;

    overflow:hidden;
    width:1100px;

}

#left{
    
    height:500px;
    width:208px;
    background-color:#CCC;
    float:left;
    padding:8px;
    margin-right:40px;
    border:#999 2px solid;
    border-radius:10px;
        
}
#center{
    
    height:auto;
    width:800px;;
    float:left;
    background:#CCC;
    
    padding:10px;
    border-radius:10px;
}
    
</style>
<body>
    <div id="container">
        <div id="left">
            //，float在没有清除浮动的情况下，若要撑开，需要为父元素设置overflow:hidden属性
        </div>
    
        <div id="center">
            <p style="height:99px"> 宽度自动？</p>
            <div>auto</div>
             <div>auto</div>
        </div>
    
    </div>


</body>
</html>

 

登录加导航了，可惜不知道为什么窗口缩小就移位了，shit,                                             

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 #_head *{
        padding:0px;
        margin:0px;
    }
    #_head{
        margin-left:100px;
        margin-right:100px;
        
        width:auto;
        height:45px;
    //    background:#CCC;
        font-family:Verdana, Geneva, sans-serif;
        padding-left:100px;
    //    overflow:hidden;
    }
    #_head a{
        text-decoration:none;
    }
    #_head a:link,#_head a:visited{
        color:#03F;
            
    }
    #_nav1{
        position:relative;
        left:10px;
        width:500px;
        float:left;
        background:#999;
    }
    
    #_nav1 ul li{
        list-style:none;
    }
    #_nav1 ul li{
        margin-right:1px;
        text-align:center;
        line-height:41px;
        font-size:34px;
        width:120px;
        
        display::block;
        
        float:left;
    }
/*可以完成自动显示和隐藏*/
    #_nav1 ul li ul {
        left:-929px;
        position:absolute;
        
    }
    /*li:hover才自动显示*/
    #_nav1 ul li:hover ul{
        left:auto;
    }
    #_nav1 ul li ul li{
        
          padding:0px;
        margin:0px;
    
        font-size:22px;
        width:120px;
         border:#999 thin 1px;
        padding-bottom:0px;
        line-height:34px;
        background:#333;
        
        float:none;
        
    }
/*------------------------------------------------------*/
    #_nav1 ul li a{
    
        display:block;
        width:120px;
//        border-right:1px solid white;
    }
    
/*比较两种不同的hoverx下的:          背景颜色的改变和底边框的颜色a*/
    #_nav1 ul li a:hover{
        background-color:#666;
        border-bottom:2px solid #00F;
    //    border-left:1px solid white;
    //    border-right:1px solid white;
        
    }

    
/*使距离左边有段距离，，造成动态效果，以及右边的颜色边框*/
    #_nav1 ul li ul li a:hover{
        margin-left:8px;
        background-color:#999;
        border-right:#F00 solid 2px; 
        border-bottom:2px solid #333;
    }
/*放置登录注册链接的   带有浮动的div float:left;  但是窗口缩小会挤开*/
    #_nav2 {
        margin-right:40px;
        height:40px;
        line-height:45px;
        background:#F00;
        float:none;
        float:left;
        position:relative;
    //    right:220px;
    left:400px;
    //    
        font-weight:bold;
        text-align:right;
    }

    #_hr{
        padding:0px;
        margin-top:1px;
        margin-bottom:10px;
    }
    

</style>

<script src="../JqueryDemo/jquery.min.js"></script>
<script src="../JqueryDemo/_login.js"></script>
<link href="../JqueryDemo/_login.css" rel="stylesheet"/>
</head>
    
<body>
<div id="_head">
        <div id="_nav1">
                <ul>
                     <li>
                           <a href="#">首页</a>    
                             <ul>
                                <li><a href="#">下拉</a></li>
                                <li><a href="#">下拉</a></li>
                                <li><a href="#">下拉</a></li>
                               </ul>        
                     </li>
                     
                     
                      <li>
                          <a href="#">广场</a>    
                             <ul>
                                <li><a href="#">下拉菜单1</a></li>
                                <li><a href="#">下拉菜单1</a></li>
                                <li><a href="#">下拉菜单1</a></li>
                               </ul>        
                     </li>
                 
                       <li>
                          <a href="#">搜索</a>    
                             <ul>
                                <li><a href="#">下拉菜单1</a></li>
                                <li><a href="#">下拉菜单1</a></li>
                                <li><a href="#">下拉菜单1</a></li>
                               </ul>        
                     </li>
                </ul>
                                
        </div>
        
        
        
        
        
        
        
        
        <div id="_nav2">
               <a href="#" id="_register">登录</a>
                <a href="#">注册</a>
                <a href="#">个人中心</a>
        </div>
        
       
</div>

 <div>
            <hr id="_hr"/>
 </div>
 
 
 
 
 
 
 
 <div id="reg">
        <div id="headreg">
            登录
             <input  id="closeme" type="button" value="ｘ" "/>
      
        </div>
         
        
        <div id="formdiv">
            <form name="register">
            
                <div>
                    <input type="text" name="username" value="用户名"/>
                        <span class="message" id="userspan">*用户名有误</span>
                </div>
                
                <div>
                    <input type="text" name="password1" value="密码"/>
                        <span class="message" id="pass1span">*密码有误</span>
                </div>
      
                <div id="subdiv">
                    <input type="button" value="提交" onclick="checkForm()" />
                </div>
            </form>
        
        </div>
    
    
    </div>
</body>
</html>

以下图片是根绝上面的基础稍微改变颜色，自己记住哈，