Uvod u CSS stranicu

Paginacija je metoda kojom se dokument odvaja na stranice i daju brojevi. Uređivanje stranica olakšava pronalaženje ogromne količine sadržaja i dekomponuje više unosa ili web sadržaja na različite stranice, omogućujući vam jednostavno prebacivanje sadržaja kroz njega. Web-stranice za izdavanje stranica u osnovi omogućuju posjetiteljima pregledavanje vašeg sadržaja. CSS paginacija je dobra metoda za indeksiranje na početnim stranicama različitih stranica web stranice. Kada imate puno stranica na svojoj web stranici, morate dodati malo stranice na svakoj stranici.

Vrste paginacije u CSS-u

Ispod su vrste paginacije u CSS-u:

  • Jednostavna stranica
  • Aktivna i počasna stranica
  • Zaobljene aktivne i počasne tipke
  • Obrubljena stranica
  • Zaokružena granična stranica
  • Centrirana stranica
  • Prostor između paginacije
  • Veličina stranice

1. Jednostavna stranica

Donji primjer prikazuje jednostavnu stranicu. Klasa "paginacija" može se koristiti za definiranje stranice u HTML stranicama.

Kodirati:



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

Spremite gornji kôd na HTML stranici i imenovajte ga prema vašem izboru. Otvorite datoteku u pregledniku i ona će prikazati izlaz kao što je prikazano na slici ispod.

Izlaz:

2. Aktivna i počasna stranica

Trenutna će se stranica prikazati pomoću aktivne klase. Kad miš pređe preko njih, Hover će prebaciti boju veze na stranicu.

Kodirati:



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

Izlaz:

3. Zaobljene aktivne i počasne tipke

U ovoj vrsti paginacije svojstvo radijusa obruba može se koristiti za zaobljene aktivne i pokretne tipke.

Kodirati:



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
»

Izlaz:

4. Ograničena stranica

Ova se vrsta može upotrijebiti kada želite dodati stranicu u stranicu.

Kodirati:



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
»

Izlaz:

5. Zaokružena granična stranica

Ova se vrsta može upotrijebiti kada želite dodati zaokruženu obrub na stranicu sa korištenjem svojstva radijusa obruba.

Kodirati:



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
»

Izlaz:

6. Centrirana stranica

Ova vrsta paginacije može se prikazati centrirano uz pomoć svojstva poravnanja teksta.

Kodirati:



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
»

Izlaz:

7. Prostor između stranice

Ova vrsta paginacije može se koristiti za stvaranje prostora između veza na stranici, umjesto da se grupira. Prostor se može dati uz pomoć svojstva margine između veza.

Kodirati:



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
»

Izlaz:

8. Veličina stranice

Ova vrsta paginacije može se koristiti za promjenu veličine stranice. To se može učiniti pomoću svojstva veličine fonta.

Kodirati:



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
»

Izlaz:

Zaključak

Do sada smo proučavali ulogu paginacije u kojoj se ogromna količina sadržaja može razbiti na različite HTML stranice i korisnik lako može prebacivati ​​informacije s lakoćom. Da bi sadržaj bio paganiziran, klasa stranice o upotrebi stranice može se koristiti u HTML elementima. Stoga je CSS paginacija vrlo korisna kada se velika količina sadržaja HTML stranica može podijeliti na diskretne stranice.

Preporučeni članci

Ovo je vodič za CSS stranice. Ovdje smo razgovarali o različitim vrstama CSS stranice, kao što su Jednostavna, Aktivna i Hoverrable, itd., Zajedno s implementacijom koda. Možete i proći kroz naše predložene članke da biste saznali više -

  1. Primjene CSS-a u tehnologiji
  2. Savjeti i trikovi za korištenje CSS naredbi
  3. Uvod u top 6 prednosti CSS-a
  4. Vodič za top 10 CSS pitanja o intervjuu

Kategorija:

Alati za web razvoj