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

在需仿写的页面按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. ajax---post跨域思路

    ajax跨域需要加的代码 header("Access-Control-Allow-Methods:GET,POST");

  2. java学习（第二篇）语法学习

    1.java标识符 类名.变量名以及方法名都被称为标识符. 关于 Java 标识符,有以下几点需要注意: 所有的标识符都应该以字母(A-Z 或者 a-z),美元符($).或者下划线(_)开始 首字符之 ...

  3. cocos2dx初体验

    我们创建工程后总会自带一个HelloWorld类,短短的几行代码就出来了一个游戏的雏形,请问我们真的理解它了吗?如果我们能早一点弄明白这几行代码,我们或许会比现在走得更远. 理解HelloWorld类 ...

  4. MySQL事务与并发

      很多程序员都学过MySQL,而且也会写SQL语句.但仅仅会写还远远不够,在面试中以及在工作中,还必须要会事务和并发. 一.事务 事务是满足 ACID 特性的操作,可以通过 Commit 提交事务, ...

  5. mysql-管理命令【创建用户、授权、修改密码、删除用户和授权、忘记root密码】

    一.创建用户 命令: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 关键参数说明: username - 创建登录用户名, host ...

  6. 初见Ajax——javascript访问DOM的三种访问方式

    最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台 ...

  7. Socket中SO_REUSEADDR简介

    SO_REUSEADDR:字面意思重复使用地址 一般来说,一个端口释放后会等待两分钟之后才能再次被使用,SO_REUSEADDR是让端口释放后立即就可以被再次使用. SO_REUSEADDR用于对TC ...

  8. unittest（生成 HTMLTestRunner 模块）

    一:生成 HTMLTestRunner 模块 unittest 里面是不能生成 html 格式报告的,需要导入一个第三方的模块:HTMLTestRunner 方法1.这个模块下载不能通过 pip 安装 ...

  9. 写给Android 混淆小白的快速混淆方法

    为啥子要混淆 简单来说,Android 进行ProGuard,可以起到压缩,混淆,预检,优化的功能,虽然不能说更安全但还是一个不容忽视的环节. 开始混淆第一步 首先在build.gradle 中将混淆 ...

  10. Shell脚本(五)函数

    总结下shell中的函数用法 #!/bin/bash function add_v1() { echo "call function add" } function add_v2( ...