在我們?nèi)粘Ｉ钪?，上網(wǎng)沖浪幾乎是每天都做的一件事情，瀏覽新聞，查找信息，購(gòu)物等，或多或少的都會(huì)看到網(wǎng)頁(yè)中內(nèi)容列表下方都有一行分頁(yè)列表，一般這種分頁(yè)列表包含有首頁(yè)，上一頁(yè)，具體頁(yè)，下一頁(yè)，最后一頁(yè)等按鈕，大多數(shù)分頁(yè)列表中的上一頁(yè)下一頁(yè)是用的“<”，“>”左右箭頭表現(xiàn)的，但是也有些網(wǎng)站上的上一頁(yè)下一頁(yè)是由設(shè)計(jì)師畫(huà)的箭頭來(lái)表示的，而這種箭頭就不是單純的能用左右箭頭來(lái)實(shí)現(xiàn)了。
 
最近工作中就遇到了一個(gè)比較符合網(wǎng)站主題的分頁(yè)列表，設(shè)計(jì)師的功力很深厚，設(shè)計(jì)稿中的分頁(yè)列表如下圖：  
由圖可以看到，有具體的分頁(yè)項(xiàng)，還有上一頁(yè)下一頁(yè)和最后一頁(yè)（圖中 12），下面是具體實(shí)現(xiàn)這個(gè)分頁(yè)列表的代碼：

 
一開(kāi)始的時(shí)候看到這個(gè)分頁(yè)列表，就想著不需要把箭頭切出來(lái)，直接用左右箭頭就能實(shí)現(xiàn)，不就是給個(gè)顏色，字號(hào)，加粗嘛，然后發(fā)現(xiàn)事實(shí)上有點(diǎn)想當(dāng)然了

用左右箭頭實(shí)現(xiàn)的上一頁(yè)下一頁(yè)長(zhǎng)得和設(shè)計(jì)稿上的不一樣，于是想著把箭頭單獨(dú)切出來(lái)放進(jìn)去，來(lái)實(shí)現(xiàn)設(shè)計(jì)稿上的上一頁(yè)下一頁(yè)按鈕，說(shuō)干就干：

 
如此便實(shí)現(xiàn)了設(shè)計(jì)稿上的分頁(yè)列表了。
 

雖說(shuō)是實(shí)現(xiàn)了，但是我又想能不能把箭頭寫(xiě)到背景里面去，讓代碼頁(yè)面保持相對(duì)美觀些呢，于是問(wèn)題來(lái)了

 
上一頁(yè)下一頁(yè)與具體頁(yè)不是垂直居中的，看著有點(diǎn)不對(duì)勁，然后就是調(diào)整了，margin啊，padding啊，vertiacl-align:middle都嘗試過(guò)，達(dá)不到想要的效果，既然css調(diào)整不過(guò)來(lái)，我就想是不是a標(biāo)簽的問(wèn)題，是不是空的a標(biāo)簽和有內(nèi)容的a標(biāo)簽放到一起會(huì)有某種差別，于是我又開(kāi)始嘗試，加個(gè)空格：

很不給面子，完全沒(méi)有反應(yīng)。我又想，是不是單純的空格鍵敲出來(lái)的空格是不是被判定為空了，那么換成空格符   試試看，

 
嚯，居中了!
 

至此，分頁(yè)列表的問(wèn)題基本解決了，然后就是給出當(dāng)前頁(yè)的表現(xiàn)狀態(tài)，調(diào)整間距了，最終比較完美的實(shí)現(xiàn)了設(shè)計(jì)稿上的分頁(yè)列表：

最終實(shí)現(xiàn)的代碼如下：

代碼的世界很奇妙，很多工程師研發(fā)了各種美妙的庫(kù)類插件，各種代碼框架，就像是通向羅馬的條條大路很是神奇壯闊，而開(kāi)發(fā)中的某些BUG就像大路邊上的野花一樣，能引起你的興趣，讓你發(fā)動(dòng)思維去研究去發(fā)現(xiàn)，從而產(chǎn)生一些別致的情緒。我想這也是代碼世界中的美妙之一吧。
作者：方維網(wǎng)絡(luò)前端工程師樂(lè)文慶