Jak stworzyć responsywną paginację za pomocą CSS?

Witryna często składa się z dużej liczby stron zawierających różne treści. W sytuacji, w której Twoja strona ma wiele stron, dodanie responsywnej paginacji staje się koniecznością. Znaczenie paginacji można podkreślić fakt, że ułatwia nawigację dla użytkownika. Pozwala użytkownikowi wyświetlić stronę internetową własnego wyboru i informuje, na której stronie są. Tematy omawiane w tym zapisie są wymienione poniżej.

1. Jak stworzyć responsywną paginację

2. Jak stylizować paginację

Jak stworzyć responsywną paginację

Najpierw stwórzmy prostą paginację. Aby to zrobić. Oto odpowiedni kod HTML.

Html

"
1
2
3
4
5
6
"

Pierwszy i ostatni znacznik zakotwiczenia używają kodów sześciokątnych do dodania lewicowych i prawej podwójnej kąt.

Pozwól nam teraz ukształtować znaczniki kotwicy za pomocą podstawowych CSS.

CSS

.paginacja a
czarny kolor;
float: lewy;
Wyściółka: 10px 15px;
Dekoracja tekstu: Brak;

Tutaj przypisaliśmy trochę wyściółki do tagów kotwicy i trochę koloru do tekstu w nich, co więcej, przekształciliśmy całą paginację po lewej.

Wyjście

Z powodzeniem stworzono prostą paginację.

Teraz, gdy wiemy, jak zrobić podstawową paginację, dowiedzmy się, w jaki sposób możemy sprawić, by reagować i interaktywnie za pomocą różnych technik.

Jak sprawić, by paginacja była aktywna i unosiła się

Paginacje muszą być w stanie aktywnym, a także unoszące się, aby użytkownik wiedział, na której stronie jest.

Html

"
1
2
3
4
5
6
"

W powyższym kodzie przypisujemy czwarty tag kotwiczny stan aktywny.

CSS

.paginacja a
czarny kolor;
float: lewy;
Wyściółka: 10px 15px;
Dekoracja tekstu: Brak;

.Pagination a.aktywny
kolor tła: Rosybrown;
kolor biały;

.Pagination A: Hover: nie (.aktywny)
kolor tła: światła;

Powyższy kod określa, że ​​gdy strona jest w stanie aktywnym, odpowiedni znacznik kotwicy będzie miał różowy brązowy kolor tła, a kolor tekstu będzie biały. Tymczasem, gdy użytkownik unosi się nad znacznikami kotwic, które nie są aktywne, kolor tła zmieni się na jasnoszary.

Wyjście

Wygenerowano aktywną i unoszącą się paginację.

Jak stylizować paginację

Teraz, gdy nauczyliśmy się tworzyć responsywną paginację, zanurzmy się w różne sposoby, w jakie możemy stylizować paginację.

Jak dodać granice do paginacji

Aby stworzyć granice wokół każdego z znaczników kotwicy w paginacji, używana jest właściwość graniczna CSS.

CSS

.paginacja a
czarny kolor;
float: lewy;
Wyściółka: 10px 15px;
Dekoracja tekstu: Brak;
granica: 1px stały szary;

.Pagination a.aktywny
kolor tła: Rosybrown;
kolor biały;

.Pagination A: Hover: nie (.aktywny)
kolor tła: światła;

W powyższym kodzie określamy, że każdy znacznik kotwicy paginacji będzie miał granicę 1px z solidnym szarym kolorem.

Wyjście

Granice zostały pomyślnie dodane do paginacji.

Jak zmienić rozmiar paginacji

Po prostu zmieniając rozmiar czcionki tekstu wewnątrz każdego znacznika kotwicy, możesz zmienić rozmiar responsywnej paginacji.

CSS

.paginacja a
czarny kolor;
float: lewy;
Wyściółka: 10px 15px;
Dekoracja tekstu: Brak;
Rozmiar czcionki: 30px;
granica: 1px stały szary;

.Pagination a.aktywny
kolor tła: Rosybrown;
kolor biały;

.Pagination A: Hover: nie (.aktywny)
kolor tła: światła;

Tutaj ustawiliśmy rozmiar czcionki na 30px.

Wyjście

Rozmiar paginacji został wzmocniony.

Jak wyśrodkować paginację

Często zdarza się, że struktura strony internetowej wymaga od stron internetowych umieszczania paginacji na środku strony. Postępuj zgodnie z przykładem poniżej.

Html

"
1
2
3
4
5
6
"

Aby wyśrodkować całą paginację, stworzyliśmy inny kontener DIV i zagnieżdżliśmy drugą Div w nim.

CSS

.Centrum
Text-Align: Center;

.div
Wyświetlacz: Block Inline;

.div a
czarny kolor;
float: lewy;
Wyściółka: 10px 15px;
Dekoracja tekstu: Brak;
granica: 1px stały szary;

.div a.aktywny
kolor tła: Rosybrown;
kolor biały;

.Div A: Hover: nie (.aktywny)
kolor tła: światła;

Teraz korzystając z klasy przypisanej do pierwszej div, wyrównujemy tekst do środka. Tymczasem ustawiamy wyświetlanie drugiego Div na blok oneline, aby wyśrodkować całą paginację.

Wyjście

Paginacja została wyśrodkowana.

Jak dodać efekt przejściowy do paginacji

Po prostu przypisz czas przejścia do znaczników kotwicy, aby dodać efekt przejściowy za każdym razem, gdy użytkownik unosi się na znacznikach kotwicy.

CSS

.div a
czarny kolor;
float: lewy;
Wyściółka: 10px 15px;
Dekoracja tekstu: Brak;
granica: 1px stały szary;
Przejście czas trwania: 0.5s;

.div a.aktywny
kolor tła: Rosybrown;
kolor biały;

.Div A: Hover: nie (.aktywny)
kolor tła: światła;

Czas przejścia został ustawiony na 0.5 sekund.

Wyjście

Do paginacji dodano efekt przejściowy.

Wniosek

Responsywna paginacja jest integralną częścią strony internetowej, która składa się z wielu stron. Ułatwia to nawigację dla użytkowników i pozwól im, na której stronie są. Podstawową paginację można utworzyć przy użyciu elementów HTML, takich jak DIV i znaczniki kotwiczne. Ponadto możesz sprawić, by reaguje na to, dodając do niego stan aktywny i efekt zawisowywania. Ponadto możesz stylizować paginację na wiele sposobów, na przykład możesz zmienić jego rozmiar, tworzyć granice, dodać efekt przejściowy itp. W tym artykule pokazano, jak tworzyć i stylizować responsywną paginację.