<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background: url(img/web_login_bg.jpg);
height: 900px;
width: 1200px;
margin: auto;
position: relative;
}
.Z1{
width: 350px;
height: 45px;
background: orange;
position: absolute;
left:380px;
top: 60px;
}
.Z1 h4{
height: 100px;
color: white;
line-height: 45px;
text-align
}
.Z3{
height: 480PX;
width: 400px;
background: #333333;
margin: 30px auto;
position: relative;
}
form{
width: 300px;
height: 250px;
position: absolute;
left: 50px;
top: 120px;
}
form input{
margin: 10px;
height: 40px;
width: 280px;
}
.Z2{
position: absolute;
left: 382px;
top:98px;
}
.Z3 .d1{
width: 300px;
margin: auto;
}
.Z3 li{
list-style: none;
float: left;
margin: 0 5px;
}
.Z3 p{
float: right;
}
.Z3 li a,.Z3 p a{
list-style: none;
text-decoration: none;
color: orange;
font-size: 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="Z3">
<form action="#" method="post">
<div class="p1">
<input type="text" name="user" id="user" placeholder="用户名" />
</div>
<div class="p2">
<input type="password" name="psd" id="psd" placeholder="请输入密码" />
</div>
<div class="p3">
<input type="password" name="psd2" id="psd2" placeholder="请确认密码" />
</div>
<div class="p4">
<input style="width: 285px; background: orange; color: white;font-size: 17px;" type="button" onclick="zhuce()" value="注册"/>
</div>
<script type="text/javascript">
function zhuce(){
var user = document.getElementById("user").value;
if(user.length<6||user.length>10){
alert("用户名输入不合法");
return;
}
var psd = document.getElementById("psd").value;
if(psd.length>8 || psd.length<6){
alert("密码输入不合法，请重新输入！！")
return;
}
var psd2 = document.getElementById("psd2").value;
if(psd2!=psd){
alert("两次输入密码不一致，请重新输入。。。");
return;
}
alert("提交成功！")
}
</script>
<div class="d1">
<ul>
<li><a style="color: white;" href="#">帮助</a></li>
<li><a href="#">忘记密码</a></li>
</ul>
<p class="k1"><a href="登陆.html">登陆</a></p>
</div>
</form>
</div>
<div class="Z1">
<h4>     我的空间动态--注册</h4>
</div>
<div class="Z2">
<img src="img/aiwrap.png"/>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background: url(img/web_login_bg.jpg);
height: 900px;
width: 1200px;
margin: auto;
position: relative;
}
.Z1{
width: 350px;
height: 45px;
background: orange;
position: absolute;
left:380px;
top: 60px;
}
.Z1 h4{
height: 100px;
color: white;
line-height: 45px;
text-align
}
.Z3{
height: 480PX;
width: 400px;
background: #333333;
margin: 30px auto;
position: relative;
}
form{
width: 300px;
height: 250px;
position: absolute;
left: 50px;
top: 120px;
}
form input{
margin: 10px;
height: 40px;
width: 280px;
}
.Z2{
position: absolute;
left: 382px;
top:98px;
}
.Z3 .d1{
width: 300px;
margin: auto;
}
.Z3 li{
list-style: none;
float: left;
margin: 0 5px;
}
.Z3 p{
float: right;
}
.Z3 li a,.Z3 p a{
list-style: none;
text-decoration: none;
color: orange;
font-size: 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="Z3">
<form action="#" method="post">
<div class="p1">
<input type="text" name="user" id="user" placeholder="用户名" />
</div>
<div class="p2">
<input type="password" name="psd" id="psd" placeholder="请输入密码" />
</div>
<div class="p3">
<input type="password" name="psd2" id="psd2" placeholder="请确认密码" />
</div>
<div class="p4">
<input style="width: 285px; background: orange; color: white;font-size: 17px;" type="button" onclick="zhuce()" value="注册"/>
</div>
<script type="text/javascript">
function zhuce(){
var user = document.getElementById("user").value;
if(user.length<6||user.length>10){
alert("用户名输入不合法");
return;
}
var psd = document.getElementById("psd").value;
if(psd.length>8 || psd.length<6){
alert("密码输入不合法，请重新输入！！")
return;
}
var psd2 = document.getElementById("psd2").value;
if(psd2!=psd){
alert("两次输入密码不一致，请重新输入。。。");
return;
}
alert("提交成功！")
}
</script>
<div class="d1">
<ul>
<li><a style="color: white;" href="#">帮助</a></li>
<li><a href="#">忘记密码</a></li>
</ul>
<p class="k1"><a href="登陆.html">登陆</a></p>
</div>
</form>
</div>
<div class="Z1">
<h4>     我的空间动态--注册</h4>
</div>
<div class="Z2">
<img src="img/aiwrap.png"/>
</div>
</div>
</body>
</html>