login登錄頁面

代碼地址：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