心血來潮,想學學 material design 的設計風格,就嘗試完成了一個登錄頁面制作.
這是整體效果.
大學生就業(yè)培訓,高中生培訓,在職人員轉行培訓,企業(yè)團訓

感覺還不錯吧,結尾會附上代碼

在編寫的過程中,沒有使用任何圖片或者字體圖標,全部使用css3完成,還是遇到一些難點和bug,所以想筆記下來,以后方便查閱.

響應式設計

在這個頁面中,使用下面3點來完成響應式設計

  • 最大寬度 .設定了一個 max-width 的最大寬度,以便在大屏幕時兼容.

  • margin : 20px auto; 使其保持時刻居中

  • 組件使用像素

關于響應式的設計要點還有很多。

整體頁面布局

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 &nbs
        
		

        		
網友評論