摘要：適用于分步驟操作的頁面導航圖實現結果如下上圖對應下述代碼，稍作修改可以生成下圖。

適用于分步驟操作的頁面導航圖

實現結果如下

上圖對應下述代碼，稍作修改可以生成下圖。

css代碼如下：

@charset "UTF-8";
/**單列寬度 單行高度  列數 行數*/
body {
  font-size: 12px;
  color: #000000;
  font-family: "Microsoft Yahei";
  overflow-x: hidden;
  background: #ffffff; }

/**單列寬度 單行高度  列數 行數*/
.web-width {
  width: 1200px;
  margin: 20px auto; }

.for-liucheng {
  width: 1200px;
  margin: 0 0 0 0;
  height: 160px;
  padding: 0 0 0 0;
  position: relative; }

.liulist {
  float: left;
  width: 300px;
  height: 10px;
  background: #CCCCCC;
  margin-top: 60px; }

.liulists {
  float: left;
  width: 300px;
  height: 100%; }

.liutextbox {
  position: absolute;
  width: 100%;
  height: 160px; }

.liutext {
  float: left;
  width: 300px;
  text-align: center;
  margin-top: 53px; }

.liutexts {
  float: left;
  width: 300px;
  height: 100%;
  text-align: center;
  margin-top: -7px; }

.liutext_2 {
  display: inline-block;
  float: left;
  width: 100%;
  height: 42px;
  text-align: center;
  padding-bottom: 0px; }

em {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: #BDBDBD;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  font-style: normal;
  font-weight: bold;
  color: #fff; }

strong {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  font-weight: 400; }

.for-cur em {
  background: #77b852;
  border: 3px solid #ffffff;
  margin-top: -3px; }

.for-ed em {
  border: 3px solid #F0F0F0;
  margin-top: -3px; }

.for-cur strong {
  color: #77b852; }

.liutext:hover {
  cursor: pointer; }

.liutextbox strong:hover {
  text-decoration: underline; }

.liulists table, table tr th, table tr td {
  border: 10px solid #CCCCCC; }

.liulists td {
  height: 30px; }

.liulists table {
  width: 100%;
  text-align: center;
  border-collapse: collapse; }

html 代碼如下

 
 
   

     

      

      

       
      
      

      

      

      
1
填寫賬戶名
        

           
1
第一步
        
2
第二步
         
2
第二步
          
2
第二步
        
       
3
設置新密碼
       
4
完成
      
     
    
   

  

適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

scss
第一部分的css，可以通過scss 設置變量生成css ，方便計算每個步驟環節的高度寬度，使得流程線和流程的位置能對應顯示，并且此案例的多行線是通過table的border的寬度實現，相關寬高的設置通過scss變量計算，能適應不同的情況的css編寫，具體如下

//sass style
//-----------------------------------

@charset "utf-8";
/**單列寬度 單行高度  列數 行數*/ 
$dwidth: 300px;
$dheight: 30px;
//橫向大環節個數
$anum: 4;
//縱向行個數
$bnum: 4;
$border: 10px;
$height:($dheight+$border) * $bnum - $dheight;  
$allheight:($dheight+$border) * $bnum; 
//圓圈直徑
$circleA: 24px;
//文字  
$textA: 16px;  
body{font-size:12px;color:#000000; font-family:"Microsoft Yahei"; overflow-x:hidden; background:#ffffff;}
  /**單列寬度 單行高度  列數 行數*/ 

.web-width{width: 1200px;margin:20px auto;}

.for-liucheng{width: $dwidth *$anum ;margin:0 0 0 0;height: $allheight;padding:0 0 0 0; position:relative;}

.liulist{float:left;width:$dwidth; height:$border;background:#CCCCCC;margin-top: ($height - $border)/2;}
.liulists{float:left;width:$dwidth; height:100%;}

.liutextbox{ position:absolute;width:100%;height:($dheight+$border) * $bnum;}
.liutext{float:left;width:$dwidth;text-align:center;margin-top: ($height - $border)/2-$circleA/2+$border/2;}
.liutexts{float:left;width:$dwidth;height:100%; text-align:center;margin-top: -$circleA/2+$border/2;}
.liutext_2{display:inline-block;float:left;width:100%; height:$allheight/$bnum+2px;text-align:center;padding-bottom: 0px;}

em{ display:inline-block;width:$circleA; height:$circleA;border-radius:$circleA; background:#BDBDBD; text-align:center; font-size:14px; line-height:$circleA; font-style:normal; font-weight:bold;color:#fff;}
strong{ display:inline-block;height:$textA; line-height:$textA; font-weight:400;}

.for-cur em{ background:#77b852;border:3px solid #ffffff;margin-top: -3px;}
.for-ed em{ border:3px solid #F0F0F0;margin-top: -3px;}
.for-cur strong{color:#77b852;}
.liutext:hover
{
cursor: pointer; 
}
.liutextbox strong:hover
{ 
text-decoration: underline;
}
.liulists table,table tr th, table tr td { border:$border solid #CCCCCC; }
.liulists td { height: $dheight; }
.liulists table { width: 100%;text-align: center; border-collapse: collapse;}