@CHARSET "UTF-8"; /*按照样图要求，添加一个浅灰色背景*/ body{ background-color: #F2F2F2; } /*设置内容模块距离顶部一个有一段距离100px*/ .content { margin-top: 80px; } /*登录和注册按钮的整体样式*/ .content button { height: 30px;/*登录和注册按钮的高度*/ color: white;/*登录和注册按钮字体颜色为白色*/ font-size: 18px;/*登录和注册按钮的字体大小*/ border: 0px;/*无边框*/ padding: 0px;/*无内边距*/ cursor: pointer;/*登录和注册按钮的选择时为手形状*/ } /*头部名称*/ .content .head { text-align: center;/*子内容居中*/ } /*登录面板*/ .content .panel { background-color: white;/*登录面板背景颜色为白色*/ width: 302px;/*宽度为302px*/ text-align: center;/*子内容居中*/ margin: 0px auto;/*自身居中*/ padding-top: 10px;/*顶部的内边距为20px*/ padding-bottom: 10px;/*底部的内边距为20px*/ border: 1px solid #ddd;/*边框颜色为灰色*/ border-radius: 5px;/*边框边角有5px的弧度*/ } /*购物主页购物面板*/ .content .panel1 { background-color: white;/*购物主页面板背景颜色为白色*/ width: 1000px;/*宽度为600px*/ text-align: center;/*子内容居中*/ margin: 0px auto;/*自身居中*/ border: 1px solid #ddd;/*边框颜色为灰色*/ border-radius: 5px;/*边框边角有5px的弧度*/ } /*登录和密码组*/ .content .panel .group { text-align: left;/*子内容居中*/ width: 262px;/*宽度为262px*/ margin: 0px auto 20px;/*自身居中，并距离底部有20px的间距*/ } .content .panel .group label { line-height: 30px;/*高度为30px*/ font-size: 18px;/*字体大小为18px*/ } .content .panel .group input { display: block;/*设置为块，是为了让输入框独占一行*/ width: 250px;/*宽度为250px*/ height: 30px;/*高度为30px*/ border: 1px solid #ddd;/*输入框的边框*/ padding: 0px 0px 0px 10px;/*左边内边距为10px，显得美观*/ font-size: 16px;/*字体大小*/ } .content .panel .group input:focus{ border-left: 1px solid #CC865E;/*当输入框成为焦点时，左边框颜色编程褐色*/ } .content .panel .login button { background-color: #CC865E;/*按钮的背景颜色*/ width: 130px;/*按钮的宽度*/ } .content .panel .login button:hover { background-color: white;/*按钮选中后背景颜色为白色*/ color: #CC865E;/*按钮选中后字体颜色为褐色*/ border: 1px solid #CC865E;/*按钮选中后边框颜色为褐色*/ } /*注册按钮*/ .content .register { text-align: center;/*子内容居中*/ margin-top: 20px;/*顶部的内边距为20px*/ } .content .register button { background-color: #466BAF;/*按钮的背景颜色为蓝色*/ width: 180px;/*按钮的宽度*/ } .content .register button:hover { background-color: white;/*按钮选中后背景颜色为白色*/ color: #466BAF;/*按钮选中后字体颜色为蓝色*/ border: 1px solid #466BAF;/*按钮选中后边框颜色为蓝色*/ }
Login.jsp具体代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/"; String username = ""; String password = ""; //获取当前站点的所有Cookie Cookie[] cookies = request.getCookies(); for (int i = 0; i < cookies.length; i++) { //对cookies中的数据进行遍历，找到用户名、密码的数据 if ("username".equals(cookies[i].getName())) { //读取时URLDecoder.decode进行解码(PS:Cookie存取时用URLEncoder.encode进行编码) username = java.net.URLDecoder.decode(cookies[i].getValue(),"UTF-8"); } else if ("password".equals(cookies[i].getName())) { password = java.net.URLDecoder.decode(cookies[i].getValue(),"UTF-8"); } } %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="https://www.jb51.net/<%=basePath%>"> <title>登陆页面</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="description" content="This is my page"> <link type="text/css" href="https://www.jb51.net/css/login.css"> </head> <body> <div> <div> <h1>简单购物车</h1> </div> <!-- 登录面板 --> <div> <form action="login_action.jsp" method="post"> <!-- 账号和密码组 --> <div> <label>账号</label> <input type="text" placeholder="请输入账号" value="<%=username%>"> </div> <div> <label>密码</label> <input type="password" placeholder="请输入密码" value="<%=password%>"> </div> <div> <input type="checkbox" value="save"> <label>记住密码</label> </div> <div> <label></label> </div> <!-- 登录按钮 --> <div> <button type="submit">登陆</button> <button type="reset">重置</button> </div> </form> </div> <!-- 注册按钮 --> <div> <button>创建新账号</button> </div> </div> </body> </html>
登录处理脚本login_action.jsp代码如下：