登录页面的静态设计
一、设计图
二、代码
1.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 6 <html> 7 <head> 8 9 <title>注册</title> 10 11 <meta http-equiv="pragma" content="no-cache"> 12 <meta http-equiv="cache-control" content="no-cache"> 13 <meta http-equiv="expires" content="0"> 14 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 15 <meta http-equiv="description" content="This is my page"> 16 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 17 <!-- 18 <link rel="stylesheet" type="text/css" href="styles.css"> 19 --> 20 <link rel="stylesheet" type="text/css" href="<c:url value='/css/css.css'/>"> 21 <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>"> 22 <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script> 23 <script type="text/javascript" src="<c:url value='/js/common.js'/>"></script> 24 <script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script> 25 </head> 26 27 <body> 28 <div class="divBody"> 29 <div class="divTitle"> 30 <span class="spanTitle">新用户注册</span> 31 </div> 32 <div class="divCenter"> 33 <form action="<c:url value='/UserServlet'/>" method="post" id="registForm"> 34 <input type="hidden" name="method" value="regist"/> 35 <table> 36 <tr> 37 <td class="tdLabel">用户名：</td> 38 <td class="tdInput"> 39 <input type="text" name="loginname" id="loginname" class="input" value="${form.loginname }"/> 40 </td> 41 <td class="tdError"> 42 <label class="labelError" id="loginnameError">${errors.loginname }</label> 43 </td> 44 </tr> 45 <tr> 46 <td class="tdLabel">登录密码：</td> 47 <td class="tdInput"> 48 <input type="password" name="loginpass" id="loginpass" class="input" value="${form.loginpass}"/> 49 </td> 50 <td class="tdError"> 51 <label class="labelError" id="loginpassError">${errors.loginpass }</label> 52 </td> 53 </tr> 54 <tr> 55 <td class="tdLabel">确认密码：</td> 56 <td class="tdInput"> 57 <input type="password" name="reloginpass" id="reloginpass" class="input" value="${form.reloginpass }"/> 58 </td> 59 <td class="tdError"> 60 <label class="labelError" id="reloginpassError">${errors.reloginpass }</label> 61 </td> 62 </tr> 63 <tr> 64 <td class="tdLabel">Email：</td> 65 <td class="tdInput"> 66 <input type="text" name="email" id="email" class="input" value="${form.email }"/> 67 </td> 68 <td class="tdError"> 69 <label class="labelError" id="emailError">${errors.email }</label> 70 </td> 71 </tr> 72 <tr> 73 <td class="tdLabel">图形验证码：</td> 74 <td class="tdInput"> 75 <input type="text" name="verifyCode" id="verifyCode" class="input" value="${form.verifyCode }"/> 76 </td> 77 <td class="tdError"> 78 <label class="labelError" id="verifyCodeError">${errors.verifyCode }</label> 79 </td> 80 </tr> 81 <tr> 82 <td> </td> 83 <td> 84 <span class="verifyCodeImg"><img id="vCode" width="100" src="<c:url value='/VerifyCodeServlet'/>" /></span> 85 </td> 86 <td><a href="javascript: _changeVerifyCode()">换一张</a></td> 87 </tr> 88 <tr> 89 <td> </td> 90 <td> 91 <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/> 92 </td> 93 <td> </td> 94 </tr> 95 </table> 96 </form> 97 </div> 98 </div> 99 </body> 100 </html> 101
2.css
1 body{color: #404040;} 2 .divBody{margin-left: 240px;} 3 .divTitle{height: 30px; width: 880px; border: 1px #d0d0d0 solid; background-image: url('/goods/images/bg_btns.png'); background-position: 0px -132px; line-height: 30px;} 4 .spanTitle{font-weight: 900; margin-left: 18px;} 5 .divCenter{width: 880px; height: 400px; border-left: 1px #d0d0d0 solid; border-right: 1px #d0d0d0 solid; border-bottom: 1px #d0d0d0 solid;} 6 table{line-height: 50px;} 7 .tdLabel{text-align: right; width: 300px;} 8 .tdInput{width: 250px;} 9 .tdError{width: 300px;} 10 .labelError{line-height: 32px; font-size: 10pt; color: #f40000; border: 1px #ffb8b8 solid; padding: 8px 8px 8px 35px; background: url(/goods/images/error.png) no-repeat; background-color: #fef2f2;} 11 .input{width: 240px; height: 32px; border: 1px #7f9db9 solid; padding-left: 10px; line-height: 32px;} 12 .verifyCodeImg{width: 240px; height: 60px; border: 1px #e2e2e2 solid; display: inline-block; line-height: 60px; text-align: center;}