分页代码:
css代码:
- /*分页*/
- <div class="pager">{$pages}</div>
1、有间隔CSS样式
2、没有分隔css样式
- /*分页*/
- .pager {text-align: center; margin: 20px 0;}
- .pager ul {display: flex; flex-wrap: wrap; justify-content: center}
- .pager ul li {display: inline-block;}
- .pager ul li a {padding: 5px 15px; margin: 15px 5px; border: #dddddd solid 1px; display: inline-block;}
- .pager ul li a:hover {border: #3ea8e2 solid 1px; color: #3ea8e2}
- .pager ul .active a {border: #3ea8e2 solid 1px; display: inline-block; background-color: #3ea8e2; color: #fff;}
- .pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px;}
- .pager ul .active a:hover {color: #fff; border: #3ea8e2 solid 1px !important;}
下边是默认的:(太多)
- /*分页*/
- .pager {text-align: center; margin: 20px 0;}
- .pager ul {display: flex; flex-wrap: wrap; justify-content: center}
- .pager ul li {display: inline-block;}
- .pager ul li a {padding: 5px 15px; border: #dddddd solid 1px; margin-left: -1px; display: inline-block;}
- .pager ul li a:hover {border-color: #70c4f3; background-color: #70c4f3; color: #FFF}
- .pager ul .active a {border: #3ea8e2 solid 1px; display: inline-block; background-color: #3ea8e2; color: #fff;}
- .pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px; background-color: #fff}
- .pager ul .active a:hover {color: #fff; border: #3ea8e2 solid 1px !important; background-color: #3ea8e2 !important}
- .pagination {
- display: inline-block;
- padding-left: 0;
- margin: 20px 0;
- border-radius: 4px; }
- .pagination > li {
- display: inline; }
- .pagination > li > a,
- .pagination > li > span {
- position: relative;
- float: left;
- padding: 6px 12px;
- line-height: 1.42857;
- text-decoration: none;
- color: #337ab7;
- background-color: #fff;
- border: 1px solid #ddd;
- margin-left: -1px; }
- .pagination > li:first-child > a,
- .pagination > li:first-child > span {
- margin-left: 0;
- border-bottom-left-radius: 4px;
- border-top-left-radius: 4px; }
- .pagination > li:last-child > a,
- .pagination > li:last-child > span {
- border-bottom-right-radius: 4px;
- border-top-right-radius: 4px; }
- .pagination > li > a:hover, .pagination > li > a:focus,
- .pagination > li > span:hover,
- .pagination > li > span:focus {
- z-index: 2;
- color: #23527c;
- background-color: #eeeeee;
- border-color: #ddd; }
- .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
- .pagination > .active > span,
- .pagination > .active > span:hover,
- .pagination > .active > span:focus {
- z-index: 3;
- color: #fff;
- background-color: #337ab7;
- border-color: #337ab7;
- cursor: default; }
官方论坛链接:https://www.xunruicms.com/wenda/54622.html
文章点评