Introduksjon til CSS-paginering

Paginering er metoden som dokumentet er delt opp i sider og tall er gitt. Paginering gjør det enkelt å finne en enorm mengde innhold og nedbryter flere oppføringer eller webinnhold til forskjellige sider, slik at du enkelt kan bytte innhold gjennom det. Paginering nettlenker gjør det i utgangspunktet at innholdet ditt kan bli surfet av besøkende. CSS-paginering er en ganske god metode for indeksering på hjemmesiden til forskjellige sider på et nettsted. Når du har mange sider på nettstedet ditt, må du legge til litt paginering for hver side.

Typer av paginering i CSS

Nedenfor er typene for paginering i CSS:

  • Enkel paginering
  • Aktiv og svevbar paginering
  • Avrundede aktive og svevbare knapper
  • Bordered Pagination
  • Avrundet grensepaginering
  • Sentrert paginering
  • Mellomrom mellom paginering
  • Paginasjonsstørrelse

1. Enkel paginering

Eksemplet nedenfor viser enkel paginering. Klassen "paginering" kan brukes til å definere paginering på HTML-sidene.

Kode:



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

Lagre koden over på HTML-siden og navngi den etter ditt valg. Åpne filen i en nettleser, og den vil vise utdataene som vist i bildet nedenfor.

Produksjon:

2. Aktiv og svevbar paginering

Den gjeldende siden vises med aktiv klasse. Når musen går over dem, bytter Hover fargen på sidelink.

Kode:



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

Produksjon:

3. Avrundede aktive og svevbare knapper

I denne typen paginering kan egenskapen border-radius brukes til avrundede aktive og svevbare knapper.

Kode:



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
»

Produksjon:

4. Bordered Pagination

Denne typen kan brukes når du vil legge en grense til paginasjonen.

Kode:



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
»

Produksjon:

5. Avrundet grensepaginering

Denne typen kan brukes når du vil legge til en avrundet kant på paginasjonen ved å bruke egenskapen grense-radius.

Kode:



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
»

Produksjon:

6. Sentrert paginering

Denne typen paginering kan vises sentrert ved hjelp av tekstjustere egenskaper.

Kode:



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
»

Produksjon:

7. Mellomrom mellom paginering

Denne typen paginering kan brukes til å gi mellomrom mellom sidekoblinger i stedet for å gruppere dem. Plassen kan gis ved hjelp av marginegenskap mellom lenkene.

Kode:



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
»

Produksjon:

8. Paginasjonsstørrelse

Denne typen paginering kan brukes til å endre størrelsen på paginasjonen. Det kan gjøres ved å bruke egenskapen fontstørrelse.

Kode:



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
»

Produksjon:

Konklusjon

Så langt har vi studert rollen til paginasjonen der den enorme mengden innhold kan deles inn i forskjellige HTML-sider og brukeren enkelt kan bytte med informasjonen med letthet. For å gjøre innhold paganisert, kan pagineringsklassen brukes innen HTML-elementene. Derfor er CSS-paginering veldig nyttig når en stor mengde innhold på HTML-sidene kan deles inn i diskrete sider.

Anbefalte artikler

Dette er en guide til CSS-paginering. Her diskuterer vi de forskjellige typene CSS-paginering som Simple, Active and Hoverable, etc. sammen med Code Implementation. Du kan også gå gjennom de foreslåtte artiklene våre for å lære mer -

  1. Bruk av CSS i teknologi
  2. Tips og triks for å bruke CSS-kommandoer
  3. Introduksjon til Topp 6 fordeler ved CSS
  4. Guide to Top 10 CSS Interview Questions

Kategori:

Nettutviklingsverktøy