1、 首先打开西南石油大学电子邮件系统页面https://mail.swpu.edu.cn/
2、 将需要的图片进行下载或将图片地址来源进行存储
图片下载在对应部分点击右键：点击图片另存为
如果是图片的url的话，需要按f12来查看页面的布局和代码：在页面源代码中找到相应图片元素，在下面的CSS中找到其URL的路径。
3、 查看页面的总体布局和具体布局
通过代码可以看出整个页面分为大的3个框架
第一部分头部
第二部分是主体内容
第三部分是脚本
具体布局：
最为复杂是就是这个登录框，这一部分我们需要细分、细化
通过代码我们也可以看出登录框（盒）中的每一个布局的细化
4、 模仿
在清楚页面的每个布局和构造以及得到我们想的图片后，我们就可以参考页面对其进行模仿了，虽然通过源代码我们可以知道页面的每一部分具体的实现和构造，但我们没有必要将代码和页面制作得一模一样，并且原页面有许多代码是我们目前并不需要和使用的。
5、 编写js判断用户名或密码
如果用户名或密码为空或输入错误，则给出提示框提示
如果同户名（tom）和密码(123)则进入另一个页面
6、码云连接：https://gitee.com/wswdd/javaee2.git