從網上下載了兩個登錄注冊頁面,我自己再修改一下,寫了一下js腳本代碼,主要是判斷用戶名是否為空。
注冊頁面html代碼:
登錄頁面html代碼:

模板目錄結構:

css布局并沒有太大變動,只是改了一些顏色添加<p>標簽而已:
注冊頁面的css布局



注冊頁面的js代碼:

登錄頁面的js代碼:

測試效果:

其中涉及的一些技術和方法,對于一些不太明白的我都百度了一下:
onblur事件


value屬性

innerHTML屬性

getElementById()方法

數據庫操作

ajax請求方式

encodeURIComponent函數

border-radius屬性

還有一些我沒有百度,因為我大概能猜到其作用就沒有去詳細了解了。