(一).检查并下载网页元素
在需仿写的页面按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/