分步式用戶注冊表單UI界面設(shè)計(jì)制作方法這是一款效果非?？岬姆植绞接脩糇员韱蜺I界面設(shè)計(jì)效果。在這個(gè)設(shè)計(jì)中簡單的將用戶注冊分為3個(gè)步驟，用戶填寫完每一個(gè)步驟的信息后可以點(diǎn)擊“下一步”按鈕跳轉(zhuǎn)到下一個(gè)步驟，也可以通過“前一步”按鈕來查看前面的填寫內(nèi)容。在切換步驟的時(shí)候還帶有非常炫酷的過渡動(dòng)畫效果。查看演示下載插件查看演示下載插件制作方法HTML結(jié)構(gòu)該分步式注冊表單使用的HTML結(jié)構(gòu)就是一個(gè)普通的＜form＞表單元素。每一個(gè)注冊步驟都使用一個(gè)＜fieldset＞元素來包裹。<formid="msform">2.<!--progressbar--><ulid="progressbar"><liclass="active”〉賬號設(shè)置</li><li>社交賬號</li><li>個(gè)人詳細(xì)信息</li></ul><!--fieldsets--><fieldset><h2class="fs-title”>創(chuàng)建你的賬號</h2><h3class="fs-subtitle">這是第一步</h3><inputtype="text"name="email"placeholder="Email地址”/><inputtype="password"name="pass"placeholder二密碼”/><inputtype="password"name="cpass"placeholder="重復(fù)密碼”/><inputtype="button"name="next"class="nextaction-button"value="Next"/></fieldset><fieldset><h2class="fs-title">填寫社交賬號</h2><h3class="fs-subtitle”>填寫你的常用社交網(wǎng)絡(luò)賬號</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">個(gè)人詳細(xì)信息</h2><h3class="fs-subtitle">個(gè)人詳細(xì)信息是保密的，不會(huì)被泄露</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>復(fù)制代碼2.<!--progressbar-->CSS樣式

該分步式用戶注冊表單的CSS樣式非常簡單。首先是input元素和按鈕都被簡單的進(jìn)行了一些美化：/*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;}復(fù)制代碼表單頂部的導(dǎo)航進(jìn)度條的顏色顯示效果使用了CSS3的counter()函數(shù)來統(tǒng)計(jì)步驟，根據(jù)相應(yīng)的步驟填充進(jìn)度條的顏色。#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;}復(fù)制代碼進(jìn)度條本身使用的是無序列表li元素的:after偽元素來制作。由于第一個(gè)元素是不需要前面的進(jìn)度條的，所以設(shè)置通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;}復(fù)制代碼當(dāng)進(jìn)度條處于激活狀態(tài)時(shí)(當(dāng)前步驟)，進(jìn)度條被設(shè)置為綠底白字。#progressbarli.acti