-
大小: 7.88KB文件類型: .zip金幣: 1下載: 0 次發布日期: 2021-01-30
- 語言: JavaScript
- 標簽: 彈窗??登錄??
資源簡介
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示:jQuery彈出窗口切換登錄與注冊表單</title>
<meta name="keywords" content="jquery,注冊" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="main">
<div class="demo">
<nav class="main_nav">
<ul>
<li><a class="cd-signin" href="#0">登錄</a></li>
<li><a class="cd-signup" href="#1">注冊</a></li>
</ul>
</nav>
</div>
<div class="cd-user-modal">
<div class="cd-user-modal-container">
<ul class="cd-switcher">
<li><a href="#0">用戶登錄</a></li>
<li><a href="#1">注冊新用戶</a></li>
</ul>
<div id="cd-login"> <!-- 登錄表單 -->
<form class="cd-form">
<p class="fieldset">
<label>郵箱</label>
<input class="full-width has-padding has-border" id="signin-email" type="text" placeholder="輸入郵箱">
</p>
<p class="fieldset">
<label>密碼</label>
<input class="full-width has-padding has-border" id="signin-password" type="text" placeholder="輸入密碼">
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me" class="remeber">記住登錄狀態</label>
</p>
<p class="fieldset">
<input class="full-width2" type="submit" value="登 錄">
</p>
</form>
</div>
<div id="cd-signup"> <!-- 注冊表單 -->
<form class="cd-form">
<p class="fieldset">
<label>郵箱</label>
<input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="輸入mail">
</p>
<p class="fieldset">
<label>密碼</label>
<input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="輸入密碼">
</p>
<p class="fieldset">
<label>姓名</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="輸入姓名">
</p>
<p class="fieldset">
<label>手機</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="輸入手機號碼">
</p>
<p class="fieldset">
<label>性別</label>
<input type="radio" name="signup-sex" value="">男
<input type="radio" name="signup-sex" value="">女
</p>
<p class="fieldset">
<input class="full-width2" type="submit" value="注冊新用戶">
</p>
</form>
</div>
<a href="#0" class="cd-close-form">關閉</a>
</div>
</div>
</div>
</body>
</html>
代碼片段和文件信息
-----------?---------??----------?-----??----
?????目錄???????????0??2015-05-17?17:16??js\
?????文件????????2487??2015-05-17?17:08??js\main.js
?????文件????????3915??2015-05-17?15:12??index.html
?????目錄???????????0??2015-05-17?15:08??css\
?????文件????????5741??2015-05-17?17:16??css\st
?????目錄???????????0??2015-05-17?15:08??img\
?????文件?????????706??2014-05-20?17:26??img\cd-icon-close.svg
?????文件?????????838??2014-05-20?17:26??img\cd-icon-email.svg
?????文件?????????746??2014-05-20?17:26??img\cd-icon-menu.svg
?????文件?????????853??2014-05-20?17:26??img\cd-icon-password.svg
?????文件?????????948??2014-05-20?17:26??img\cd-icon-username.svg
?????文件?????????753??2014-05-20?17:26??img\cd-logo.svg
- 上一篇:Struts2
- 下一篇:HTML5+jQuery制作溫馨浪漫愛心表白動畫特效
評論
共有 條評論