CSS Пагинація - Розділення документа на сторінки та номери за допомогою CSS

• Вступ до CSS-сторінки
• 

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)

Simple Pagination
«
1
2
3
4
5
6
7
8
9
10
»


• 

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Active and Hoverable Pagination
«
1
2
3
4
5
6
7
8
9
10
»


• 

Rounded Active and Hoverable Buttons

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
border-radius:6px;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
border-radius:6px;
)

Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
8
9
10
»


• 

Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»


• 

Rounded Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Rounded Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»


• 

Centered Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Centered Pagination

«
1
2
3
4
5
6
7
8
9
10
»


• 

Space Between Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Space Between Pagination

«
1
2
3
4
5
6
7
8
9
10
»


• 

Pagination Size

.center (
text-align:center;
)
.pagination a (
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Pagination Size

«
1
2
3
4
5
6
7
8
9
10
»



Вступ до CSS-сторінки

Пагинація - це метод, за допомогою якого документ розділяється на сторінки та наводяться цифри. Пагинація полегшує пошук величезної кількості вмісту та розкладає кілька записів або веб-контенту на різні сторінки, що дозволяє вам легко перемикати вміст через нього. Веб-посилання на сторінки розширення дозволяють відвідувачам відвідувати ваш вміст. CSS-сторінка - це досить непоганий метод для індексації на домашній сторінці різних сторінок веб-сайту. Коли на вашому веб-сайті завантажуються сторінки, вам потрібно додати кілька сторінок для кожної сторінки.

Типи сторінок у CSS

Нижче наведено типи сторінки «Пагинація» у CSS:

• Проста сторінка
• Активна та поважна сторінка
• Закруглені активні та поважні кнопки
• Бордюрна сторінка
• Округлена кордонна сторінка
• Центрована сторінка
• Простір між Пагинацією
• Розмір сторінки

1. Проста сторінка

Нижній приклад зображує просту сторінку. Клас «сторінкинування» може бути використаний для визначення сторінки на HTML-сторінках.

Код:



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)

Simple Pagination
«
1
2
3
4
5
6
7
8
9
10
»





.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)

Simple Pagination
«
1
2
3
4
5
6
7
8
9
10
»





.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)

Simple Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Збережіть вищевказаний код на HTML-сторінці та назвіть його відповідно до вашого вибору. Відкрийте файл у браузері, і він відобразить вихід, як показано на зображенні нижче.

Вихід:

2. Активна та поважна сторінка

Поточна сторінка буде показана за допомогою активного класу. Коли миша пройде над ними, наведення курсора переключить колір посилання на сторінку.

Код:



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Active and Hoverable Pagination
«
1
2
3
4
5
6
7
8
9
10
»





.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Active and Hoverable Pagination
«
1
2
3
4
5
6
7
8
9
10
»





.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Active and Hoverable Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Вихід:

3. Закруглені активні та поважні кнопки

У цьому типі розбиття сторінки властивість радіус межі може бути використана для округлення активних та перехідних кнопок.

Код:



Rounded Active and Hoverable Buttons

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
border-radius:6px;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
border-radius:6px;
)

Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
8
9
10
»





Rounded Active and Hoverable Buttons

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
border-radius:6px;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
border-radius:6px;
)

Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
8
9
10
»





Rounded Active and Hoverable Buttons

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
border-radius:6px;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
border-radius:6px;
)

Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
8
9
10
»



Вихід:

4. Бордюрна сторінка

Цей тип можна використовувати, коли потрібно додати межу до сторінки.

Код:



Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»





Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»





Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Вихід:

5. Округлена кордонна сторінка

Цей тип можна використовувати, коли потрібно додати округлу межу до сторінки, використовуючи властивість border-radius.

Код:



Rounded Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Rounded Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»





Rounded Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Rounded Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»





Rounded Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Rounded Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Вихід:

6. Центрована сторінка

Цей тип сторінки розвідки можна відобразити по центру за допомогою властивості вирівнювання тексту.

Код:



Centered Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Centered Pagination

«
1
2
3
4
5
6
7
8
9
10
»





Centered Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Centered Pagination

«
1
2
3
4
5
6
7
8
9
10
»





Centered Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Centered Pagination

«
1
2
3
4
5
6
7
8
9
10
»



Вихід:

7. Простір між сторінкою

Цей тип пагинації може використовуватися для надання місця між посиланнями на сторінку, а не для їх групування. Простір можна виділити за допомогою властивості поля між посиланнями.

Код:



Space Between Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Space Between Pagination

«
1
2
3
4
5
6
7
8
9
10
»





Space Between Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Space Between Pagination

«
1
2
3
4
5
6
7
8
9
10
»





Space Between Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Space Between Pagination

«
1
2
3
4
5
6
7
8
9
10
»



Вихід:

8. Розмір сторінки

Цей тип сторінки розширення може використовуватися для зміни розміру сторінки. Це можна зробити за допомогою властивості розміру шрифту.

Код:



Pagination Size

.center (
text-align:center;
)
.pagination a (
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Pagination Size

«
1
2
3
4
5
6
7
8
9
10
»





Pagination Size

.center (
text-align:center;
)
.pagination a (
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Pagination Size

«
1
2
3
4
5
6
7
8
9
10
»





Pagination Size

.center (
text-align:center;
)
.pagination a (
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Pagination Size

«
1
2
3
4
5
6
7
8
9
10
»



Вихід:

Висновок

Поки ми вивчали роль розбиття сторінки, де величезна кількість вмісту може бути розбита на різні HTML-сторінки, і користувач може легко перемикати інформацію з інформацією. Для того, щоб зробити вміст поганізованим, клас пагинації може використовуватися в елементах HTML. Отже, керування сторінками CSS дуже корисно, коли велику кількість вмісту сторінок HTML можна розділити на окремі сторінки.

Рекомендовані статті

Це посібник із сторінки CSS-сторінки. Тут ми обговорюємо різні типи CSS-сторінки, такі як проста, активна та зручна та ін., А також реалізація коду. Ви також можете ознайомитись із запропонованими нами статтями, щоб дізнатися більше -

1. Використання CSS в технології
2. Поради та рекомендації щодо використання команд CSS
3. Вступ до топ-6 переваг CSS
4. Посібник з топ-10 питань щодо інтерв'ю CSS