大家好，本篇文章分享會員賬號登錄的佈局樣式。
效果圖：
會員賬號登錄佈局樣式
HTML代碼：
賬號登錄
用戶登錄成功後，該用戶帳號和密碼由用戶負責保管，用戶須保證登錄信息的真實性、合法性、有效性。
使用 賬號登錄，即代表同意《用戶登錄協議》。
CSS代碼分析：
使用flex水平垂直居中
.tpt-1446 { display: flex; align-items: center; justify-content: center; height: 100vh }
使用flex佈局，固定高度和寬度
.tpt-wp { display: flex; width: 900px; height: 600px }
分為左右佈局，左邊配置圖片，右邊使用flex水平垂直居中
.tpt-left { width: 400px } .tpt-right { display: flex; align-items: center; justify-content: center; background: #fff; width: 500px }
配置表單的標題簡介的字體顏色，字體大小和行高
.tpt-form h3 { color: #79b8c1; font-size: 34px; line-height: 44px; font-weight: 400; margin-bottom: 20px } .tpt-form p { color: #999; font-size: 12px; line-height: 20px; margin-bottom: 20px }
配置表單文本輸入框的樣式
.tpt-form input { box-sizing: border-box; width: 100%; height: 38px; line-height: 38px; padding: 0 10px; background: #fff; border: 1px solid #eee; color: #333; font-size: 14px; border-radius: 2px; margin-bottom: 20px }
配置表單提交按鈕的樣式
.tpt-form button { width: 100%; height: 38px; line-height: 38px; background: #79b8c1; border: 0; color: #fff; font-size: 14px; border-radius: 2px; cursor: pointer }
注：以上部分CSS代碼只是幫助大家分析結構，是需要清除所有標籤的默認樣式。
有問題可以留言，大家一起學習HTML+CSS網頁設計。