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

效果圖：

HTML代碼：

<div class="tpt-1446">
<div class="tpt-wp">
<div class="tpt-left">
<img src="3.jpg">
</div>
<div class="tpt-right">
<div class="tpt-form">
<h3>賬號登錄</h3>
<p>用戶登錄成功后，該用戶帳號和密碼由用戶負責保管，用戶須保證登錄信息的真實性、合法性、有效性。</p>
<form>
<input type="text" name="name" placeholder="登錄賬號" autocomplete="off">
<input type="password" name="password" placeholder="登錄密碼" autocomplete="off">
<p>使用<span> 賬號登錄</span>，即代表同意《用戶登錄協議》。</p>
<button>立即登錄</button>
</form>
</div>
</div>
</div>
</div>

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

有內容均可進入摹客官網下載。

在當今流量成本越來越高的今天，注重每一個細節的整合才能夠“黏”住用戶。第一時間抓住用戶的眼球，留住用戶更多的時間進行后續的操作。正所謂先入門，后發展，讓更多的人愿意參與進來，這對后期的良好運營其實有著舉重如輕的作用。無論是社交網站還是在線時尚商店，首先引起客戶關注的是登錄頁面，有著出色視覺效果的登錄頁可以快速抓住用戶的好感，打造差異化、情感化、互動化等的登錄界面才能讓你的產品脫穎而出。

摹客，一直致力于為設計師提供各種豐富的設計資源和免費素材。這次也為大家精心整理了各種類型的登錄頁設計的案例，供大家參考和臨摹。更有海量的設計資源和素材，免費打包下載，不要錯過。

1. 彈出式登錄頁

彈出式登錄頁

設計師：ArcangeloFiore

一個全新的彈出式登錄頁面模板，可用于網站登錄頁設計。此登錄頁包括輸入字段，第三方社交平臺快速登錄按鈕以及以及一個藍色的CTA，藍色“登錄”按鈕以其極佳的視覺凸顯而出。

2. 插畫登錄頁

設計師：MahisaDyan Diptya

一款可愛的插圖類型的登錄頁，巨大的登陸按鈕非常突出；顏色，著色，排版使設計獨特而清晰。

3. 選擇性登錄頁

設計師：MahisaDyan Diptya

這是一款關于健康類型的App，登錄頁面提供了醫生和患者的登錄選項，用戶可以根據自己自身情況選擇登錄。此登錄頁模板輕盈，干凈，清爽。藍色和白色的搭配提供極佳的用戶體驗，藍色CTA也很突出。

4. Lovebirds網站登錄設計

設計師：Luke Peake

非常簡潔和清爽的web登錄頁，專業的色彩搭配。空間分布均勻，左側為動畫效果展示，在登錄CTA按鈕的下方，用戶可選擇添加社交媒體登錄和注冊選項。

5. 研究生管理系統登錄頁設計

設計師：Zoeyshen

關于研究生管理系統的登錄頁面，界面看起來十分美觀和精致，與對比色相結合的字體選擇為用戶提供了最佳的可讀性，顏色的搭配為界面注入了新鮮的活力，漸變的背景色與登錄頁完美融合于一體。

6. HOUSY

設計師：DivanRaj

簡潔清新的外觀設計，壯觀的漸變色彩搭配，提供視覺上的享受。

7. Dipnet動畫登錄頁

設計師：RomanBystrytskyi

關于印刷廠應用程序Dipnet的登錄頁面設計展示，背景與主題結合在一起，動畫背景非常引人注目。

8. 登錄交互動畫

設計師：Shakuro

非常實用的登錄頁快速切換動畫展示。作者通過一種簡單的方法，將用戶重定向到密碼重置頁面。

9. Ghostlamp登錄頁

設計師：SourabhBarua

設計師分享了一種微妙而優雅的網頁登錄形式，作者為用戶提供了兩種登錄選項：通過常規表單登錄以及社交媒體平臺的登錄方式。登錄表單簡潔的外觀歸功于清新的淺色系，白色背景和清晰的字體突出了界面的美觀感。

10. 電影網站的登錄頁面插圖展示

設計師：Aliffajar

插圖優雅精致，排版時尚獨特，動畫過渡十分順暢，整體美觀迷人，很具吸引力。

響應式登錄頁面模板免費下載

1. Key登錄表單模板

兼容的瀏覽器：谷歌瀏覽器，Firefox，Safari，IE 10，Opera等

網站源代碼包括：HTML文件（.html），樣式表（.css），圖像（.jpg / png / gif），JQuery插件（.js），字體（.ttf）

特色：

• 完全響應
• 現代而優雅的設計
• HTML5和CSS3
• Google字體
• 精致的圖標

2. Triple Forms響應模板

兼容的瀏覽器：谷歌瀏覽器，Firefox，Safari，IE 10，Opera等

網站源代碼包括： HTML文件（.html），樣式表（.css），圖像（.jpg / png / gif），JQuery插件（.js），字體（.ttf）

特色：

• 專業的設計
• 100％響應式設計
• 易于編輯
• Google字體
• HTML5和CSS3

3. 幻燈片登錄頁

兼容的瀏覽器：谷歌瀏覽器，Firefox，Safari，IE 10，Opera等

網站源代碼包括：HTML文件（.html），樣式表（.css），圖像（.jpg / png / gif）， JQuery插件（.js），字體（.ttf）

特色：

• 完全響應
• 現代而優雅的設計
• HTML5和CSS3
• Google字體
• 內含精美圖標

4. Modish登錄頁

兼容的瀏覽器：谷歌瀏覽器，Firefox，Safari，IE 10，Opera等

網站源代碼包括： HTML文件（.html），樣式表（.css），圖像（.jpg / png / gif），JQuery插件（.js），字體（.ttf）

特色：

• 100％響應式設計
• 易于編輯
• Google字體
• HTML5和CSS3
• 精致的圖標

5. 用戶圖標登錄頁模板

用戶圖標登錄頁模板

兼容的瀏覽器：谷歌瀏覽器，Firefox，Safari，IE 10，Opera等

網站源代碼包括： HTML文件（.html），樣式表（.css），圖像（.jpg / png / gif），JQuery插件（.js），Photoshop（.psd），字體（.ttf）

Bootstrap登錄頁免費模板下載

1. Material Login Form

設計師：Andy Tran

2. Elegant Login Page

3. Beautiful login page

4. CSS-Only Accessible Floating Labels

設計師：Pablo Eugenio Lujambio Martinez

5. Simple login form

摹客生日快樂～快去摹客官網參加生日派對吧！花樣折扣等你來拿～