上一篇介绍了实现登录界面的功能,这一节介绍如何美化登录界面。
效果图展示
上一节:
这一节:
是不是比上一节的登录界面看起来舒服多了,主要是用了Bootstrap(Bootstrap是Twitter推出的一个用于前端开发的开源工具包,目前最流行的WEB前端框架)。
下载Bootstrap
1. 下载网址:https://getbootstrap.com/
2. 下载需要的版本(目前我用的版本3.3.7)
3. 下载下来后解压,得到目录如下
美化登录界面
1. 将dist文件夹拷贝到你需要用到的开发目录下。LoginPagesrcmainwebapp esourcesootstrap3_3_7dist
2. 编辑login.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ page session="false"%> <%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Login</title> <!-- 使用bootstrap框架,美化登录界面 --> <link href="${pageContext.request.contextPath}/resources/bootstrap3_3_7/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <!-- 参考 https://bootsnipp.com/snippets/VxmR#comments --> <div class="container"> <div class="row vertical-offset-100"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Please sign in</h3> </div> <div class="panel-body" style="font-size: 16px;"> <form role="form" action="index" method="post"> <fieldset> <div class="form-group"> <label for="name">Name: </label> <!-- placeholder是水印 --> <input class="form-control" placeholder="Enter your name" name="name" type="text" style="font-size: 16px;text-align:left;" maxlength="30"> </div> <div class="form-group"> <label for="password">Password: </label> <input class="form-control" placeholder="Enter your password" name="password" type="password" style="font-size: 16px;text-align:left;" maxlength="30"> </div> <div align="center" class="form-group"> <button type="submit" class="btn btn-lg btn-success btn-default btn-block" name="Login">Login</button> </div> <p style="font-size: 14px; line-height: 150%; font-family: consolas;"> <font color="red">${Error}</font> </p> </fieldset> </form> </div> </div> </div> </div> </div> </body> </html>
3. 运行程序,即可实现效果图的效果。
4. 工程目录展示