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

感覺還不錯吧,結(jié)尾會附上代碼

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

響應(yīng)式設(shè)計

在這個頁面中,使用下面3點來完成響應(yīng)式設(shè)計

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

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

  • 組件使用像素

關(guān)于響應(yīng)式的設(shè)計要點還有很多。

整體頁面布局

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
&nb
        
		

        		
網(wǎng)友評論