1. 基础外观

    第一页 上一页 6/318 最末页
    <div class="c_page">
    	<div class="turn">
    		<span class="first e_dis">第一页</span>
    		<span class="pre e_dis">上一页</span>
    		<span class="stat"><span>6</span>/318</span>
    		<a href="#nogo" class="next">下一页</a>
    		<a href="#nogo" class="last">最末页</a>
    	</div>
    </div>
    

    【注】每个小部分均可根据情况自行拆卸。

  2. 扩展外观

    1. 分页形式

      1. 枚举

        1 2 ... 10 11 12 13 14 ... 256 257
        <div class="c_page">
        	<div class="num">
        		<a href="#nogo">1</a>
        		<a href="#nogo">2</a>
        		<span class="etc">...</span>
        		<a href="#nogo">10</a>
        		<a href="#nogo">11</a>
        		<span class="on">12</span>
        		<a href="#nogo">13</a>
        		<a href="#nogo">14</a>
        		<span class="etc">...</span>
        		<a href="#nogo">256</a>
        		<a href="#nogo">257</a>
        	</div>
        </div>
        
      2. 跳转

        <div class="c_page">
        	<div class="goto">
        		<span class="e_input e_input-left"><span><input type="text" /></span></span>
        		<a href="#nogo" class="e_button e_button-right"><i class="e_ico-right"></i><span></span></a>
        	</div>
        </div>
        
    2. 部件位置

      1. 第一页 上一页 6/318 最末页
        <div class="c_page">
        	<div class="turn left">
        		<span class="first e_dis">第一页</span>
        		<span class="pre e_dis">上一页</span>
        		<span class="stat"><span>6</span>/318</span>
        		<a href="#nogo" class="next">下一页</a>
        		<a href="#nogo" class="last">最末页</a>
        	</div>
        </div>
        
      2. 第一页 上一页 6/318 最末页
        <div class="c_page">
        	<div class="turn right">
        		<span class="first e_dis">第一页</span>
        		<span class="pre e_dis">上一页</span>
        		<span class="stat"><span>6</span>/318</span>
        		<a href="#nogo" class="next">下一页</a>
        		<a href="#nogo" class="last">最末页</a>
        	</div>
        </div>
        
    3. 逐帧翻页模式的简化形式

      第一页 上一页 6/318 最末页
      <div class="c_page">
      	<div class="turn turn-simple">
      		<span class="first e_dis">第一页</span>
      		<span class="pre e_dis">上一页</span>
      		<span class="stat"><span>6</span>/318</span>
      		<a href="#nogo" class="next">下一页</a>
      		<a href="#nogo" class="last">最末页</a>
      	</div>
      </div>
      
    4. 组合示例

      1 2 ... 10 11 12 13 14 ... 256 257
      第一页 上一页 12/257 最末页
      <div class="c_page">
      	<div class="num left">
      		<a href="#nogo">1</a>
      		<a href="#nogo">2</a>
      		<span class="etc">...</span>
      		<a href="#nogo">10</a>
      		<a href="#nogo">11</a>
      		<span class="on">12</span>
      		<a href="#nogo">13</a>
      		<a href="#nogo">14</a>
      		<span class="etc">...</span>
      		<a href="#nogo">256</a>
      		<a href="#nogo">257</a>
      	</div>
      	<div class="turn center turn-simple">
      		<span class="first e_dis">第一页</span>
      		<span class="pre e_dis">上一页</span>
      		<span class="stat"><span>6</span>/318</span>
      		<a href="#nogo" class="next">下一页</a>
      		<a href="#nogo" class="last">最末页</a>
      	</div>
      	<div class="goto right">
      		<span class="e_input e_input-left"><span><input type="text" /></span></span>
      		<a href="#nogo" class="e_button e_button-right"><i class="e_ico-right"></i><span></span></a>
      	</div>
      </div>