/ Новости и уроки / Простая пагинация на css

Простая пагинация на css

371
Простая пагинация на css
Всем привет. В этой статье мы сделаем простую пагинацию на css. В ней будет присутствовать все элементы, как у обычной пагинации: кнопка предыдущий, следующий и цифры с ссылкой на страницу.

Разметка HTML

Давайте начнем с обычной разметки html. Добавляем список, где будет храниться все элементы пагинации.


<h1 class="heading">
Простая пагинация на css
</h1>
<nav>
	<ul class="pagination">
		<li class="pagination-item">
			<a href="#">Предыдущий</a>
		</li>
		<li class="pagination-item pg-active">
			<a href="#">1</a>
		</li>
		<li class="pagination-item">
			<a href="#">2</a>
		</li>
		<li class="pagination-item">
			<a href="#">3</a>
		</li>
		<li class="pagination-item">
			<a href="#">4</a>
		</li>
		<li class="pagination-item">
			<a href="#">Следующий</a>
		</li>
	</ul>
</nav>

Css

Теперь приступаем к стилизации. В этом коде мы добавим стили к нашей пагинации, а также добавим эффект при наведении на ссылку.


*{margin: 0px; padding: 0px}
body {
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
	height: 100vh;
}
li {
  list-style-type: none;
}
a:link, a:hover, a:visited {
	text-decoration: none;
	color: black;
}
.heading {
	font-size: 1.6rem;
	margin-bottom: 1.5rem;
}
.pagination {
	display: flex;
}
.pagination-item {
	margin-right: 18px;
	border-radius: 10px;
  	border: solid 1px #ececec;
}
.pagination a {
	padding: 11px 16px 11px 16px;
	transition: .2s all;
                display: flex;
}
a:hover {
	background-color: #ececec;
}

.pg-active {
	background-color: #ececec;
}

На этом все. У нас получилась простая и красивая пагинация выполненная на чистом css.