分步式用戶注冊表單UI界面設計制作方法這是一款效果非常酷的分步式用戶注冊表單UI界面設計效果。在這個設計中簡單的將用戶注冊分為3個步驟，用戶填寫完每一個步驟的信息后可以點擊“下一步”按鈕跳轉到下一個步驟，也可以通過“前一步”按鈕來查看前面的填寫內容。在切換步驟的時候還帶有非常炫酷的過渡動畫效果。查看演示下載插件查看演示下載插件制作方法HTML結構該分步式注冊表單使用的HTML結構就是一個普通的＜form＞表單元素。每一個注冊步驟都使用一個＜fieldset＞元素來包裹。<formid="msform">2.<!--progressbar--><ulid="progressbar"><liclass="active”〉賬號設置</li><li>社交賬號</li><li>個人詳細信息</li></ul><!--fieldsets--><fieldset><h2class="fs-title”>創建你的賬號</h2><h3class="fs-subtitle">這是第一步</h3><inputtype="text"name="email"placeholder="Email地址”/><inputtype="password"name="pass"placeholder二密碼”/><inputtype="password"name="cpass"placeholder="重復密碼”/><inputtype="button"name="next"class="nextaction-button"value="Next"/></fieldset><fieldset><h2class="fs-title">填寫社交賬號</h2><h3class="fs-subtitle”>填寫你的常用社交網絡賬號</h3><inputtype="text"name=”x-weibo"placeholder='新浪微博”/><inputtype="text"name=”t-weibo"placeholder="**"/><inputtype="text"name="qq"placeholder"騰訊QQ”/>

<inputtype="button"name="previous"class="previousaction-button"value="Previous"/><inputtype="button"name="next"class="nextaction-button"value="Next"/></fieldset><fieldset><h2class="fs-title">個人詳細信息</h2><h3class="fs-subtitle">個人詳細信息是保密的，不會被泄露</h3><inputtype="text"name="fname"placeholder—昵稱"/><inputtype二"text"name="lname"placeholder='姓名"/><inputtype="text"name="phone"placeholder='電話號碼"/><textareaname="address"placeholder—家庭住址"></textarea><inputtype="button"name="previous"class="previousaction-button"value="Previous"/><inputtype="submit"name="submit"class="submitaction-button"value="Submit"/></fieldset></form>復制代碼2.<!--progressbar-->CSS樣式

該分步式用戶注冊表單的CSS樣式非常簡單。首先是input元素和按鈕都被簡單的進行了一些美化：/*inputs*/#msforminput,#msformtextarea(padding:15px;border:1pxsolid#ccc;border-radius:3px;margin-bottom:10px;width:100%;box-sizing:border-box;font-family:"MicrosoftYaHei",montserrat;color:#2C3E50;font-size:13px;}/*buttons*/#msform.action-button(width:100px;background:#27AE60;font-weight:bold;color:white;border:0none;border-radius:1px;cursor:pointer;padding:10px5px;margin:10px5px;TOC\o"1-5"\h\z}#msform.action-button:hover,#msform.action-button:focus(box-shadow:0002pxwhite,0003px#27AE60;}復制代碼表單頂部的導航進度條的顏色顯示效果使用了CSS3的counter()函數來統計步驟，根據相應的步驟填充進度條的顏色。#progressbar(margin-bottom:30px;overflow:hidden;/*CSScounterstonumberthesteps*/counter-reset:step;}#progressbarli(list-style-type:none;color:white;text-transform:uppercase;font-size:9px;width:33.33%;float:left;position:relative;}#progressbarli:before(content:counter(step);counter-increment:step;width:20px;line-height:20px;display:block;font-size:10px;color:#333;background:white;border-radius:3px;margin:0auto5pxauto;}復制代碼進度條本身使用的是無序列表li元素的:after偽元素來制作。由于第一個元素是不需要前面的進度條的，所以設置通Wprogressbarli:first-child:after的content為none來取消它。#progressbarli:after(content:'';width:100%;height:2px;background:white;position:absolute;left:-50%;top:9px;z-index:-1;/*putitbehindthenumbers*/}#progressbarli:first-child:after(content:none;}復制代碼當進度條處于激活狀態時(當前步驟)，進度條被設置為綠底白字。#progressbarli.acti