javaee-第二次作业

1、 首先打开西南石油大学电子邮件系统页面https://mail.swpu.edu.cn/

javaee-第二次作业_第1张图片

 

 

 

2、 将需要的图片进行下载或将图片地址来源进行存储

图片下载在对应部分点击右键:点击图片另存为

 javaee-第二次作业_第2张图片

 

 

 

如果是图片的url的话,需要按f12来查看页面的布局和代码:在页面源代码中找到相应图片元素,在下面的CSS中找到其URL的路径。

 javaee-第二次作业_第3张图片

 

 

 

3、 查看页面的总体布局和具体布局

通过代码可以看出整个页面分为大的3个框架

第一部分头部

javaee-第二次作业_第4张图片

 

第二部分是主体内容

javaee-第二次作业_第5张图片

 

 

 

第三部分是脚本

 javaee-第二次作业_第6张图片

 

 

 

具体布局:

最为复杂是就是这个登录框,这一部分我们需要细分、细化

通过代码我们也可以看出登录框(盒)中的每一个布局的细化

 javaee-第二次作业_第7张图片

 

 

 javaee-第二次作业_第8张图片

 

 

javaee-第二次作业_第9张图片

 

 

 javaee-第二次作业_第10张图片

 

 

 

 

 

 

 

4、 模仿

在清楚页面的每个布局和构造以及得到我们想的图片后,我们就可以参考页面对其进行模仿了,虽然通过源代码我们可以知道页面的每一部分具体的实现和构造,但我们没有必要将代码和页面制作得一模一样,并且原页面有许多代码是我们目前并不需要和使用的。

javaee-第二次作业_第11张图片

 

 

 

5、 编写js判断用户名或密码

如果用户名或密码为空或输入错误,则给出提示框提示

 

javaee-第二次作业_第12张图片

如果同户名(tom)和密码(123)则进入另一个页面

 

 

 javaee-第二次作业_第13张图片

 

 

 

 

 

 

 

 

 

6、码云连接:https://gitee.com/wswdd/javaee2.git

你可能感兴趣的:(javaee-第二次作业)