模拟SWPU邮件登录页面

模拟SWPU邮件登录页面设计流程

一、开发工具准备

本次开发该页面时使用的开发工具为vscode——模拟SWPU邮件登录页面_第1张图片

 

在下载安装完成后,需要下载各类插件——如汉化、通过浏览器打开网页插件等。

二、开发过程

首先,打开要模仿的网页https://mail.swpu.edu.cn/,然后使用鼠标右键单击出现菜单并选择检查元素查看网页源代码。

模拟SWPU邮件登录页面_第2张图片

 

 在打开后我们可以从元素标签页中显示的代码里看出,该网页布局分为三个div部分。

模拟SWPU邮件登录页面_第3张图片

 

 之后,打开VSCODE,建立好项目文件夹,并新建一个网页用于仿写该页面。

模拟SWPU邮件登录页面_第4张图片

 

 然后,返回源页面,打开调试程序选项卡,然后搜索style,将网页布局代码复制下来。

模拟SWPU邮件登录页面_第5张图片

 

 将其粘贴到刚刚创建的网页文件中,发现一处错误。

模拟SWPU邮件登录页面_第6张图片

 

 发现错误是由于text-align后没有添加属性值,我们可以赋予一个值0。

模拟SWPU邮件登录页面_第7张图片

 

 之后,新建一个文件夹,用于存放网页需要的图片。

模拟SWPU邮件登录页面_第8张图片

 

 然后,我们回到源页面中,发现选项卡中并没有资源(sources)选项卡,在网上查阅资料发现,EDGE浏览器的检查元素弹窗内没有这一选项卡。

模拟SWPU邮件登录页面_第9张图片

 

 于是,选择切换到360安全浏览器,再进行检查元素操作,发现下方出现了sources选项卡,在选项卡内找到网页图片资源所在位置。

模拟SWPU邮件登录页面_第10张图片

 

 之后,在图片上按鼠标右键保存图片资源到刚刚创建的图片资源文件夹中,并从源页面的检查元素窗口中搜索body,找到需要仿写的网页主体部分复制粘贴到先前创建的网页文件中。

模拟SWPU邮件登录页面_第11张图片

 

 模拟SWPU邮件登录页面_第12张图片

 

 之后,在代码中查找每个图片的文件位置信息,将其重定向至刚才的图片文件存储路径中。

模拟SWPU邮件登录页面_第13张图片

 

 模拟SWPU邮件登录页面_第14张图片

 

 然后对代码进行略微修改后,页面主体基本完成,我们在vscode中右击网页文件选择用浏览器打开,出现的页面如下:

模拟SWPU邮件登录页面_第15张图片

 

 发现与原来的页面有略微不同,可以从图片中看出,是登录区域上方的账号登录部分与原页面有偏差,于是我们再次回到vscode中,对代码进行如下图所示的修改:

模拟SWPU邮件登录页面_第16张图片

 

 模拟SWPU邮件登录页面_第17张图片

 

 之后,保存网页后再次重新打开页面,发现页面与原页面布局基本一致。

模拟SWPU邮件登录页面_第18张图片

 

 但是,我们还有一步最重要的步骤没有进行,就是在网页内添加JS静态验证,在页面中添加代码:

模拟SWPU邮件登录页面_第19张图片

 

 最后,保存网页并打开,进行最后的测试。

模拟SWPU邮件登录页面_第20张图片

 

 模拟SWPU邮件登录页面_第21张图片

 

 登录成功则跳转至新的页面:

模拟SWPU邮件登录页面_第22张图片

 

 测试通过,页面仿写完成。

 

三、项目码云地址

 https://gitee.com/tianhaoqi/simulated_swpu_mail_homepage

你可能感兴趣的:(模拟SWPU邮件登录页面)