SWPU邮件登录界面的仿写（第二次作业）

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

（二）. 分析网页的布局

查看网页源代码。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

（三）.开始仿写

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

3.1-新建css文件

我的开发工具是VScode。

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

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

 

3.2-新建html文件

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

 将新建的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/