Пагинация
Вид блока может меняться взависимости от дизайна, но основные блоки должены сохраняться
Вот несколько видов:
<div class="el_pagination_xxxxxx"> <div class="wrapperInner"> <ul> <li><span class="active"><i class="fa fa-angle-left"></i></span></li> <li><span class="active">1</span></li> <li><a href="/catalogs/?pageNumber=2&orderType=1&b=&p=">2</a></li> <li><a href="/catalogs/?pageNumber=3&orderType=1&b=&p=">3</a></li> <li><a href="/catalogs/?pageNumber=4&orderType=1&b=&p=">4</a></li> <li><a href="/catalogs/?pageNumber=5&orderType=1&b=&p=">5</a></li> ... <li><a href="/catalogs/?pageNumber=n&orderType=1&b=&p=">n</a></li> <li><a href="/catalogs/?pageNumber=2&orderType=1&b=&p=" class="next"><i class="fa fa-angle-right"></i></a></li> </ul> </div> </div>
.el_pagination_xxxxxx { } .el_pagination_xxxxxx .wrapperInner { } .el_pagination_xxxxxx .wrapperInner ul { display: block; width: 100%; text-align: center; } .el_pagination_xxxxxx .wrapperInner ul li { display: inline-block; margin: 5px; } .el_pagination_xxxxxx .wrapperInner ul li a, .el_pagination_xxxxxx .wrapperInner ul li span { display: inline-block; border: 1px solid #2091C9; background-color: #FFFFFF; border-radius: 3px; padding: 0px 5px; min-width: 30px; line-height: 28px; font-size: 1.4rem; font-weight: bold; text-align: center; color: #2091C9; } .el_pagination_xxxxxx .wrapperInner ul li a:hover, .el_pagination_xxxxxx .wrapperInner ul li span.active { background-color: #2091C9; color: #FFFFFF; }