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

在需仿写的页面按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. mac OS mysql新建数据库运行sql文件

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

  2. 二.Spring boot食用指南:结合Jpa(Hibernate) 构建MVC架构

    1.POM依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  3. 怎么查看当前的git分支是基于哪个分支创建的？

    2019独角兽企业重金招聘Python工程师标准>>> Question: 比如从 branch A 切出一个 branch B 然后对branch B做了一系列的操作 然后忘记了b ...

  4. struts2验证码

    验证码大多是jsp,servlet写的. 我拿来主义了, 再自己完善了一下(我一直努力想要站在巨人的肩膀)   首先是页面 test.jsp <%@ page contentType=" ...

  5. INTERVIEW #2

    吐槽下ZZ的面试安排:面试时间12:30不说了,周围没有饭店,中午就没吃饭...不像其他公司给每个人安排不同的面试时间,这样可以节约大家的时间,SPDB是把一大批人都安排在了12:30,而且面试是5个 ...

  6. ACM模板合集

    写在前面: 第一年小白拿铜牌,第二年队友出走,加上疫情原因不能回校训练导致心底防线彻底崩盘,于是选择退役. 自从退役之后,一直想我打了那么久的ACM,什么也没留下觉得很难受,突然想到我打ACM的时候, ...

  7. 图论--网络流--费用流--POJ 2156 Minimum Cost

    Description Dearboy, a goods victualer, now comes to a big problem, and he needs your help. In his s ...

  8. 日常开发中常用的linux命令

    本文并不将linux的常用命令全部罗列出来,列出一下常用.容易忘记的命令. 更详细的说明见:https://www.cnblogs.com/xuxinstyle/p/9609551.html 文件相关 ...

  9. JavaScript 循环判断练习题

    JavaScript 循环判断练习题 小明有一组水果("苹果","梨子","香蕉","葡萄","西瓜" ...

  10. Spring JDBC 框架使用JdbcTemplate 类的一个实例

    JDBC 框架概述 在使用普通的 JDBC 数据库时,就会很麻烦的写不必要的代码来处理异常,打开和关闭数据库连接等.但 Spring JDBC 框架负责所有的低层细节,从开始打开连接,准备和执行 SQ ...