1. 应用外观

    <div class="c_flow">
    	<div class="fn">
    		<div class="left"><a href="#nogo"><span></span></a></div>
    		<div class="right"><a href="#nogo"><span></span></a></div>
    	</div>
    	<div class="content">
    		<div class="node">
    			这里放节点
    		</div>
    		<div class="line">
    			这里放连接线
    		</div>
    		<div class="text">
    			这里放文字
    		</div>
    	</div>
    </div>
    

    【注】div.content 的高度不会随其内容的多少而自动变化,需要自定义,定义方法:

    <div class="content" style="height:100px;">...</div>
    
  2. 节点类型

    【注】节点采用的是绝对定位的方式,需要自定义其位置,定义方法:

    <a href="#nogo" class="step" style="left:10px; top:10px;"><span>基本信息</span></a>
    
    1. 普通节点

      <a href="#nogo" class="step"><span>基本信息</span></a>
      
    2. 当前节点

      <a href="#nogo" class="step on"><span>基本信息</span></a>
      
    3. 已完成节点

      <a href="#nogo" class="step ok"><span>基本信息</span></a>
      
    4. 活动状态节点

      当流程走到某一节点(D)时,返回到(A)步骤,则:(A)步骤从“已完成”状态切换至“当前项”状态;(D)步骤从“当前项”状态切换至“活动项”状态。

      <a href="#nogo" class="step active"><span>基本信息</span></a>
      
    5. 开始/结束节点

      <a href="#nogo" class="start"><span>开始</span></a>
      <a href="#nogo" class="end"><span>结束</span></a>
      
    6. 判断节点

      <a href="#nogo" class="judge"><span>存在</span></a>
      
  3. 连接线类型

    【注】连接线采用的是绝对定位的方式,需要自定义其位置,定义方法:

    <div class="l" style="left:10px; top:10px;"></div>
    
    1. 横线

      <div class="l"></div>
      
    2. 向左的横线

      <div class="l left"></div>
      
    3. 向右的横线

      <div class="l right"></div>
      
    4. 竖线

      <div class="v"></div>
      
    5. 向上的竖线

      <div class="v top"></div>
      
    6. 向下的竖线

      <div class="v bottom"></div>
      
  4. 文字

    【注】文字采用的是绝对定位的方式,需要自定义其位置,定义方法:

    <div style="left:10px; top:10px;">文字</div>
    
    文字