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

一、开发工具准备

本次开发该页面时使用的开发工具为vscode——

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

二、开发过程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、项目码云地址

https://gitee.com/tianhaoqi/simulated_swpu_mail_homepage

模拟SWPU邮件登录页面的更多相关文章

  1. SWPU邮件登录界面的仿写(第二次作业)

    (一).检查并下载网页元素 在需仿写的页面按F12,点击element,寻找需要的图片元素. (二). 分析网页的布局 查看网页源代码. (三).开始仿写 由于我们的目标是仿写网页,所以可以直接复制网 ...

  2. 模仿 SWPU邮件页面

    模仿SWPU邮件页面 要求 参考swpu 邮件主页,编写一个新闻后台登录页面,并用Js静态验证用户名密码是否为空,用户名为tom 密码为 123跳转到另一个页面 http://mail.swpu.ed ...

  3. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  4. 利用phantomjs模拟QQ自动登录

    之前为了抓取兴趣部落里的数据,研究了下QQ自动登录. 当时搜索了一番,发现大部分方法都已经失效了,于是准备自己开搞. 第一个想到的就是参考网上已有方案的做法,梳理登陆js的实现,通过其他语言重写.考虑 ...

  5. 根据Email地址跳转到相应的邮箱登录页面 (转)

    //跳转到指定的邮箱登录页面 $(".btn_actemail").click(function () { var uurl = $(".hide_email" ...

  6. 【Javascript Demo】根据Email地址跳转到相应的邮箱登录页面

    我的初步想法是通过指定的邮箱地址自动查找到对应的邮箱登录页面,但是用数据库.js什么的都有局限性,因为各种各样的邮箱太多了,不能都包含的到,网上找了半天都没有找到满意的答案,自己又想不出方法,只能暂时 ...

  7. 利用Jsoup模拟跳过登录爬虫获取数据

    今天在学习爬虫的时候想着学习一下利用jsoup模拟登录.下面分为有验证码和无验证码的情况进行讨论. ---------------------------无验证码的情况---------------- ...

  8. 5、Django实战第5天:首页和登录页面的配置

    从这天开始我们需要用到前端源码,需要的朋友可以进行小额打赏(15元),打赏二维码在博客的右侧,打赏后可以凭截图联系463951510@qq.com,博主收到邮件后会立即回复发送所有源码素材,实战过程中 ...

  9. asp.net c#采集需要登录页面的实现原理及代码

    当我们采集页面的时候,如果被采集的网站需要登录才能采集,原理搞清楚了,就好办了,我们所要做的仅仅是在采集的时候(或者说HttpWebRequest提交数据的时候),将Cookie信息放入Http请求头 ...

随机推荐

  1. Linux操作系统进入单用户模式的方法

    单用户模式的作用 在使用Linux的过程中,维护人员经常会碰到一些问题,就是在拥有root账号权限和密码的用户中,总是会出现忘记root密码的情况. 遇到这种情况,一般情况下,维护人员就会通过最常用的 ...

  2. Linux网络管理员:网络概论

    1.TCP/IP网络 包是适合通过网络传输的一小段数据,交换发生于网络的每一个链接点.当不同来源的包必须经过同一条线路传输数据时,这些包将被交替传输. 2.TCP/IP协议组 TCP/IP协议簇是In ...

  3. Spring Boot JPA的查询语句

    文章目录 准备工作 Containing, Contains, IsContaining 和 Like StartsWith EndsWith 大小写不敏感 Not @Query Spring Boo ...

  4. Scala教程之:scala的参数

    文章目录 默认参数值 命名参数 scala的参数有两大特点: 默认参数值 命名参数 默认参数值 在Scala中,可以给参数提供默认值,这样在调用的时候可以忽略这些具有默认值的参数. def log(m ...

  5. HTML后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.内容回顾: HTML 一大堆的标签:块级.行内 CSS position background text-align mar ...

  6. 解析HTML、JS与PHP之间的数据传输

    在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML.JS和PHP文件的处理来实现数据的连通.通常情况下,用户在HTML中做关键字操作,JS对提交的表单进行数据处理,向后端发起ajax请 ...

  7. Mybatis自动生成插件对数据库类型为text的处理

    2019独角兽企业重金招聘Python工程师标准>>> 如果数据库中的字段为text或者blob这种大文本类型,在使用MybatisGenerator工具自动生成代码的时候会将其进行 ...

  8. 通用权限管理系统组件 (GPM - General Permissions Manager)

    有的公司开发人员只那么几个,一个人支撑整个公司所有的IT系统实在有点累,不想自己写权限系统了,自己琢磨不也是要花时间和精力,要为此付出多少时间和汗水阿,细细的皱纹不知要多多少呢,重复建设不是白白浪费生 ...

  9. html入门详细笔记

    Web的基本概念 什么是Web? 中文翻译"网页",它是一些列技术的总称,(包括网站的前台布局.后台程序.美工.数据库开发等),我们称它为网页. Web标准 结构标准(HTML) ...

  10. 难道你现在还不知道:C/S和B/S

    随着网络技术的不断发展,各种各样的网络应用程序大爆发.运用最多的架构是基于浏览器+服务器的B/S结构,另一种是基于的 C/S结构. 概述: BS = Browser / Server =浏览器+服务器 ...