心血來潮,想學(xué)學(xué) material design 的設(shè)計風(fēng)格,就嘗試完成了一個登錄頁面制作.
這是整體效果.
感覺還不錯吧,結(jié)尾會附上代碼
在編寫的過程中,沒有使用任何圖片或者字體圖標,全部使用css3完成,還是遇到一些難點和bug,所以想筆記下來,以后方便查閱.
響應(yīng)式設(shè)計
在這個頁面中,使用下面3點來完成響應(yīng)式設(shè)計
1、最大寬度 .設(shè)定了一個 max-width 的最大寬度,以便在大屏幕時兼容.
2、margin : 20px auto; 使其保持時刻居中
3、組件使用像素
關(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"> <link rel="stylesheet" href="styles/style.css"></head><body> <div class="container"> <div class="logo"> <div class="logo-block-top"> </div> <div class="logo-block-bottom"> </div> </div> <h4 class="login-header">用戶登錄</h4> <div class="content"> <div class="form-group"> <input type="text" required class="form-control"> <label class="form-label">用戶名</label> </div> <div class="form-group"> <input type="text" required class="form-control"> <label class="form-label">密 碼</label> </div> <div class="option"> <div class="option-left"><a href="">忘記密碼</a></div> <div class="option-right"> <span class="md-checkbox" checked="checked"></span> <label class="form-label">記住密碼</label> </div> </div> </div> <button class="login-button"> <span class="icon-login"></span> </button> </div></body><script src="./app.js type=" text/javascript "></script></html> |
CSS 開始
給 body 添加樣式
| html { font-family: "Microsoft YaHei", 宋体, "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo; background-color: #FF4081; color: #777;} |
