簡約時尚登錄注冊表單炫酷切換動畫html頁面前端源碼

家好，今天給大家介紹一款，簡約時尚登錄注冊表單炫酷切換動畫html頁面前端源碼（圖1），布局合理。送給大家哦，獲取方式在本文末尾。

圖1

可以在注冊和登錄界面來回切換，切換動畫非常炫酷（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：10208，需要的朋友，訪問下面鏈接后，搜索10208，即可獲取。

「鏈接」

家好，這篇文章給大家分享怎么樣設計一個簡單的會員登陸頁面

話不多說，直接看效果圖：

簡單的會員登陸頁面

html代碼：

<div class="tpt-login">
<h2>簡單的會員登陸頁面</h2>
<form>
<input type="text" name="name" placeholder="請輸入賬號">
<input type="password" name="password" placeholder="請輸入密碼">
<p>
<span><i></i></span>我已閱讀并同意
<a href="#" target="_blank"> 會員登陸協議</a>
</p>
<button>立即登錄</button>
</form>
</div>

知識點：

form標簽用于將input等表單元素標簽包起來，可以提交數據到服務器，比如文本字段、復選框、單選框、提交按鈕等等。input標簽包含類型、名稱等其他屬性，如type="text"表示單行文本框、type="password"表示密碼文本框、name=""表示標簽名稱、placeholder=""表示提示信息等等。

從上面的效果圖來看，我們需要定義黑色背景，表單區域居中顯示，頭部是標題介紹，中間兩個表單元素分別輸入賬號和秘密，下方則是同意會員登陸協議和立即登陸按鈕。

CSS代碼：

首先我們用body來定義背景顏色：

body {
 background: #252935;
}

給div命名一個tpt-login樣式名稱，來控制整個表單樣式，如定義高度和寬度為360像素、內邊距上下50像素，左右30像素、背景顏色為白色、8像素的邊角、最后用position: absolute絕對定位來使整個區域左右垂直居中：

.tpt-login {
	width: 360px;
	height: 360px;
	padding: 50px 30px;
	background: #FFF;
	border-radius: 8px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

頭部標題介紹用h2定義，字體大小為28像素，顏色為黑色并居中等:

.tpt-login h2 {
	font-size: 28px;
	font-weight: 500;
	padding-bottom: 50px;
	text-align: center;
	color: #333;
}

中間表單元素需要定義寬度和行高，字體大小為16像素，背景顏色為灰色等:

.tpt-login input {
	width: 340px;
	padding: 0 10px;
	margin-bottom: 20px;
	height: 55px;
	line-height: 55px;
	border: 0;
	background: #f5f5f5;
	font-size: 16px;
	color: #666;
}

下方則是同意會員登陸協議和立即登陸按鈕，我就不詳細介紹了，直接看代碼：

.tpt-login button {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	width: 360px;
	background: #1e9fff;
	color: #fff;
	font-size: 16px;
	margin-top: 20px;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}
.tpt-login p {
	font-size: 14px;
	color: #777;
}
.tpt-login a {
	font-size: 14px;
	color: #3581b9;
}
.tpt-login span {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	border: 1px solid #ff5722;
	padding: 4px;
	top: 4px;
	margin-right: 6px;
}
.tpt-login i {
	position: absolute;
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	background: #ff5722;
}

這樣一個簡單的會員登陸頁面就完成了，當然，布局的方式有很多種，這只是其中一個方法，也歡迎大家留言分享一下其他的布局方式，謝謝觀看！??！

家好，今天給大家介紹一款，小清新風格的登錄表單頁面設計html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

帶輸入驗證（圖2）

圖2

代碼完整，需要的朋友可以下載學習

圖3

本源碼編碼：20220，需要的朋友，訪問下面鏈接后，搜索20220，即可獲取。

就愛UI - 分享UI設計的點點滴滴

在線咨詢

上一篇：HTML 之簡介
下一篇：前端數據提交給后端之HTML表單簡單剖析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

簡約時尚登錄注冊表單炫酷切換動畫html頁面前端源碼

家好，今天給大家介紹一款，簡約時尚登錄注冊表單炫酷切換動畫html頁面前端源碼（圖1），布局合理。送給大家哦，獲取方式在本文末尾。

可以在注冊和登錄界面來回切換，切換動畫非常炫酷（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：10208，需要的朋友，訪問下面鏈接后，搜索10208，即可獲取。