基础外观

<div class="c_topTabPageAutoOff"><div class="c_topTabPage"><div class="c_topTabPageWrapper">
	<div class="c_topTabPageFlowOff">
		<div class="c_topTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
			<ul>
				<!-- 项循环 开始 -->
				<li>
					<a href="#nogo" class="li">
						<span class="top"></span>
						<span class="text">标签文字</span>
						<span class="bottom"></span>
					</a>
				</li>
				<!- 项循环 结束 -->
			</ul>
		</div></div></div></div>
	</div>
	<div class="c_topTabPagePage"><div class="c_topTabPageContent"><div class="c_topTabPageContentWrapper">
		<!- 此处显示当前标签的内容 -->
	</div></div></div>
</div></div></div>

扩展外观

1. 设置标签位置

   1. 下方

      • 元素
      • 组件
      • 布局
      显示代码

      <div class="c_bottomTabPageAutoOff"><div class="c_bottomTabPage"><div class="c_bottomTabPageWrapper">
      	<div class="c_bottomTabPageFlowOff">
      		<div class="c_bottomTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
      			<ul>
      				<li>
      					<a href="#nogo" class="li">
      						<span class="top"></span>
      						<span class="text">标签文字</span>
      						<span class="bottom"></span>
      					</a>
      				</li>
      			</ul>
      		</div></div></div></div>
      	</div>
      	<div class="c_bottomTabPagePage"><div class="c_bottomTabPageContent"><div class="c_bottomTabPageContentWrapper">
      		<!- 此处显示当前标签的内容 -->
      	</div></div></div>
      </div></div></div>
      

   2. 左侧

      • 元素
      • 组件
      • 布局
      显示代码

      <div class="c_leftTabPageAutoOff"><div class="c_leftTabPage"><div class="c_leftTabPageWrapper">
      	<div class="c_leftTabPageFlowOff">
      		<div class="c_leftTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
      			<ul>
      				<li>
      					<a href="#nogo" class="li">
      						<span class="top"></span>
      						<span class="text">标签文字</span>
      						<span class="bottom"></span>
      					</a>
      				</li>
      			</ul>
      		</div></div></div></div>
      	</div>
      	<div class="c_leftTabPagePage"><div class="c_leftTabPageContent"><div class="c_leftTabPageContentWrapper">
      		<!- 此处显示当前标签的内容 -->
      	</div></div></div>
      </div></div></div>
      

   3. 右侧

      • 元素
      • 组件
      • 布局
      显示代码

      <div class="c_rightTabPageAutoOff"><div class="c_rightTabPage"><div class="c_rightTabPageWrapper">
      	<div class="c_rightTabPageFlowOff">
      		<div class="c_rightTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
      			<ul>
      				<li>
      					<a href="#nogo" class="li">
      						<span class="top"></span>
      						<span class="text">标签文字</span>
      						<span class="bottom"></span>
      					</a>
      				</li>
      			</ul>
      		</div></div></div></div>
      	</div>
      	<div class="c_rightTabPagePage"><div class="c_rightTabPageContent"><div class="c_rightTabPageContentWrapper">
      		<!- 此处显示当前标签的内容 -->
      	</div></div></div>
      </div></div></div>
      

2. 页面流状态

   • 开始
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 结束
   显示代码

   <div class="c_topTabPageAutoOff"><div class="c_topTabPage"><div class="c_topTabPageWrapper">
   	<div class="c_topTabPageFlowOn">
   		<div class="c_topTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
   			<ul>
   				<li class="start">
   					<span class="button">
   						<span class="top"></span>
   						<span class="text">开始</span>
   						<span class="bottom"></span>
   					</span>
   				</li>
   				<!-- 项循环 开始 -->
   				<li>
   					<a href="#nogo" class="li">
   						<span class="top"></span>
   						<span class="text">标签文字</span>
   						<span class="bottom"></span>
   					</a>
   				</li>
   				<!- 项循环 结束 -->
   				<li class="over">
   					<span class="button">
   						<span class="top"></span>
   						<span class="text">结束</span>
   						<span class="bottom"></span>
   					</span>
   				</li>
   			</ul>
   		</div></div></div></div>
   	</div>
   	<div class="c_topTabPagePage"><div class="c_topTabPageContent"><div class="c_topTabPageContentWrapper">
   		<!- 此处显示当前标签的内容 -->
   	</div></div></div>
   </div></div></div>
   

   【使用前提】标签位置必须在上方。

3. 标签状态设置

   1. 已完成的步骤（仅适用于“页面流状态”）

      • 开始
      • 基本信息
      • 产品信息
      • 邮寄信息
      • 结束
      显示代码

      <div class="c_topTabPageAutoOff"><div class="c_topTabPage"><div class="c_topTabPageWrapper">
      	<div class="c_topTabPageFlowOn">
      		<div class="c_topTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
      			<ul>
      				<!-- 项循环 开始 -->
      				<li>
      					<a href="#nogo" class="li finish">
      						<span class="top"></span>
      						<span class="text">标签文字</span>
      						<span class="bottom"></span>
      					</a>
      				</li>
      				<!- 项循环 结束 -->
      			</ul>
      		</div></div></div></div>
      	</div>
      	<div class="c_topTabPagePage"><div class="c_topTabPageContent"><div class="c_topTabPageContentWrapper">
      		<!- 此处显示当前标签的内容 -->
      	</div></div></div>
      </div></div></div>
      

   2. 当前正在进行的步骤（仅适用于“页面流状态”）

      • 开始
      • 基本信息
      • 产品信息
      • 邮寄信息
      • 结束
      显示代码

      <div class="c_topTabPageAutoOff"><div class="c_topTabPage"><div class="c_topTabPageWrapper">
      	<div class="c_topTabPageFlowOn">
      		<div class="c_topTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
      			<ul>
      				<!-- 项循环 开始 -->
      				<li>
      					<a href="#nogo" class="li active">
      						<span class="top"></span>
      						<span class="text">标签文字</span>
      						<span class="bottom"></span>
      					</a>
      				</li>
      				<!- 项循环 结束 -->
      			</ul>
      		</div></div></div></div>
      	</div>
      	<div class="c_topTabPagePage"><div class="c_topTabPageContent"><div class="c_topTabPageContentWrapper">
      		<!- 此处显示当前标签的内容 -->
      	</div></div></div>
      </div></div></div>
      

   3. 载入中的标签页

      • 基本信息
      • 产品信息
      • 邮寄信息
      显示代码

      <div class="c_topTabPageAutoOff"><div class="c_topTabPage"><div class="c_topTabPageWrapper">
      	<div class="c_topTabPageFlowOff">
      		<div class="c_topTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
      			<ul>
      				<!-- 项循环 开始 -->
      				<li>
      					<a href="#nogo" class="li loading">
      						<span class="top"></span>
      						<span class="text">标签文字</span>
      						<span class="bottom"></span>
      					</a>
      				</li>
      				<!- 项循环 结束 -->
      			</ul>
      		</div></div></div></div>
      	</div>
      	<div class="c_topTabPagePage"><div class="c_topTabPageContent"><div class="c_topTabPageContentWrapper">
      		<!- 此处显示当前标签的内容 -->
      	</div></div></div>
      </div></div></div>
      

4. 加入标签页组移动查看按钮

   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 基本信息
   • 产品信息
   • 邮寄信息
   显示代码

   <div class="c_topTabPageAutoOff"><div class="c_topTabPage"><div class="c_topTabPageWrapper">
   	<div class="c_topTabPageFlowOff">
   		<div class="c_topTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
   			<ul>
   				<!-- 项循环 开始 -->
   				<li>
   					<a href="#nogo" class="li">
   						<span class="top"></span>
   						<span class="text">标签文字</span>
   						<span class="bottom"></span>
   					</a>
   				</li>
   				<!- 项循环 结束 -->
   			</ul>
   		</div></div></div></div>
   		<div class="c_topTabPageTurner">
   			<ul>
   				<li><a href="#nogo" title="前移标签组" class="pre"></a></li>
   				<li><a href="#nogo" title="后移标签组" class="next"></a></li>
   				<li><a href="#nogo" title="复位标签组" class="default"></a></li>
   			</ul>
   		</div>
   	</div>
   	<div class="c_topTabPagePage"><div class="c_topTabPageContent"><div class="c_topTabPageContentWrapper">
   		<!- 此处显示当前标签的内容 -->
   	</div></div></div>
   </div></div></div>
   

   【使用前提】标签位置必须在上方。

5. 加入流程图显示按钮（仅适用于“页面流状态”）

   • 开始
   • 基本信息
   • 产品信息
   • 邮寄信息
   • 结束

   流程图
   显示代码

   <div class="c_topTabPageAutoOff"><div class="c_topTabPage"><div class="c_topTabPageWrapper">
   	<div class="c_topTabPageFlowOn">
   		<div class="c_topTabPageTab"><div class="wrapper"><div class="wrapper2"><div class="wrapper3">
   			<ul>
   				<!-- 项循环 开始 -->
   				<li>
   					<a href="#nogo" class="li">
   						<span class="top"></span>
   						<span class="text">标签文字</span>
   						<span class="bottom"></span>
   					</a>
   				</li>
   				<!- 项循环 结束 -->
   			</ul>
   		</div></div></div></div>
   		<div class="showFlowPic">
   			<a class="button" href="#nogo">
   				<span class="top"></span>
   				<span class="text"><span>流程图</span></span>
   				<span class="bottom"></span>
   			</a>
   		</div>
   	</div>
   	<div class="c_topTabPagePage"><div class="c_topTabPageContent"><div class="c_topTabPageContentWrapper">
   		<!- 此处显示当前标签的内容 -->
   	</div></div></div>
   </div></div></div>
   

   【使用前提】标签位置必须在上方。