在登录界面点注册会进入注册界面
登录界面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width:500px;float: right;margin:0 auto;" > <label for="username" style="font-size:18px" >用户名：</label> <div style="height:35px;width:400px;position:relative;display:inline" > <!--相关位置--> <!--此处为相关位置与绝对位置联合使用--> <input id="username" type="text" style="height:30px;width:350px;padding-right:50px;"> <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;"></span> <!--绝对位置--> </div> <br/> <br/> <label for="password1" style="font-size:18px" > 密码：</label> <div style="height:35px;width:400px;position:relative;display:inline" > <!--相关位置--> <!--此处为相关位置与绝对位置联合使用--> <input id="password1" type="text" style="height:30px;width:350px;padding-right:50px;"> <span style="position:absolute;right:16px;top:2px;background-image:url(p.ico);height:16px;width:16px;display:inline-block;"></span> <!--绝对位置--> </div> <br/> <br/> <label for="verification_code" style="font-size:18px" >验证码：</label> <input id="verification_code" type="text" style="height:30px;width:350px;"> <br/> <br/> <div style="width:426px;float: right;"> <input type="radio" name="auto_login" value="1"/> 自动登录 <a herf="找回密码网址">忘记密码？</a> <a href="http://localhost:63342/jichu/day16/注册.html?_ijt=eb8klk8d781ojsf5e8eb7tjf41">注册</a> </div> <br/> <br/> <div style="width:426px;float: right;"> <input type="submit" value="登录" style="height:30px;width:400px;background-color:red;"/> </div> </div> </body> </html>
注册界面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p{ color:red; margin-left:20px; display:inline-block; } .c{ color:red; margin-left:4px; display:inline-block; } .l{ font-size:18px; } .d{ height:35px; width:300px; display:inline; } .i{ height:30px; width:300px; } </style> </head> <body> <div style="height:80px;"></div> <form enctype="multipart/form-data"> <div style="width:500px;float:left;margin:0 20px;"> <div style="font-size:28px;">注册新用户</div> <br/> <span class="p">*</span> <label for="username" class="l">用户名:</label> <div style="height:35px;width:300px;position:relative;display:inline;"> <input id="username" type="text" style="height:30px;width:250px;padding-right:50px;"> <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;" ></span> </div> <br/><br/> <span class="p">*</span> <label for="phonenumber" class="l">手机号:</label> <div class="d"> <input id="phonenumber" type="text" class="i"> </div> <br/><br/> <span class="c">*</span> <label for="login_password" class="l">登录密码:</label> <div class="d"> <input id="login_password" type="text" class="i"> </div> <br/><br/> <span class="c">*</span> <label for="confirm_password" class="l">确认密码:</label> <div class="d"> <input id="confirm_password" type="text" class="i"> </div> <br/><br/> <span class="p">*</span> <label for="ver_code" class="l">验证码:</label> <div class="d"> <input id="ver_code" type="text" class="i"> </div> <br/><br/> <input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1"/> <span style="font-size:10px;">我已阅读并同意《用户注册协议》</span> <br/><br/> <input type="submit" value="同意以上协议并注册" style="margin-left:100px;height:30px;width:300px;background-color:red;display:inline-block;"/> </div> </form> </body> </html>
登录界面效果：
注册界面效果：
