”“

代码:

<?php $this->pageNav('|<', '>|',10,'',array('wrapTag' => 'div', 'wrapClass' => 'page-nav','itemTag' =>'li','currentClass' => 'current',)); ?>

wrapTag 外层包裹标签名,默认 ol,
wrapClass 外层包裹类名
itemTag 内层标签名, 默认 li,
textTag 直接输出文字的标签名,
currentClass 当前聚焦类名,
prevClass 上一页类名,默认为prev
nextClass 下一页类名,默认为next

静态html:

<div class="page-nav">

<li class="prev"><a href="http://pinsily.site/index.php/page/1/">|&lt;</a></li>
<li><a href="http://pinsily.site/index.php/page/1/">1</a></li>
<li class="current"><a href="http://pinsily.site/index.php/page/2/">2</a></li>
<li><a href="http://pinsily.site/index.php/page/3/">3</a></li><li><a href="http://pinsily.site/index.php/page/4/">4</a></li>
<li class="next"><a href="http://pinsily.site/index.php/page/3/">&gt;|</a></li>

</div>

自定义CSS:

.page-nav {
    list-style-type: none;
    color: #000000;
    text-align: center;
}
.page-nav A{color:#555555;text-decoration: none;}
.page-nav .current {
    border-radius: 100%;
    color: #000000;
    border: 1px solid #4CAF50;
    box-shadow: 1px 2px 3px #ddd;
}
.page-nav A:hover{color: #ffffff;background: #4CAF50;border-color: #000000;}
.page-nav li {
    transition: background-color .3s;
    border: 2px solid #ddd;
    display: inline-block;
    float: none;
    padding: 5px 10px 5px 10px;
    margin:0;
    text-decoration: none;
}

参考链接:

https://www.runoob.com/bootstrap/bootstrap-pagination.html
https://www.sioe.cn/yingyong/yanse-rgb-16/
https://www.runoob.com/css3/css3-pagination.html

最后编辑:2022年05月02日 ©著作权归作者所有

发表评论