Пагинация

Вид блока может меняться взависимости от дизайна, но основные блоки должены сохраняться
Вот несколько видов:

Вид блока в примере верстки


Посмотреть код html

<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>

Посмотреть код css

.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;
}