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

在需仿写的页面按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. css3 文本控制自动换行

    text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

  2. ansible的模块使用

    转载于   https://www.cnblogs.com/franknihao/p/8631302.html [Ansible 模块] 就如python库一样,ansible的模块也分成了基本模块和 ...

  3. java 之 构造器 static关键字

    构造器  特点: 方法名和类名一至,没有void没有返回,无参数的称为无参构造器,有参数的称为有参构造器 语法: public 类名 {数据类型 参数名} 目的:创建对象 注意:如果类中没有带有参数的 ...

  4. HTML后台管理页面布局

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

  5. 16.What is pass in Python?

    What is pass in Python? Pass means, no-operation Python statement, or in other words it is a place h ...

  6. ElementUI表单验证攻略：解决表单项启用和禁用验证的切换，以及动态表单验证的综合性问题

    试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...

  7. mac 关闭系统完整性保护 SIP（System Integrity Protection）的方法

    在 OS X El Capitan 中有一个跟安全相关的模式叫 SIP(System Integrity Protection ) ,它禁止让软件以 root 身份来在 mac 上运行,并且对于目录 ...

  8. iOS自定义tabBar

    在我们的项目中经常会自己自定义tabBar因为苹果自带的真的太丑了!也不满足我们的项目需求. 好 开始行动吧! 先上图看下我们最终实现的效果: 继承UItabBar自定义一个自己的tabBar .h# ...

  9. U-Mail邮件系统详解邮件收发延迟原因及解决方案

    邮件是现代社会办公最常见.最频繁的通联工具,但使用邮件系统时,用户普遍最关心两个安全,一个是安全性,邮件会不会被窃密?自己的邮箱账号会不会被盗取被攻占呢?保存的数据会不会丢失呢?关于这个问题,国内知名 ...

  10. Spring源码学习——自定义标签

    2019独角兽企业重金招聘Python工程师标准>>> 1.自定义标签步骤 创建一个需要扩展的组件 定义xsd文件描述组件内容 创建一个文件,实现BeanDefinitionPars ...