1.准备工作
(1)需要的工具：IntelliJ IDEA 2018.2.4 x64
<1>首先新建一个project，选择Java Enterprise 的Web Application
<2>命名为Login，点击Finish
<3>进入project之后，按快捷键ctrl+alt+shift+s，在Modules的Source下WEB-INF中新建两个文件夹为：claess和lib
<4>然后修改Compiler output的路径为<1>中新建的两个文件夹的路径
<5>配置tomcat服务器，修改Name为Login，tomcat选择版本 Tomcat 9.0.12。
(2)模仿的网页:SWPU邮件系统
2.模仿过程及效果展示
(1)先分析一下整个网页的大致框架，大体上分上中下的结构，每个部分直接用<div>块包一下；主要是中间的“content”部分，设置一个背景图片，其中右边登录框又用一个<div>块包一下，在登陆框中，每个部分又可以分为类似上中下的结构，每个部分又可以用<div>块包一下；其次是“top”部分，左边一个图片，右边一个“help”超链接。大致的图解如下：
(2)顺着以上的框架往下写的时候，先打开SWPU邮件系统，右键单击网页，点击“查看网页源代码”，出现以下界面
这样看起来不是很好定位到各个元素的源码，右键点击网页，单击“审查元素”，出现以下界面
左边是网页的各个元素，右边是对应元素的样式。左边的部分还包括了很多，比如source中包含了网页要用到的图片等等。
(3)着手写界面时遇到一些问题，写“top”部分时就遇到一个元素浮动的小问题
本来这两个元素应该是以行的形式分布，这里没有设置这两个元素的浮动，设置这两个元素的float属性都为右浮动，然后在这两个与元素后面加一个<div>块，用来清除浮动，以免对后面的元素造成影响。
.clear{
clear:both;
}
还有在写最后那个登录按钮时，登录两个字显示不完全，通过调整text_align属性也不行，最后通过查找资料，调整登录按钮的行高(line-height)解决了该问题。
静态页面效果图：
（3）加入javaScript代码动态修改页面
<1>首先，“帮助”超链接在鼠标移进去的时候，超链接下划线出现，移出则消失。
未修改之前：
修改之后：
（2）“忘记密码”，同上面一样，只是鼠标移进字体颜色变黑色，移出时恢复。
（3）登录按钮在鼠标移动进去的时候，背景透明度变为1
修改之前：
修改之后：
有一点点小变化
（3）用户输输入文本框在获得焦点时，输入框边框变蓝色，失去焦点恢复；同样密码输入框也一样，所以只用定义两个函数，获取到文本输入框和密码输入框之后调用这两个函数就行了
效果图：
JS代码：
function borderDisplay(eve){
eve.style.borderColor = "blue";
}
function borderRestore(eve){
eve.style.borderColor = "#c7c7c7";
}
在元素中内嵌事件：
<input type="text" id = "user" placeholder="用户名" onfocus="borderDisplay(this)"
onblur="borderRestore(this)">
<input type="password" id = "password_text" placeholder="密码"
onfocus="borderDisplay(this)" onblur="borderRestore(this)">
（4）密码输入错误提示，输入正确跳转页面
用户名为tom，密码123，用户名或者密码输入错误时
用户名密码正确时：跳转网页
3.最终结果
4.码云地址
https://gitee.com/ganis/Login.git
5.总结
本次模仿登录界面用到的图片都是通过图片的url来获取的图片。大部分的CSS样式都是通过复制模仿的网页的CSS代码，然后自己边看效果边调试出来的。不足的是，大部分的CSS代码都是通过内部样式写在<head>后面，并没有独立成一个单独的CSS文件，同样JavaScript代码也是写在index.jsp中的，不便于维护，因为这个项目比较小，维护和修改CSS代码比较容易，就没有考虑到这一点，在以后的JavaEE学习中会考虑到这一点。然后CSS选择器用的是基本的id选择器，CSS代码的复用性不高，具有唯一性。