Русский

Учебник CSS

Учебник CSS3

CSS Продвинутый

Ссылки на CSS

CSS адаптивный

CSS - Разбиение на страницы: Пособие для начинающих

Здравствуйте, будущие супергерои веб-дизайна! Сегодня мы окунемся в чудесный мир CSS разбиения на страницы. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - я буду вашим доброжелательным проводником в этом захватывающем путешествии. К концу этого руководства вы будете создавать красивые, функциональные разбиения на страницы как профессионал!

CSS - Pagination

Что такое разбиение на страницы?

Прежде чем мы начнем, давайте поговорим о том, что такое разбиение на страницы на самом деле. Представьте, что вы читаете книгу. Вместо того чтобы иметь весь текст на одной бесконечной странице, он разделен на управляемые части - это и есть разбиение на страницы в физическом мире. На веб-сайтах разбиение на страницы помогает разбить длинные списки контента (например, результаты поиска или записи в блоге) на separate страницы. Это как дать вашим пользователям виртуальную кнопку "перевернуть страницу"!

Теперь, давайте закатаем рукава и начнем!

Шаг 1: Добавление HTML разметки

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

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

В этом примере мы создаем <div> с классом "pagination". Внутри него у нас есть несколько <a> тегов (ссылок), представляющих наши номера страниц. &laquo; и &raquo; - это специальные символы для левой и правой стрелок - это классно, правда?

Шаг 2: Определение CSS классов

Теперь, когда у нас есть наш скелет, давайте добавим немного стиля! Мы начнем с базового CSS, чтобы придать нашему разбиению на страницы форму.

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

Вот что делает этот код:

  • display: inline-block; делает наш контейнер для разбиения на страницы ведущим себя как inline элемент, но позволяет нам устанавливать ширину и высоту.
  • Мы стилизуем все <a> теги внутри нашего разбиения на страницы div.
  • float: left; делает наши ссылки выстраиваться горизонтально.
  • padding добавляет немного места вокруг нашего текста.
  • text-decoration: none; удаляет подчеркивание с наших ссылок.

Шаг 3: Стили ссылок разбиения на страницы

Давайте сделаем наши ссылки для разбиения на страницы немного интереснее!

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Этот код делает две классные вещи:

  1. Он стилизует "активную" страницу (текущую страницу) с зеленым фоном и белым текстом.
  2. Он добавляет эффект hover ко всем другим ссылкам, изменяя их цвет фона при наведении курсора.

Простое разбиение на страницы CSS

Поздравляю! Вы только что создали простое, функциональное разбиение на страницы. Но почему останавливаться на этом? Давайте explore einige более захватывающие варианты!

Активное иhoverable разбиение на страницы CSS

Хотите сделать ваше разбиение на страницы более интерактивным? Попробуйте это:

.pagination a {
transition: background-color 0.3s;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Свойство transition добавляет平滑ный эффект изменения цвета при наведении курсора. Это как магия!

Закругленные активные иhoverable кнопки CSS

Давайте добавим нашим кнопкам немного изогнутых краев:

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius закругляет углы наших кнопок, а margin добавляет немного места между ними. Не Looks ли это стильно?

Эффектhoverable перехода CSS

Хотите добавить немного пышности? Попробуйте этот-subtle масштабный эффект:

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

Теперь ваши ссылки будут немного увеличиваться при наведении курсора. Это как будто они тянутся, чтобы быть кликнутыми!

Разбиение на страницы с границами CSS

Давайте добавим границы, чтобы наше разбиение на страницы выделялось:

.pagination a {
border: 1px solid #ddd;
}

Эта простая линия добавляет светло-серую границу вокруг каждой ссылки. Удивительно, как такое малое изменение может сделать такую большую разницу!

Закругленные границы CSS

Хотите смягчить эти границы? Давайте закруглим их:

.pagination a {
border-radius: 50%;
}

Это превращает наши квадратные кнопки в完美的 круги. Как это здорово!

Пространство между ссылками CSS

Иногда нам нужно немного больше места для дыхания:

.pagination a {
margin: 0 4px;
}

Это добавляет небольшой зазор между каждой ссылкой, придавая вашему разбиению на страницы более просторное ощущение.

Размер разбиения на страницы CSS

Один размер не подходит всем. Давайте узнаем, как调整为 размер:

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

Экспериментируйте с этими значениями, чтобы найти идеальный размер для вашего дизайна!

Разбиение на страницы по центру CSS

Хотите, чтобы ваше разбиение на страницы находилось по центру страницы?

.pagination {
text-align: center;
}

Эта простая строка центрирует весь ваш блок разбиения на страницы. Волшебство!

Разбиение на страницы с кнопками "Предыдущий" и "Следующий" CSS

Давайте добавим навигационные кнопки:

<div class="pagination">
<a href="#">&laquo; Предыдущий</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Следующий &raquo;</a>
</div>
.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

Это добавляет кнопки "Предыдущий" и "Следующий" и стилизует их по-другому.

Разбиение на страницы с навигацией по breadcrumbs CSS

Хотите показать пользователям, где они находятся в вашей sequence страниц? Попробуйте это:

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Page 2 of 3</p>
</div>
.pagination p {
margin-left: 10px;
display: inline-block;
}

Это добавляет текстовый индикатор, показывающий текущую страницу и общее количество страниц.

Разбиение на страницы со списком CSS

Наконец, давайте попробуем разбиение на страницы в виде списка:

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

Это создает чистый, основанный на списке макет разбиения на страницы.

И вот оно,folks! Вы только что узнали все о CSS разбиении на страницы. Помните, ключ к овладению этими техниками - это практика. Так что вперед, экспериментируйте с этими стилями, mix и match, и создавайте свои уникальные designs разбиения на страницы. Кто знает? Вы можете создать следующее большое дело в веб-дизайне!

Счастливо кодируйте, и пусть ваши страницы всегда будут идеально разделены на страницы!

Credits: Image by storyset

Предыдущий учебник:
CSS - Кнопки
Следующий учебник:
CSS - Переменные