网上图书商城项目学习笔记-002登录页面的静态设计

登录页面的静态设计

一、设计图

 

 

 

二、代码

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>&nbsp;</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>&nbsp;</td>
 90         <td>
 91           <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>
 92         </td>
 93         <td>&nbsp;</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;}

 

posted @ 2016-01-24 23:18  shamgod  阅读(571)  评论(0)  编辑  收藏  举报
haha