css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS

摘要：适用于分步骤操作的页面导航图实现结果如下上图对应下述代码，稍作修改可以生成下图。

适用于分步骤操作的页面导航图

实现结果如下

上图对应下述代码，稍作修改可以生成下图。

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编写，具体如下

</>code
//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;}