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

在需仿写的页面按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. 探索ORACLE之ASM概念(完整版)

    探索ORACLE之ASM概念(完整版) 本文出自https://www.jb51.net/article/43527.htm ASM是Oracle 10g R2中为了简化Oracle数据库的管理而推出 ...

  2. 4.pickling 和unpickling是什么？

    pickling 和unpickling是什么? Pickle module accepts any Python object and converts it into a string repre ...

  3. Eclipse Mac OS 安装 最新版 Subversion插件subclipse

    subclipse 目前全部转移到github 官方地址 https://github.com/subclipse/subclipse/wiki Eclipse mac版 安装 最新版svn插件sub ...

  4. 数据库SQL语言从入门到精通--Part 4--SQL语言中的模式、基本表、视图

    数据库从入门到精通合集(超详细,学习数据库必看) 前言: 使用SQL语言时,要注意SQL语言对大小写并不敏感,一般使用大写.所有符号一定是西文标点符号(虽然是常识,但我还是提一嘴) 1.模式的定义与删 ...

  5. CF思维联系--CodeForces - 218C E - Ice Skating （并查集）

    题目地址:24道CF的DIv2 CD题有兴趣可以做一下. ACM思维题训练集合 Bajtek is learning to skate on ice. He's a beginner, so his ...

  6. C++类学习（2）

    Ⅰ:类概念 一:类的构成 class 类名 { public: 公有数据成员和成员函数:类的接口 protected: 保护数据成员和成员函数: private: 私有数据成员和成员函数: }://注 ...

  7. 图论--Floyd总结

    Key word:     ①最短路     ②传递闭包:大小关系 数值关系 先后关系 联通关系     ③floyd变形     ④实现方式:插点发法     ⑤思想:动态规划 1.最短路: 最短路 ...

  8. python（while 循环语句）

    一.循环语句 1.while 循环 当我们在 python 中需要重复执行一些动作的时候,这时我们就要用到循环 while 循环的结构,当条件成立的时候,就会执行里面的代码 while 循环不断的运行 ...

  9. speedtest 测试服务器上传下载速度

    下载speedtest.py wget https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py 赋予执行权限 ...

  10. NPM验证邮件，手机接受验证时出现service unavailable

    NPM验证邮件,手机接受验证时出现service unavailable 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 问题原 ...