CSS流程分步程式碼詳解

admin發表於2018-09-11
CSS

分享一段程式碼例項，它利用css實現了流程進度效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
.steps {
  position:relative;
  margin-bottom:30px;
  /*建立步驟數字計數器*/
  counter-reset:step;  
}
/*步驟描述*/
.steps li {
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  width: 25%;
  position: relative;
  float: left;
}
  
/*步驟數字*/
.steps li:before {
  display: block;
  /*設定計數器內容*/
  content: counter(step); 
  /*計數器值遞增*/
  counter-increment: step;  
  width: 32px;
  height: 32px;
  background-color: #019875;
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin: 0 auto 8px auto;
}
/*連線線*/
.steps li ~ li:after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #019875;
  position: absolute;
  left: -50%;
  top: 15px;
  /*放置在數字層後面*/
  z-index: -1; 
}
  
/*將當前/完成步驟之前連線線變綠*/
.steps li.active:after {
  background-color: #019875;
} 
/*將當前/完成步驟之後的數字及連線線變灰*/
.steps li.active ~ li:before,
.steps li.active ~ li:after {
  background-color: #777;
}
</style>
</head>
<body>
<ul class="steps">
  <li>螞蟻部落一</li>
  <li class="active">螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
*{
  margin:0px;
  padding:0px;
}

將所有元素的內邊距和外邊距設定為0。

[CSS] 純文字檢視 複製程式碼
.steps {
  position:relative;
  margin-bottom:30px;
  /*建立步驟數字計數器*/
  counter-reset:step;  
}

設定class屬性值為steps的元素為相對定位，下外邊距是30px，並且建立一個計數器step，預設值是1。

[CSS] 純文字檢視 複製程式碼
.steps li {
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  width: 25%;
  position: relative;
  float: left;
}

設定li元素的相關樣式。比如去掉列表預設前面的樣式。並且設定其中的字型是水平居中。

寬度值是25% ,又由於有四個進度，所以是橫向平均分配尺寸;float:left可以讓li元素水平排列。

[CSS] 純文字檢視 複製程式碼
/*步驟數字*/
.steps li:before {
  display: block;
  /*設定計數器內容*/
  content: counter(step); 
  /*計數器值遞增*/
  counter-increment: step;  
  width: 32px;
  height: 32px;
  background-color: #019875;
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin: 0 auto 8px auto;
}

在li元素內部通過偽元素選擇器新增一個偽元素。

這個偽元素就是我們看到的圓形元素;並且可以通過計數器功能為其新增數字。並且設定其在li元素中是水平居中。

[CSS] 純文字檢視 複製程式碼
/*連線線*/
.steps li ~ li:after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #019875;
  position: absolute;
  left: -50%;
  top: 15px;
  /*放置在數字層後面*/
  z-index: -1; 
}

.steps li ~ li:after 的作用是在除去第一個li元素以外的其他li元素中通過偽元素選擇器新增一個偽元素，這個偽元素就是綠色橫線;由於這個偽元素是塊級元素，所以它的寬度填滿整個li元素。

left屬性值為-50%的作用是讓當前li元素的橫線向左移動，連線到前一個圓形偽元素，並且由於  z-index:是負數，那麼此橫線會從圓形偽元素下面貫穿，而不會覆蓋上面的數字。

[CSS] 純文字檢視 複製程式碼
.steps li.active:after {
  background-color: #019875;
}

將當前完成步驟之前連線線變綠。

[CSS] 純文字檢視 複製程式碼
.steps li.active ~ li:before,
.steps li.active ~ li:after {
  background-color: #777;
}

將當前完成步驟之後的數字及連線線變灰。

二.相關閱讀:

（1）.:before參閱CSS E:before/E::before一章節。

（2）.border-radius參閱CSS3 border-radius一章節。

（3）.content參閱css content一章節。

相關文章