您好,登錄后才能下訂單哦!
小編給大家分享一下使用css實現(xiàn)進度跟蹤條的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
這是一個關于如何創(chuàng)建一個非常簡單的UI小部件的小教程,以告訴用戶他們在流程的哪個步驟。
我們將從一小段HTML開始:
<ol class="track-progress"> <li> Site Information </li> <li> Data Source </li> <li> Final Details </li> </ol>
現(xiàn)在,我們將重置有序列表樣式并使列表元素顯示在一行中。我們使用以下CSS代碼:
.track-progress { margin: 0; padding: 0; overflow: hidden; } .track-progress li { list-style-type: none; display: inline-block; position: relative; margin: 0; padding: 0; text-align: center; line-height: 30px; height: 30px; background-color: #f0f0f0; }
你會得到如下的效果:
讓這個跟蹤器占用所有可用的寬度。為了靈活起見,我們將向跟蹤器<ol>標記添加HTML屬性,以聲明進程中的步驟數(shù)。這樣我們可以通過更改屬性值來添加一些默認寬度。
HTML:
<ol class="track-progress" data-steps="3"> <li> Site Information </li> <li> Data Source </li> <li> Final Details </li> </ol>
CSS:
.track-progress[data-steps="3"] li { width: 33%; } .track-progress[data-steps="4"] li { width: 25%; } .track-progress[data-steps="5"] li { width: 20%; }
就變成了如下效果:
要刪除這煩人的空白區(qū)域,我們必須刪除<li>標簽之間的空白區(qū)域。我們可以用HTML注釋來做到這一點:
<ol class="track-progress" data-steps="3"> <li> Site Information </li><!-- --><li> Data Source </li><!-- --><li> Final Details </li> </ol>
效果如下:
我想添加某種箭頭來指示步驟序列中的實際方向,所以我需要額外的標記來將步驟內(nèi)容與其他裝飾材料隔離開來:
<ol class="track-progress" data-steps="3"> <li class="done"> <span>Site Information</span> </li><!-- --><li class="done"> <span>Data Source</span> </li><!-- --><li> <span>Final Details</span> </li> </ol>
我添加了一個完成的類來表示不同風格的進度。這是CSS:
.track-progress li > span { display: block; color: #999; font-weight: bold; text-transform: uppercase; } .track-progress li.done > span { color: #666; background-color: #ccc; }
結果如下:
為了添加箭頭,我們將使用:before和:after偽元素以及賦予邊框巨大尺寸以創(chuàng)建角的技巧:
.track-progress li > span:after,.track-progress li > span:before { content: ""; display: block; width: 0px; height: 0px; position: absolute; top: 0; left: 0; border: solid transparent; border-left-color: #f0f0f0; border-width: 15px; } .track-progress li > span:after { top: -5px; z-index: 1; border-left-color: white; border-width: 20px; } .track-progress li > span:before { z-index: 2; }
效果如下:
現(xiàn)在我們正確應用樣式以使箭頭顏色與上一步的狀態(tài)匹配,并刪除第一個元素中的箭頭:
.track-progress li.done + li > span:before { border-left-color: #ccc; } .track-progress li:first-child > span:after,.track-progress li:first-child > span:before { display: none; }
效果如下:
現(xiàn)在我們要在跟蹤器的開頭和結尾添加箭頭外觀,以便我們添加更多標記:
<ol class="track-progress" data-steps="3"> <li class="done"> <span>Site Information</span> <i></i> </li><!-- --><li class="done"> <span>Data Source</span> </li><!-- --><li> <span>Final Details</span> <i></i> </li> </ol>
.track-progress li:first-child i,.track-progress li:last-child i { display: block; height: 0; width: 0; position: absolute; top: 0; left: 0; border: solid transparent; border-left-color: white; border-width: 15px;}.track-progress li:last-child i { left: auto; right: -15px; border-left-color: transparent; border-top-color: white; border-bottom-color: white;}
最終效果如下:
看完了這篇文章,相信你對使用css實現(xiàn)進度跟蹤條的方法有了一定的了解,想了解更多相關知識,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。