所属分类:网页特效-UI/布局/瀑布流,表单特效
使用方法:
引入CSS样式文件
<link rel="stylesheet" media="screen" href="css/zzsc.css" />
引入jQuery库文件、插件JS文件
<script src="js/jquery-1.9.1.min.js" type="text/javascript">script>
<script src="js/jquery.easing.min.js" type="text/javascript">script>
<script src="js/zzsc.js" type="text/javascript">script>
HTML表单部分
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="下一步" />
</fieldset>
<fieldset>
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="button" name="previous" class="previous action-button" value="上一步" />
<input type="button" name="next" class="next action-button" value="下一步" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="上一步" />
<input type="submit" name="submit" class="submit action-button" value="提交" />
</fieldset>
</form>