你好,欢迎访问登录注册
  • 绿叶云盘 音乐搜索
  • 当前位置:首页 - 技术共享 - 正文 本站已经运行0

    JavaWeb购物商城系统-会员登录、注册页面!

    2016-12-19技术共享Jervois32007°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;
    }

    好了以下就是页面效果图:

    user_reg.png

    user_log.png

    效果图也展示完了,在下面就是压缩包下载了:

    下载量 : 4  |  类型 : 压缩文件

    分享到:
      选择打赏方式
    微信赞助

    打赏

    QQ钱包

    打赏

    支付宝赞助

    打赏

      移步手机端
    JavaWeb购物商城系统-会员登录、注册页面!

    1、打开你手机的二维码扫描APP
    2、扫描左则的二维码
    3、点击扫描获得的网址
    4、可以在手机端阅读此文章

    发表评论

    请拖动滑块解锁
    >>


      用户登录
    你好,欢迎访问登录注册
    龙年
    大吉