1. 基础外观

    <div class="c_guide">
    	<div class="c_guideFn">
    		<a class="unfoldFlow" href="#nogo"></a>
    	</div>
    	<div class="c_guideStep">
    		<ul>
    			<li class="first"><a href="#nogo">基本信息</a></li>
    			<li><a href="#nogo">产品信息</a></li>
    			<li><a href="#nogo">亲情信息</a></li>
    			<li><a href="#nogo">活动信息</a></li>
    			<li><a href="#nogo">邮寄信息</a></li>
    			<li class="last"><a href="#nogo">开户预览</a></li>
    		</ul>
    	</div>
    	<div class="c_guideShadow"></div>
    	<div class="c_guideContent"><div class="c_guideWrapper">
    		这里可以放置任何组件
    	</div></div>
    	<div class="c_guideSubmit">
    		<a class="reset" href="#nogo">全部重置</a>
    		<a href="#nogo">上一步</a>
    		<a href="#nogo">下一步</a>
    	</div>
    </div>
    
  2. 扩展外观

    1. 步骤状态设置

      1. 当前项

        <div class="c_guide">
        	<div class="c_guideFn">
        		<a class="unfoldFlow" href="#nogo"></a>
        	</div>
        	<div class="c_guideStep">
        		<ul>
        			<li class="first on"><a href="#nogo">基本信息</a></li>
        			<li class="on"><a href="#nogo">产品信息</a></li>
        			<li><a href="#nogo">亲情信息</a></li>
        			<li><a href="#nogo">活动信息</a></li>
        			<li><a href="#nogo">邮寄信息</a></li>
        			<li class="last"><a href="#nogo">开户预览</a></li>
        		</ul>
        	</div>
        	<div class="c_guideShadow"></div>
        	<div class="c_guideContent"><div class="c_guideWrapper">
        		这里可以放置任何组件
        	</div></div>
        	<div class="c_guideSubmit">
        		<a class="reset" href="#nogo">全部重置</a>
        		<a href="#nogo">上一步</a>
        		<a href="#nogo">下一步</a>
        	</div>
        </div>
        
      2. 已完成

        <div class="c_guide">
        	<div class="c_guideFn">
        		<a class="unfoldFlow" href="#nogo"></a>
        	</div>
        	<div class="c_guideStep">
        		<ul>
        			<li class="first ok"><a href="#nogo">基本信息</a></li>
        			<li class="ok"><a href="#nogo">产品信息</a></li>
        			<li><a href="#nogo">亲情信息</a></li>
        			<li><a href="#nogo">活动信息</a></li>
        			<li><a href="#nogo">邮寄信息</a></li>
        			<li class="last"><a href="#nogo">开户预览</a></li>
        		</ul>
        	</div>
        	<div class="c_guideShadow"></div>
        	<div class="c_guideContent"><div class="c_guideWrapper">
        		这里可以放置任何组件
        	</div></div>
        	<div class="c_guideSubmit">
        		<a class="reset" href="#nogo">全部重置</a>
        		<a href="#nogo">上一步</a>
        		<a href="#nogo">下一步</a>
        	</div>
        </div>
        
      3. 活动项

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

        <div class="c_guide">
        	<div class="c_guideFn">
        		<a class="unfoldFlow" href="#nogo"></a>
        	</div>
        	<div class="c_guideStep">
        		<ul>
        			<li class="first"><a href="#nogo">基本信息</a></li>
        			<li><a href="#nogo">产品信息</a></li>
        			<li><a href="#nogo">亲情信息</a></li>
        			<li><a href="#nogo">活动信息</a></li>
        			<li class="active"><a href="#nogo">邮寄信息</a></li>
        			<li class="last active"><a href="#nogo">开户预览</a></li>
        		</ul>
        	</div>
        	<div class="c_guideShadow"></div>
        	<div class="c_guideContent"><div class="c_guideWrapper">
        		这里可以放置任何组件
        	</div></div>
        	<div class="c_guideSubmit">
        		<a class="reset" href="#nogo">全部重置</a>
        		<a href="#nogo">上一步</a>
        		<a href="#nogo">下一步</a>
        	</div>
        </div>
        
    2. 流程图控制

      1. 展开

        <div class="c_guide">
        	<div class="c_guideFn">
        		<a class="unfoldFlow" href="#nogo"></a>
        	</div>
        	<div class="c_guideStep">
        		<ul>
        			<li class="first"><a href="#nogo">基本信息</a></li>
        			<li><a href="#nogo">产品信息</a></li>
        			<li><a href="#nogo">亲情信息</a></li>
        			<li><a href="#nogo">活动信息</a></li>
        			<li><a href="#nogo">邮寄信息</a></li>
        			<li class="last"><a href="#nogo">开户预览</a></li>
        		</ul>
        	</div>
        	<div class="c_guideShadow"></div>
        	<div class="c_guideContent"><div class="c_guideWrapper">
        		这里可以放置任何组件
        	</div></div>
        	<div class="c_guideSubmit">
        		<a class="reset" href="#nogo">全部重置</a>
        		<a href="#nogo">上一步</a>
        		<a href="#nogo">下一步</a>
        	</div>
        </div>
        
      2. 折叠

        <div class="c_guide">
        	<div class="c_guideFn">
        		<a class="foldFlow" href="#nogo"></a>
        	</div>
        	<div class="c_guideStep">
        		<ul>
        			<li class="first"><a href="#nogo">基本信息</a></li>
        			<li><a href="#nogo">产品信息</a></li>
        			<li><a href="#nogo">亲情信息</a></li>
        			<li><a href="#nogo">活动信息</a></li>
        			<li><a href="#nogo">邮寄信息</a></li>
        			<li class="last"><a href="#nogo">开户预览</a></li>
        		</ul>
        	</div>
        	<div class="c_guideShadow"></div>
        	<div class="c_guideContent"><div class="c_guideWrapper">
        		这里可以放置任何组件
        	</div></div>
        	<div class="c_guideSubmit">
        		<a class="reset" href="#nogo">全部重置</a>
        		<a href="#nogo">上一步</a>
        		<a href="#nogo">下一步</a>
        	</div>
        </div>
        

      【注】在该区域中,还能放置其他功能元素(例如:button)。

    3. 完成按钮

      <div class="c_guide">
      	<div class="c_guideFn">
      		<a class="foldFlow" href="#nogo"></a>
      	</div>
      	<div class="c_guideStep">
      		<ul>
      			<li class="first"><a href="#nogo">基本信息</a></li>
      			<li><a href="#nogo">产品信息</a></li>
      			<li><a href="#nogo">亲情信息</a></li>
      			<li><a href="#nogo">活动信息</a></li>
      			<li><a href="#nogo">邮寄信息</a></li>
      			<li class="last"><a href="#nogo">开户预览</a></li>
      		</ul>
      	</div>
      	<div class="c_guideShadow"></div>
      	<div class="c_guideContent"><div class="c_guideWrapper">
      		这里可以放置任何组件
      	</div></div>
      	<div class="c_guideSubmit">
      		<a class="reset" href="#nogo">全部重置</a>
      		<a href="#nogo">上一步</a>
      		<a href="#nogo class="finish">完成</a>
      	</div>
      </div>
      
    4. 内容区高度

      <div class="c_guide">
      	<div class="c_guideFn">
      		<a class="foldFlow" href="#nogo"></a>
      	</div>
      	<div class="c_guideStep">
      		<ul>
      			<li class="first"><a href="#nogo">基本信息</a></li>
      			<li><a href="#nogo">产品信息</a></li>
      			<li><a href="#nogo">亲情信息</a></li>
      			<li><a href="#nogo">活动信息</a></li>
      			<li><a href="#nogo">邮寄信息</a></li>
      			<li class="last"><a href="#nogo">开户预览</a></li>
      		</ul>
      	</div>
      	<div class="c_guideShadow"></div>
      	<div class="c_guideContent" style="height:150px;"><div class="c_guideWrapper">
      		这里可以放置任何组件
      	</div></div>
      	<div class="c_guideSubmit">
      		<a href="#nogo">上一步</a>
      		<a href="#nogo>完成</a>
      	</div>
      </div>
      
    5. 使用 iframe 替换内容区

      <div class="c_guide">
      	<div class="c_guideFn">
      		<a class="foldFlow" href="#nogo"></a>
      	</div>
      	<div class="c_guideStep">
      		<ul>
      			<li class="first"><a href="#nogo">基本信息</a></li>
      			<li><a href="#nogo">产品信息</a></li>
      			<li><a href="#nogo">亲情信息</a></li>
      			<li><a href="#nogo">活动信息</a></li>
      			<li><a href="#nogo">邮寄信息</a></li>
      			<li class="last"><a href="#nogo">开户预览</a></li>
      		</ul>
      	</div>
      	<iframe frameborder="0" src="url"></iframe>
      	<div class="c_guideSubmit">
      		<a class="reset" href="#nogo">全部重置</a>
      		<a href="#nogo">上一步</a>
      		<a href="#nogo>完成</a>
      	</div>
      </div>