（一）.检查并下载网页元素

在需仿写的页面按F12，点击element，寻找需要的图片元素。

（二）. 分析网页的布局

查看网页源代码。

（三）.开始仿写

由于我们的目标是仿写网页，所以可以直接复制网页的布局格式这一部分的代码。

3.1-新建css文件

我的开发工具是VScode。

将网页源代码中<style></style>间的代码复制到新建的css里。

复制之后，会有一个错误产生，将此值赋为0即可。

3.2-新建html文件

参照原网页的源代码后，写出基本结构：<head>和<body>

将新建的css文件链接：

3.3-为网页添加元素

在项目里新建图片资源的文件夹，将之前下载的图片资源放入。

然后复制图片资源的相对路径，在css文件中进行修改替换。

（在编译器中按住Ctrl+f查找元素）

3.5-JS静态验证

在html中依照要求写出登录验证函数：

（在输入用户名：tom和密码：123后，跳转到百度网）

（四）.运行代码

在VScode的扩展中搜索open in browser模块并安装。

安装之后，先保存编写的文件，在html文件中鼠标右键，选择如图即可运行代码，查看结果。

运行结果：

码云地址：https://gitee.com/catwhishaw/SWPU-Email-LoginWeb/tree/master/

SWPU邮件登录界面的仿写（第二次作业）的更多相关文章

  1. 模拟SWPU邮件登录页面

    模拟SWPU邮件登录页面设计流程 一.开发工具准备 本次开发该页面时使用的开发工具为vscode—— 在下载安装完成后,需要下载各类插件——如汉化.通过浏览器打开网页插件等. 二.开发过程 首先,打开 ...

  2. 安卓开发学习笔记（七）：仿写腾讯QQ登录注册界面

    这段代码的关键主要是在我们的相对布局以及线性布局上面,我们首先在总体布局里设置为线性布局,然后再在里面设置为相对布局,这是一个十分常见的XML布局模式. 废话不多说,直接上代码:一.activity. ...

  3. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

  4. WPF开发实例——仿QQ登录界面

    原文:WPF开发实例--仿QQ登录界面 版权声明:本文为博主原创文章,如需转载请标明转载地址 http://blog.csdn.net/u013981858 https://blog.csdn.net ...

  5. Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码

    在android学习中,动作交互是软件中重要的一部分,其中的Scroller就是提供了拖动效果的类,在网上,比如说一些Launcher实现滑屏都可以通过这个类去实现.下面要说的就是上次Scroller ...

  6. 一步一步写出java swing登录界面，以及输入的参数获取

    经过好几天的学习,研究,接下来说说java swing,以及内嵌浏览器的方法. 一.swing是一个用于java应用程序用户界面的的开发工具包. 例如:接下来我们做个登录界面,简要说明 做之前的构想图 ...

  7. JavaSwing仿QQ登录界面，注释完善，适合新手学习

    使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为“素材”的文件夹. 素材: https://pan. ...

  8. Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源代码

    在android学习中,动作交互是软件中重要的一部分.当中的Scroller就是提供了拖动效果的类,在网上.比方说一些Launcher实现滑屏都能够通过这个类去实现.以下要说的就是上次Scroller ...

  9. 编写Java程序，使用Swing布局管理器和常用控件，实现仿QQ登录界面

    返回本章节 返回作业目录 需求说明: 使用Swing布局管理器和常用控件,实现仿QQ登录界面 实现思路: 创建登录界面的类QQLogin,该类继承父类JFrame,在该类中创建无参数的构造方法,在构造 ...

随机推荐

  1. 如何高效使用vim

    Vim 是一款文本编辑器,被称为编辑器之神,非常适合在shell 中编辑代码,熟练的使用Vim,可以让你高效的编写代码. Vim 是Vi 的增强版,所有的类Unix 系统,都自带这两个工具,这两个工具 ...

  2. 【Linux常见命令】diff命令

    diff - compare files line by line diff命令用于比较文件的差异. diff以逐行的方式,比较文本文件的异同处. 如果指定要比较目录,则diff会比较目录中相同文件名 ...

  3. mac OS mysql新建数据库运行sql文件

    mysql -uroot -proot123 进入本地数据库 create database 数据库名; use 数据库名; source 文件路径 quit 退出

  4. 你所不知道的Python | 字符串连接的秘密

    字符串连接,就是将2个或以上的字符串合并成一个,看上去连接字符串是一个非常基础的小问题,但是在Python中,我们可以用多种方式实现字符串的连接,稍有不慎就有可能因为选择不当而给程序带来性能损失. 方 ...

  5. nat和静态映射

    拓扑图: 实验要求: 1.R2.R3能访问外网的4.4.4.4(4.4.4.4为R4上的环回接口,用来模拟inter网). 2.R4访问222.222.222.100其实访问到的是内网的192.168 ...

  6. #Week4 Logistic Regression

    一.Classification 主要讨论二元分类. 线性回归处理分类问题显然不靠谱,所以采用逻辑回归. 二.Hypothesis Representation 假设函数变为\(h_\theta(x) ...

  7. MySQL 数据库赋权

    1.进入数据库,查看数据库账户 # 进入数据库 mysql –u root –p ---> 输入密码... # 使用 mysql 库 use mysql; # 展示 mysql 库中所有表 sh ...

  8. python（MD5 单向加密）

    import hashlib m3 = hashlib.md5() #定义加密方式 src = bytes(", encoding="utf-8") #定义一个需要加密的 ...

  9. RF（表格数据获取）

    一.表格数据获取 Get Table Cell [locator | row | col] 获取表格数据 Open Browser file:///D:/HBuilderX/workspace/Pro ...

  10. 70行实现Promise核心源码

    70行实现Promise核心源码 前言: ​ 一直以来都是只会调用Promise的API,而且调API还是调用axios封装好的Promise,太丢人了!!!没有真正的去了解过它的原理是如何实现的,自 ...