(一).检查并下载网页元素

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

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

(二). 分析网页的布局

查看网页源代码。

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

(三).开始仿写

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

3.1-新建css文件

我的开发工具是VScode。

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

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

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

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

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

3.2-新建html文件

参照原网页的源代码后,写出基本结构:<head>和<body>

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

将新建的css文件链接:

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

3.3-为网页添加元素

在项目里新建图片资源的文件夹,将之前下载的图片资源放入。

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

然后复制图片资源的相对路径,在css文件中进行修改替换。

(在编译器中按住Ctrl+f查找元素)

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

3.5-JS静态验证

在html中依照要求写出登录验证函数:

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

(在输入用户名:tom和密码:123后,跳转到百度网)

(四).运行代码

在VScode的扩展中搜索open in browser模块并安装。

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

安装之后,先保存编写的文件,在html文件中鼠标右键,选择如图即可运行代码,查看结果。

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

运行结果:

SWPU邮件登录界面的仿写(第二次作业)-LMLPHP

码云地址:https://gitee.com/catwhishaw/SWPU-Email-LoginWeb/tree/master/

05-16 17:06