分步式用戶注冊表單UI界面設計制作方法.doc

分步式用戶注冊表單UI界面設計制作方法 這是一款效果非常酷的分步式用戶注冊表單UI界面設計效果。在這個設計中簡單的將用戶注冊分為3個步驟，用戶填寫完每一個步驟的信息后可以點擊“下一步”按鈕跳轉到下一個步驟，也可以通過“前一步”按鈕來查看前面的填寫內容。在切換步驟的時候還帶有非常炫酷的過渡動畫效果。查看演示 下載插件制作方法HTML結構該分步式注冊表單使用的HTML結構就是一個普通的表單元素。每一個注冊步驟都使用一個元素來包裹。1. 2. 3. 4. 賬號設置5. 社交賬號6. 個人詳細信息7. 8. 9. 10. 創(chuàng)建你的賬號11. 這是第一步12. 13. 14. 15. 16. 17. 18. 填寫社交賬號19. 填寫你的常用社交網(wǎng)絡賬號20. 21. 22. 23. 24. 25. 26. 27. 個人詳細信息28. 個人詳細信息是保密的，不會被泄露29. 30. 31. 32. 33. 34. 35. 36. 復制代碼CSS樣式該分步式用戶注冊表單的CSS樣式非常簡單。首先是input元素和按鈕都被簡單的進行了一些美化：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. 復制代碼表單頂部的導航進度條的顏色顯示效果使用了CSS3的counter()函數(shù)來統(tǒng)計步驟，根據(jù)相應的步驟填充進度條的顏色。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. 復制代碼進度條本身使用的是無序列表li元素的:after偽元素來制作。由于第一個元素是不需要前面的進度條的，所以設置通過#progressbar li:first-child:after的content為none來取消它。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. 復制代碼當進度條處于激活狀態(tài)時(當前步驟)，進度條被設置為綠底白字。1. #progressbar li.active:before,#progressbar li.active:after2. backgrou