[CSS] 多種分頁樣式範例

前陣子看到一篇分頁樣式的文章,趁最近在寫文件時順便整理一下:

HTML 長成這樣子:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="pagination digg">
<ul>
<li class="disabled">第一頁</li>
<li class="disabled">上一頁</li>
<li class="current">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=2">下一頁</a></li>
<li><a href="?page=5">最後一頁</a></li>
</ul>
</div>

其中 digg 就是可以代換的樣式,可以用的樣式我都整理到一個 CSS 檔了。至於怎麼產生這個 HTML ,就請大家自行發揮所長囉。

以下是每個樣式長的樣子:

css