




已閱讀5頁,還剩3頁未讀, 繼續(xù)免費(fèi)閱讀
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
分步式用戶注冊表單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è)普通的表單元素。每一個(gè)注冊步驟都使用一個(gè)元素來包裹。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. 填寫社交賬號(hào)19. 填寫你的常用社交網(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樣式該分步式用戶注冊表單的CSS樣式非常簡單。首先是input元素和按鈕都被簡單的進(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ù)來統(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)度條本身使用的是無序列表li元素的:after偽元素來制作。由于第一個(gè)元素是不需要前面的進(jìn)度條的,所以設(shè)置通過#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. 復(fù)制代碼當(dāng)進(jìn)度條處于激活狀態(tài)時(shí)(當(dāng)前步驟),進(jìn)度條被設(shè)置為綠底白字。1. #progressbar li.active:before,#progressbar li.active:after2. backgrou
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 歷年高考各省語文作文范文5篇
- 旅游度假區(qū)項(xiàng)目風(fēng)險(xiǎn)評估與對策
- 2025年上海奉賢區(qū)機(jī)關(guān)事業(yè)單位招聘考試筆試試題(含答案)
- 老年期課件教學(xué)課件
- 老年護(hù)理課件教學(xué)
- 老師課件導(dǎo)入方法
- 老師安全課堂課件
- 裝修工程驗(yàn)收及保修個(gè)人服務(wù)合同
- 高端人才招聘標(biāo)準(zhǔn)勞動(dòng)合同范本
- 車輛指標(biāo)租賃與城市交通擁堵治理協(xié)議
- 企業(yè)內(nèi)部控制體系構(gòu)建與優(yōu)化研究
- 混凝土部分應(yīng)知應(yīng)會(huì)題庫
- 《建筑與市政工程施工現(xiàn)場臨時(shí)用電安全技術(shù)標(biāo)準(zhǔn)JGJT46-2024》知識(shí)培訓(xùn)
- 木箱包裝合同協(xié)議
- 碼頭項(xiàng)目事故案例
- 針灸美容整形培訓(xùn)課件
- 泛微實(shí)施面試題及答案
- 2025年湖南電氣職業(yè)技術(shù)學(xué)院單招職業(yè)傾向性考試題庫附答案
- 管道施工應(yīng)急預(yù)案
- 2025年1月國家開放大學(xué)法學(xué)本科《中國法律史》期末紙質(zhì)考試試題及答案
- 初中地理跨學(xué)科主題學(xué)習(xí)設(shè)計(jì)與實(shí)施
評論
0/150
提交評論