<div class="styled-pagination text-center">
<ul class="clearfix"> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div> 原css样式代码如下。
.styled-pagination{ position:relative; display: block; width: 100%; }
.styled-pagination ul{ position:relative; width: 100%; }
.styled-pagination li{ position:relative; display: inline-block; margin: 0 4px 8px; }
.styled-pagination li a{ position:relative; display: block; height:40px; width: 40px; text-align: center; line-height:40px; font-weight:400; font-size:14px; background:#ffffff; color:#222222; border:1px dashed #d7d7d7; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; }
.styled-pagination li a:hover, .styled-pagination li.active a{ color:#ffffff; background:#43c3ea; border-color:#43c3ea; }
.styled-pagination li.next a, .styled-pagination li.prev a{ min-width: 70px; background-color: #152545; color: #ffffff; }
.styled-pagination li.next a:hover, .styled-pagination li.prev a:hover{ color:#ffffff; background:#43c3ea; border-color:#43c3ea; }
page模板
<li class="next"><a href="{$-firstpagelink}">上一页</a></li>
{@}<li class="{$-class}"><a href="{$-link}">{$-num}</a></li>{@}
<li class="next"><a href="{$-lastpagelink}">下一页</a></li>
参考active增加css 的li.on样式 .styled-pagination li.on a { color:#ffffff; background:#43c3ea; border-color:#43c3ea; }
前台模板代码
<div class="styled-pagination"> <ul class="clearfix"> {$=pagi('{$-pagi-pagenum}', '{$-pagi-pagetotal}', $createURL('list', '{$-category}', array('page' => '[~page]')), 'pagi-3')} </ul> </div>
|