登錄頁面靜態效果
登錄頁面動態效果
登錄頁面是項目開發中最常用的。今天教大家手寫一個登錄頁面，最終效果見上圖。本頁面的的開發運用了HTML，CSS和JavaScript的知識。
首先創建一個空的CSS文件（style.css），頁面的樣式代碼將寫到這個文件中。
然後創建HTML文件，並引入style.css和jquery.min.js。
在html文件中引入style.css和jquery.min.js
在body標籤中間添加一個form，並設置form的class為login-form。
添加form標籤
在form中添加標題Login，兩個文本輸入框，一個提交按鈕，以及註冊鏈接。
當前效果
目前的頁面還沒有樣式，看起來很醜，下面我們在style.css文件中添加樣式。
樣式代碼添加後的效果
樣式代碼添加完成後，頁面看起來就美觀多了，下面我們實現鼠標點擊文本輸入框時的動畫效果。
此動畫效果需要編寫JavaScript代碼實現。我們在form標籤下添加此代碼。
輸入框動畫代碼
第一句代碼綁定了focus事件。當輸入框獲得焦點時，次輸入框添加focus樣式。
第二句代碼綁定了blur事件。當輸入框失去焦點時，如果此輸入框為空，那麼移除focus樣式。
寫在style.css中的focus樣式
到此為止，這個登錄頁面就寫完了。有疑問的朋友可以私信我。如果想要源代碼的朋友可以私信給我你的郵箱地址，我發給你。整個頁面的編寫過程已製作成視頻，有興趣的朋友可以通過下方的“瞭解更多”查看視頻。
分享到:
閱讀更多 程序猿有話說 的文章
