前端登录注册不容易啊
这个就留给自己看好了,懒得排版了,反正就自己知道
登录:可以达到点击按钮周围其他display:none;显示登录页面部分
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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="x" "/> </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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; } }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#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;
}
注册:不带验证码,哎,只能凑合着了,
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
简单布局了,
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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,
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="x" "/> </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>
以下图片是根绝上面的基础稍微改变颜色,自己记住哈,