这个就留给自己看好了，懒得排版了，反正就自己知道
登录：可以达到点击按钮周围其他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>
html
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;
}
}
js
#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;
}
css
注册：不带验证码，哎，只能凑合着了，
<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>
html
<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>
js
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>
css
简单布局了，
<!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>
all
登录加导航了，可惜不知道为什么窗口缩小就移位了，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>
all
以下图片是根绝上面的基础稍微改变颜色，自己记住哈，
前端登录注册不容易啊
时间： 2024-08-08 09:37:22