1. 背景

当数据表格需要加载的数据很多时，往往将数据分页，此时就需要分页栏来展现页码信息。

许多前端框架，例如BootStrap、Element都提供了分页栏，看起来简单大气上档次。

本篇我们来实现一个自己的分页栏，代码只有寥寥几行，但是效果还是可以滴，如下图：

2. 开发步骤

2.1 编写ul分页列表

分页中的每个按钮都是并列关系，所以可以使用ul列表来表示，另外pagination是分页的意思：

  	<ul class="pagination">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="selected"><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">下一页</a></li>
    </ul>

此时效果如下：

2.2 优化列表样式

让列表内外边距归零，省的影响我们的自定义样式，然后去掉丑丑的黑色圆点。

		.pagination {
    
    
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

此时效果如下：

2.3 调整列表项样式

默认列表项是块元素，垂直排列。我们将其显示类型设置为inline-block行内块元素，就水平排列啦，然后调整下外边距让列表项松散一些。

 		.pagination li {
    
    
            display: inline-block;
            margin-right: 8px;
        }

此时效果如下：

2.4 调整超链接样式

让超链接也作为行内块元素，这样能占据一定的空间。然后去掉恼人的下划线。

通过调整内边距padding，让超链接的边框与内容文字远离，这样比较好看些。最后给一个灰色的边框，往往灰色边框是万能的好看。

		.pagination li a {
    
    
            display: inline-block;
            text-decoration: none;
            padding: 4px 8px;
            border: 1px solid lightgrey;
        }

此时效果如下：

2.5 调整悬停、激活效果

一般来说，悬停时让背景色加深、激活时让字体变为斜体，这样会显得动态活泼。

 		.pagination li a:hover {
    
    
            background-color: lightblue;
            color: white;
        }
        .pagination li a:active {
    
    
            font-style: italic;
        }

此时效果如下：

2.6 添加选中项效果

分页按钮，会有一个页码是被选中的，在html部分可以通过.select样式类描述，例如上面的代码中的第3页：

 	<li class="selected"><a href="#">3</a></li>

选中项可以通过深色背景凸显出来：

 		.pagination .selected a {
    
    
            background-color: cornflowerblue;
            color: white;
        }

此时效果如下：

3. 小结

小小分页很简单，学习学习有意义。