html
<div class="pagination"> <span class="disabled" title="首页">首页</span> <span class="disabled" title="上一页">上一页</span> <span class="current">1</span><span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>下一页</span> <span>尾页</span> </div>
css样式
.pagination{ text-align: center;font-size: 12px;padding: 10px 0;display:inline-block} .pagination a,.pagination span{display: inline-block;padding: 0 10px;height: 28px;line-height: 28px;border: 1px solid #ddd;border-radius: 4px;text-decoration: none;color: #999;cursor: pointer; margin-right:5px;} .pagination a:hover:not(.disabled):not(.current),.pagination span:hover:not(.disabled):not(.current){color:#f04848} .pagination a.disabled,.pagination span.disabled{color: #bfbfbf;background: #f5f5f5;cursor: no-drop;border: 1px solid #ddd;} .pagination a.current,.pagination span.current{color: #fff;background: #f04848;border: 1px solid #f04848;}