模仿登录界面

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)先分析一下整个网页的大致框架，大体上分上中下的结构，每个部分直接用

块包一下；主要是中间的“content”部分，设置一个背景图片，其中右边登录框又用一个

块包一下，在登陆框中，每个部分又可以分为类似上中下的结构，每个部分又可以用

块包一下；其次是“top”部分，左边一个图片，右边一个“help”超链接。大致的图解如下：

 

 

(2)顺着以上的框架往下写的时候，先打开SWPU邮件系统，右键单击网页，点击“查看网页源代码”，出现以下界面

这样看起来不是很好定位到各个元素的源码，右键点击网页，单击“审查元素”，出现以下界面

左边是网页的各个元素，右边是对应元素的样式。左边的部分还包括了很多，比如source中包含了网页要用到的图片等等。

(3)着手写界面时遇到一些问题，写“top”部分时就遇到一个元素浮动的小问题

本来这两个元素应该是以行的形式分布，这里没有设置这两个元素的浮动，设置这两个元素的float属性都为右浮动，然后在这两个与元素后面加一个

块，用来清除浮动，以免对后面的元素造成影响。

.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";
}
在元素中内嵌事件：

       onblur="borderRestore(this)">

       onfocus="borderDisplay(this)" onblur="borderRestore(this)">

（4）密码输入错误提示，输入正确跳转页面

用户名为tom，密码123，用户名或者密码输入错误时

用户名密码正确时：跳转网页

3.最终结果

4.码云地址

https://gitee.com/ganis/Login.git

5.总结

本次模仿登录界面用到的图片都是通过图片的url来获取的图片。大部分的CSS样式都是通过复制模仿的网页的CSS代码，然后自己边看效果边调试出来的。不足的是，大部分的CSS代码都是通过内部样式写在后面，并没有独立成一个单独的CSS文件，同样JavaScript代码也是写在index.jsp中的，不便于维护，因为这个项目比较小，维护和修改CSS代码比较容易，就没有考虑到这一点，在以后的JavaEE学习中会考虑到这一点。然后CSS选择器用的是基本的id选择器，CSS代码的复用性不高，具有唯一性。