登录页面制作

打开要仿制的页面https://mail.swpu.edu.cn/

登录页面制作_第1张图片

 

 

右键,查看网页源代码,复制css与html部分到dw

得到的页面如图

登录页面制作_第2张图片

 

 打开原页面的开发人员工具,从sources获取页面图片,将图片复制到文件夹

登录页面制作_第3张图片

 

在css中搜索图片关键词,将路径改为保存的图片路径,效果如图

登录页面制作_第4张图片

完成部分微调:

注释掉tab li:hover的css使其不会鼠标放上变白色

把tab li的路径更改为tablicurrent.png使黑色部分变为橙色

在html搜索到用户名和密码的表单,去掉placeholder前的下划线

页面仿制基本完成

登录页面制作_第5张图片

 

编写js代码完成要求的验证效果:


在把表单的属性改为

 最后把文件上传码云:https://gitee.com/teikigen/login_interface

你可能感兴趣的:(登录页面制作)