|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
漂亮的HTML同一頁內(nèi)可平滑切換的登錄/注冊表單
作者:admin 時間:2022-8-3 16:31:59 瀏覽:今天介紹一個漂亮的HTML同一頁內(nèi)可平滑切換的登錄/注冊表單，該表單幾乎是純CSS實現(xiàn)，簡單的JQuery代碼僅3行。
可平滑切換的登錄/注冊表單
實例介紹
登錄/注冊兩個表單在同一界面上，隱藏一個顯示另一個，它們之間的隱顯切換，是通過鼠標事件后平滑過渡的。
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="container-forms">
<div class="container-info">
<div class="info-item">
<div class="table">
<div class="table-cell">
<p>已經(jīng)有賬號了？ </p>
<div class="btn">登錄 </div>
</div>
</div>
</div>
<div class="info-item">
<div class="table">
<div class="table-cell">
<p>還沒有賬號？ </p>
<div class="btn">注冊 </div>
</div>
</div>
</div>
</div>
<div class="container-form">
<div class="form-item log-in">
<div class="table">
<div class="table-cell">
<input name="Username" placeholder="用戶名" type="text" />
<input name="Password" placeholder="密碼" type="Password" />
<div class="btn">登錄 </div>
</div>
</div>
</div>
<div class="form-item sign-up">
<div class="table">
<div class="table-cell">
<input name="email" placeholder="Email" type="text" />
<input name="fullName" placeholder="Full Name" type="text" />
<input name="Username" placeholder="Username" type="text" />
<input name="Password" placeholder="Password" type="Password" />
<div class="btn">注冊 </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(".info-item .btn").click(function(){
$(".container").toggleClass("log-in")
});
</script>
</body>
</html>
代碼解釋
1、HTML表單結(jié)構(gòu)有里外三層，最外層是一個div，其class屬性值是container。中間是兩個并列的div，它們的class值分別是container-forms和container-form。
container-forms的div，包含的是登錄和注冊的切換文字信息及按鈕。
container-form的div，包含的則是登錄和注冊兩個表單。
2、HTML代碼引用一個style.css文件，這個是表單的CSS樣式設(shè)計文件。
3、HTML代碼引用一個jquery-3.2.1.min.js庫文件，因為要用到j(luò)query代碼實現(xiàn)表單切換效果。
$(".info-item .btn").click(function(){
$(".container").toggleClass("log-in")
});相關(guān)文章
相關(guān)文章
- 無JS，純HTML+CSS實現(xiàn)的表單驗證
- 兩種方法——在input輸入框里放一個搜索小圖標
- 4個實例演示——美化表單input輸入框CSS樣式
- CSS表單輸入框設(shè)計：點擊放大輸入框
- jQuery和CSS3實現(xiàn)有進度條的多步注冊表單
- 帶有浮動占位符(Placeholder)和光亮按鈕的登錄表單
- 純CSS：點擊輸入框時，標簽（占位符）浮動可見
- 純css3實現(xiàn)漂亮的用戶注冊表單
- CSS3+jQuery實現(xiàn)登錄表單與注冊表單同頁平滑切換
- 純CSS3實現(xiàn)簡約又漂亮的用戶登錄框【演示/源碼下載】
- 漂亮的注冊和登錄切換表單【html5和css3實現(xiàn)】
x
- 站長推薦
