靜態Dom結構：

    <div class="page-normal">
        <span class="pre-page">&lt;</span>
        <span class="current-page">1</span>
        <a href="#" class="other-page">2</a>
        <a href="#" class="other-page">3</a>
        <a href="
 
#" class="other-page">4</a>
        <a href="#" class="other-page">5</a>
        <a href="#" class="other-page">6</a>
        <span class="apos">...</span>
        <a href="#" class="other-page">199</a>
        <a href="#" class="other-page
 
">200</a>
        <a href="#" class="last-page">&gt;</a>
    </div>

CSS註意部分：

1.內聯標簽之間有自帶的間隙，將容器的父元素font-size設置為0就可以去除這個bug，或者使內斂標簽的代碼之間沒有空格。

2.display: inline 只有文字影響布局，邊框以及內外邊距無法撐開容器。但是display：inline-block可以撐起父元素，整個標簽都影響布局。

2.容器設置text-align對inline和inline-block 都有居中的作用。

JavaScript思路：

1.對page-normal所有子元素添加監聽事件；

2.對pre-page和last-page設置，如果current-page為起始或者末尾，將pre-page或者last-page改為對應的span或者a標簽。

2.監聽點擊事件，如果不是a標簽，return。如果是，則跳轉相應鏈接，再執行以下操作。

3.將current-page標簽替換為a標簽，將此a標簽替換為class為current-page的span標簽。

頁碼demo制作