HTML+CSS網頁設計，會員賬號登錄佈局樣式

大家好，本篇文章分享會員賬號登錄的佈局樣式。

效果圖：

會員賬號登錄佈局樣式

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網頁設計。