login登录页面

Posted 2020-11-28 lfq4588

代码地址：https://gitee.com/ZeroLuo328/j2ee_course/tree/master/

　　　　　https://gitee.com/ZeroLuo328/j2ee_course/tree/master/login%E9%A1%B5%E9%9D%A2

1.分析页面布局

 

 

2.简单画出布局 

 

 

3.获取图片资源

　　右键点检查或者f12

 

 

 

　　

　　找到资源open in new tab 下载即可

 

 

 

 

4.创建基本布局

　　布局：

　　

 

 

　　css： 

　   

 

 

 　　效果:

　　

 

5.header部分

 

 

　　这部分有个logo，有个帮助，所以要改变div的布局，注意子绝父相这个规律

　　

　　

 

 

 

 把page_head的颜色设置成logo的颜色

 

 

 

 

 

 

 6.content部分

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意看用户登录提示哪儿有对点不对，因为有些盒子有默认的外边距和内边距，要消除掉

　　

 

　　

 

　　现在就对了

 

7.foot部分

 

 

　　

 

 

 

 

 

 

8.js静态密码验证，以及消息提示

 

 

 

 

 

 

 

 

 

 

用户名密码正确就跳转到

https://mail.swpu.edu.cn/

 

 

 

 

 

 9.代码地址：

 

https://gitee.com/ZeroLuo328/j2ee_course/tree/master/

https://gitee.com/ZeroLuo328/j2ee_course/tree/master/login%E9%A1%B5%E9%9D%A2