软件工程综合实践转眼已经接近尾声了，通过这九天的学习，我们可以说是收获颇丰。
在实践的最后几天，我们一步一步地完善网页页面，在网上找到相应的素材对其进行美工操作。网上的素材千千万万，但是找到合适的素材却不简单，好在经过一番耐心寻找之后，终于找到合适的代码。经过修改完善之后，我们的主要代码如下：
（1）登陆操作的代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -->
<title>Login and Registration Form with HTML5 and CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
<meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="">
<strong>« 返回 </strong>上一级
</a>
<span class="right">
<a href=" #">
<strong>欢迎来到京东，祝你购物愉快！</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>J<span>D</span></h1>
</header>
<section>
<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<!-- 这句是自己写的 from 表单需要改成自己的 -->
<form action="<%=basePath%>user/login" autocomplete="on" method="post">
<h1>Log in</h1>
<p>
<label for="username" class="uname" data-icon="u" > Your username </label>
<font color="red">${unameErr }</font> <!-- 这句是自己写的 -->
<!-- 输入框的名字 需要和实体类中相应的属性对应 -->
<input id="username" name="username" required="required" type="text" placeholder="Please input username"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<font color="red">${pwdErr }</font> <!-- 这句是自己写的 -->
<!-- 输入框的名字 需要和实体类中相应的属性对应 -->
<input id="pwd" name="pwd" required="required" type="password" placeholder="Please input pwd,eg. X8df!90EO" />
</p>
<p class="keeplogin">
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
<label for="loginkeeping">Keep me logged in</label>
</p>
<p class="login button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
<font color="red"> Welcome to JD.com!</font>
<a href="user/toaddUser" class="to_register">Join us</a>
</p>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
网页效果图：
（2）注册操作的代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户注册</title>
<STYLE type=text/css>
td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
color: blue;
}
</STYLE>
</head>
<body>
<divclass="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<center>
<span class="right">
<a href=" #">
<strong>欢迎来到京东，祝你购物愉快！</strong>
</a>
</span>
</center>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<center>
<h1><font color ="#D9D919" >J</font><font color="#FF0000"><span>D</span></font></h1>
</header>
</center>
<h1 align="center"><td><font color=blue>用户注册</font></td> </h1>
<div align="center">
<form name="reg" action="<%=basePath%>user/addUser" method="post" >
<table width="90%" border="0">
<tr>
<td width="50%" align="right" height="25"><font face="Arial, Helvetica, sans-serif">请输入要注册的用户名：</font></td>
<td width="50%" align="left" height="25">
<input type="text" name="username">
<br>
</td>
</tr>
<tr>
<td width="50%" align="right" height="25">请输入密码：</td>
<td width="50%" align="left" height="25"> <input type="password" name="pwd"></td>
</tr>
</table>
<p>
<input type="submit" name="sub" value="注册">
</p>
</form>
</div>
</body>
</html>
网页效果图：
来源：https://www.cnblogs.com/liborun/p/7112063.html