Ordered list ol beautiful css paging style code (pure css)

Ordered list ol beautiful css paging style code (pure css)_link effects

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-05-16 18:09:28

Original

1814 people have browsed it

<title>Ordered list ol beautiful paging style</title>

<h3>Ordered list ol paging source code/style</h3>
<ul class="pagination" title="分页列表">
<li class="totalAnnal">Total number of records: <i>3</i>
</li>
<li class="totalPage">Total number of pages: <i>3</i>
</li>
<li class="currentPage">Current page: <b>3</b>
</li>
<li class="firstPage currentState">
<a href="javascript:;" title="首页">Home</a>
</li>
<li class="previousPage currentState">
<a href="javascript:;" title="前一页">Previous page</a>
</li>
<li>
<ol>
<li><a title="转到第1页" href="javascript:;">1</a></li>
<li><a title="转到第2页" href="javascript:;">2</a></li>
<li class="currentState" title="当前页">
<a href="javascript:;">3</a>
</li>
<li><a title="转到第4页" href="javascript:;">4</a></li>
<li><a title="转到第5页" href="javascript:;">5</a></li>
<li><a title="转到第6页" href="javascript:;">6</a></li>
<li><a title="转到第7页" href="javascript:;">7</a></li>
<li><a title="转到第8页" href="javascript:;">8</a></li>
<li><a title="转到第9页" href="javascript:;">9</a></li>
</ol>
</li>
<li class="nextPage">
<a href="javascript:;" title="后一页">Next page</a>
</li>
<li class="lastPage">
<a href="javascript:;" title="尾页">Last page</a>
</li>
</ul>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]