分步式用戶注冊(cè)表單UI界面設(shè)計(jì)制作方法.doc

分步式用戶注冊(cè)表單UI界面設(shè)計(jì)制作方法 這是一款效果非?？岬姆植绞接脩糇?cè)表單UI界面設(shè)計(jì)效果。在這個(gè)設(shè)計(jì)中簡(jiǎn)單的將用戶注冊(cè)分為3個(gè)步驟，用戶填寫(xiě)完每一個(gè)步驟的信息后可以點(diǎn)擊“下一步”按鈕跳轉(zhuǎn)到下一個(gè)步驟，也可以通過(guò)“前一步”按鈕來(lái)查看前面的填寫(xiě)內(nèi)容。在切換步驟的時(shí)候還帶有非常炫酷的過(guò)渡動(dòng)畫(huà)效果。查看演示 下載插件制作方法HTML結(jié)構(gòu)該分步式注冊(cè)表單使用的HTML結(jié)構(gòu)就是一個(gè)普通的表單元素。每一個(gè)注冊(cè)步驟都使用一個(gè)元素來(lái)包裹。1. 2. 3. 4. 賬號(hào)設(shè)置5. 社交賬號(hào)6. 個(gè)人詳細(xì)信息7. 8. 9. 10. 創(chuàng)建你的賬號(hào)11. 這是第一步12. 13. 14. 15. 16. 17. 18. 填寫(xiě)社交賬號(hào)19. 填寫(xiě)你的常用社交網(wǎng)絡(luò)賬號(hào)20. 21. 22. 23. 24. 25. 26. 27. 個(gè)人詳細(xì)信息28. 個(gè)人詳細(xì)信息是保密的，不會(huì)被泄露29. 30. 31. 32. 33. 34. 35. 36. 復(fù)制代碼CSS樣式該分步式用戶注冊(cè)表單的CSS樣式非常簡(jiǎn)單。首先是input元素和按鈕都被簡(jiǎn)單的進(jìn)行了一些美化：1. /*inputs*/2. #msform input, #msform textarea 3. padding: 15px;4. border: 1px solid #ccc;5. border-radius: 3px;6. margin-bottom: 10px;7. width: 100%;8. box-sizing: border-box;9. font-family: Microsoft YaHei,montserrat;10. color: #2C3E50;11. font-size: 13px;12. 13. /*buttons*/14. #msform .action-button 15. width: 100px;16. background: #27AE60;17. font-weight: bold;18. color: white;19. border: 0 none;20. border-radius: 1px;21. cursor: pointer;22. padding: 10px 5px;23. margin: 10px 5px;24. 25. #msform .action-button:hover, #msform .action-button:focus 26. box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;27. 復(fù)制代碼表單頂部的導(dǎo)航進(jìn)度條的顏色顯示效果使用了CSS3的counter()函數(shù)來(lái)統(tǒng)計(jì)步驟，根據(jù)相應(yīng)的步驟填充進(jìn)度條的顏色。1. #progressbar 2. margin-bottom: 30px;3. overflow: hidden;4. /*CSS counters to number the steps*/5. counter-reset: step;6. 7. #progressbar li 8. list-style-type: none;9. color: white;10. text-transform: uppercase;11. font-size: 9px;12. width: 33.33%;13. float: left;14. position: relative;15. 16. #progressbar li:before 17. content: counter(step);18. counter-increment: step;19. width: 20px;20. line-height: 20px;21. display: block;22. font-size: 10px;23. color: #333;24. background: white;25. border-radius: 3px;26. margin: 0 auto 5px auto;27. 復(fù)制代碼進(jìn)度條本身使用的是無(wú)序列表li元素的:after偽元素來(lái)制作。由于第一個(gè)元素是不需要前面的進(jìn)度條的，所以設(shè)置通過(guò)#progressbar li:first-child:after的content為none來(lái)取消它。1. #progressbar li:after 2. content: ;3. width: 100%;4. height: 2px;5. background: white;6. position: absolute;7. left: -50%;8. top: 9px;9. z-index: -1; /*put it behind the numbers*/10. 11. #progressbar li:first-child:after 12. content: none;13. 復(fù)制代碼當(dāng)進(jìn)度條處于激活狀態(tài)時(shí)(當(dāng)前步驟)，進(jìn)度條被設(shè)置為綠底白字。1. #progressbar li.active:before,#progressbar li.active:after2. backgrou