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 | 类型 : 压缩文件
