第二次作业—新闻登录页面制作

一.安装开发工具:VScode

安装参考博文:https://blog.csdn.net/x15011238662/article/details/85094006

二.页面最终效果

 

 

 

 

 

 

 

 

 

三.编写过程

打开要模仿的网页:https://mail.swpu.edu.cn/

鼠标右键查看代码

在VScode中新建项目,新建文件test.html,test.css,test.js

将原网页中的html和css部分复制黏贴过去,js部分删掉

新建img文件夹,将原网页中的图片下载放入该文件夹(chrome中鼠标右键检查->Sourse->top->tpl->login/user->images)

 

 

以图片名字搜索(Ctrl+F),修改test.html和test.css中的图片路径

 所有图片路径修改完后,Ctrl+S保存

下载VScode中的open in browser插件(下载方法可参考:https://jingyan.baidu.com/article/6b18230908fc1cfa59e1591a.html)

打开网页(右键HTML文件,点击Open In Other  Browsers)

发现与原网页存在差别

修改html代码

 

 

搜索placeholder,去掉前面的下划线,然后Ctrl+S保存,再运行一次,与原网页相同

 

 

 

 

 

 JS静态验证

编写JS代码

 

 

 

 Ctrl+S保存,完成页面制作

四.码云地址

https://gitee.com/xmr123/JAVAEE

 

posted @ 2020-05-23 12:15  ♬♬♬♪♪♪  阅读(192)  评论(0编辑  收藏  举报