login登录页面

时间:2024-03-08 07:13:59

代码地址: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