登錄頁面靜態效果
登錄頁面動態效果
登錄頁面是項目開發中最常用的。今天教大家手寫一個登錄頁面,最終效果見上圖。本頁面的的開發運用了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樣式
到此為止,這個登錄頁面就寫完了。有疑問的朋友可以私信我。如果想要源代碼的朋友可以私信給我你的郵箱地址,我發給你。整個頁面的編寫過程已製作成視頻,有興趣的朋友可以通過下方的“瞭解更多”查看視頻。