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