小編給大家分享一下使用css實現(xiàn)進度跟蹤條的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

陸河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

這是一個關(guā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>

我添加了一個完成的類來表示不同風(fēng)格的進度。這是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;
  }

結(jié)果如下：

為了添加箭頭，我們將使用: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)在我們正確應(yīng)用樣式以使箭頭顏色與上一步的狀態(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)在我們要在跟蹤器的開頭和結(jié)尾添加箭頭外觀，以便我們添加更多標記：

<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)進度跟蹤條的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁名稱：使用css實現(xiàn)進度跟蹤條的方法-創(chuàng)新互聯(lián)
文章路徑：http://aaarwkj.com/article8/ccpcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、面包屑導(dǎo)航、商城網(wǎng)站、建站公司、營銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)