JavaWeb购物商城系统-会员登录、注册页面!
2016-12-19技术共享Jervois10414°c
A+ A-今天开始我们开始了新的实训项目JavaWeb购物商城系统,今天下午上课,我花了一些时间写出了这些会员登录和注册的页面!
下面我将这些代码分享出来,希望能给不会的一点小小的帮助!(没加判断和其他的东西)
会员登录【Html】:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link type="text/css" rel="stylesheet" href="../login/css/style_log.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>会员登录</title> </head> <body> <div id="log"> <form action="/gw/login" method="post"> <table align="center"> <tr> <td colspan="2" align="center">会员登录</td> </tr> <tr> <td colspan="2"> <input type="text" required="required" placeholder="会员名" name="username"> </td> </tr> <tr> <td colspan="2"> <input type="password" required="required" placeholder="密码" name="password"> </td> </tr> <tr> <td align="center"> <input type="submit" class="submit" value="登录"> </td> <td align="center"> <input type="button" onclick="location='../login/user_reg.jsp'" class="button" value="注册"> </td> </tr> </table> </form> </div> </body> </html>
会员登录【Css】:
html{ width: 100%; height: 100%; overflow: hidden; font-style: sans-serif; } body { width: 100%; height: 100%; font-family: 'Open Sans',sans-serif; margin: 0; background-color: #4A374A; } #log{ position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -150px; width: 300px; height: 300px; } #log form table tr td{ color: #fff; text-shadow: 0 0 10px; letter-spacing: 1px; text-align: center; font-size: 25px; margin:0 0 10px 0; padding-bottom: 10px; } input{ width: 278px; height: 18px; margin-bottom: 10px; outline: none; padding: 10px; font-size: 13px; color: #fff; text-shadow: 1px 1px 1px; border-top: 1px solid #312E3D; border-left: 1px solid #312E3D; border-right: 1px solid #312E3D; border-bottom: 1px solid #56536A; border-radius: 4px; background-color: #2D2D3F; } .submit{ width: 140px; min-height: 40px; display: block; background-color: #4a77d4; border: 1px solid #3762bc; color: #fff; padding: 9px 14px; font-size: 15px; line-height: normal; border-radius: 5px; margin: 0; float: left; } .button{ width: 140px; min-height: 40px; display: block; background-color: #4a77d4; border: 1px solid #3762bc; color: #fff; padding: 9px 14px; font-size: 15px; line-height: normal; border-radius: 5px; margin: 0; float: right; }
会员注册【Html】:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link type="text/css" rel="stylesheet" href="../login/css/style_reg.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>会员注册</title> </head> <body> <div id="reg"> <form action="/gw/register" method="post"> <table align="center"> <tr> <td colspan="2" align="center">会员注册</td> </tr> <tr> <td colspan="2"> <input type="text" class="input" required="required" placeholder="会员名" name="username"/> </td> </tr> <tr> <td colspan="2"> <input type="password" class="input" required="required" placeholder="密码" name="passwordone"/> </td> </tr> <tr> <td colspan="2"> <input type="password" class="input" required="required" placeholder="确认密码" name="passwordtwo"/> </td> </tr> <tr> <td colspan="2" align="center"> <input type="radio" class="radio" name="sex" value="0"/>男 <input type="radio" class="radio" name="sex" value="1"/>女 </td> </tr> <tr> <td colspan="2"> <input type="text" class="input" required="required" placeholder="地址" name="aadress"/> </td> </tr> <tr> <td colspan="2"> <input type="text" class="input" required="required" placeholder="联系电话" name="tel"/> </td> </tr> <td align="left"> <input type="submit" class="submit" value="提交"/> </td> <td align="right"> <input type="reset" class="reset" value="重置"/> </td> </tr> <tr> <td colspan="2"> <input type="button" onclick="location='../login/user_log.jsp'" class="button" title="你已经注册?点击登录" value="已经注册?"> </td> </tr> </table> </form> </div> </body> </html>
会员注册【Css】:
html{ width: 100%; height: 100%; overflow: hidden; font-style: sans-serif; } body { width: 100%; height: 100%; font-family: 'Open Sans',sans-serif; margin: 0; background-color: #4A374A; } #reg{ position: absolute; top: 35%; left: 50%; margin: -150px 0 0 -150px; width: 300px; height: 500px; } #reg form table tr td{ color: #fff; text-shadow: 0 0 10px; letter-spacing: 1px; text-align: center; font-size: 25px; margin:0 0 10px 0; padding-bottom: 10px; } .input{ width: 278px; height: 18px; margin-bottom: 10px; outline: none; padding: 10px; font-size: 13px; color: #fff; text-shadow: 1px 1px 1px; border-top: 1px solid #312E3D; border-left: 1px solid #312E3D; border-right: 1px solid #312E3D; border-bottom: 1px solid #56536A; border-radius: 4px; background-color: #2D2D3F; } .radio{ margin: 0 25px 0 10px; } .submit{ width: 140px; min-height: 20px; display: block; background-color: #4a77d4; border: 1px solid #3762bc; color: #fff; padding: 9px 14px; font-size: 15px; line-height: normal; border-radius: 5px; margin: 0; float: left; } .reset{ width: 140px; min-height: 20px; display: block; background-color: #4a77d4; border: 1px solid #3762bc; color: #fff; padding: 9px 14px; font-size: 15px; line-height: normal; border-radius: 5px; margin: 0 0; float: right; } .button{ width: 300px; min-height: 20px; display: block; background-color: #4a77d4; border: 1px solid #3762bc; color: #fff; padding: 9px 14px; font-size: 15px; line-height: normal; border-radius: 5px; margin: 10px 0 0; float: right; }
好了以下就是页面效果图:
效果图也展示完了,在下面就是压缩包下载了:
下载量 : 3 | 类型 : 压缩文件