验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reg.css"/>
</head>
<body>
<form action="" method="">
<table>
<tr>
<td>
用 户 名: <input type="text" id="username" />
</td>
<td class="right">
<span ><p id="un"> </p></span>
</td>
</tr>
<tr>
<td>
性 别: <input id="sex1" checked type="radio" name="sex"/>男<input id="sex2" type="radio" name="sex">女
</td>
<td class="right">
</td>
</tr>
<tr>
<td>
设置密码: <input type="password" id="password1"/>
</td>
<td class="right">
<span><p id="p1"> </p></span>
</td>
</tr>
<tr>
<td>
确认密码: <input type="password" id="password2"/>
</td>
<td class="right">
<span><p id="p2"> </p></span>
</td>
</tr>
<tr>
<td>
手 机 号: <input type="text" id="phone" />
</td>
<td class="right">
<span><p id="ph"> </p></span>
</td>
</tr>
<tr>
<td>
验 证 码: <input type="text" id="validate"><label id="valimg"> </label>
</td>
<td class="right">
<span><p id="vd"> </p></span>
</td>
</tr>
<tr>
<td>
邮 箱: <input type="text" id="mail"/>
</td>
<td class="right">
<span><p id="ma"> </p></span>
</td>
</tr>
<tr>
<td>
<input id="submit" type="button" value="提交"/> <input id="reset" type="reset" value="重置">
</td>
<td class="right">
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="js/reg.js" ></script>
</body>
</html>
<style>
body{
background: url("../img/bg.png") no-repeat 0px 50px;
background-color: #fffd3f;
background-size: 50%;
margin: 30px;
padding: 0;
}
input{
outline: none;
}
form{
position: absolute;
top: 50%;
margin-top: -293px;
right: 100px;
background: url("../img/frame.png") no-repeat;
width: 591px;
height: 586px;
}
p{
display: inline;
line-height: 27px;
}
table{
width: 500px;
margin: 0 auto;
}
td{
height: 62.5px;
}
td.right{
width: 240px;
}
#username,#password1,#password2,#phone,#validate,#mail{
border-radius: 5px;
height: 25px;
border: 0;
}
#sendMess{
background-color: blue;
border-radius: 0px 5px 5px 0px;
}
#un,#p1,#p2,#ph,#vd,#ma{
border-radius: 5px;
height: 43px;
line-height:1px;
font-size: 12px;
}
#validate{
width: 85px;
}
#valimg{
border-radius: 5px;
font-size: 14px;
width: 50px;
height: 20px;
line-height: 20px;
text-align: center;
display: inline-block;
float: right;
margin: 4px 15px 0px 0px;
margin-left: 5px;
}
#submit{
margin-left: 100px;
}
#submit,#reset{
border: 0;
background: orange;
border-radius: 5px;
}
#submit:hover,#reset:hover{
background: purple;
}
span{
height: 27px;
background: url("../img/frame1.png") no-repeat;
}
</style>
