Hvordan lage en responsiv paginering ved hjelp av CSS?

Et nettsted består ofte av et stort antall sider som inneholder forskjellige innhold. I en situasjon, der nettstedet ditt har mange sider, blir det en nødvendighet å legge til en paginering som er responsiv. Betydningen av en paginering kan vektlegges av det faktum at det gjør navigasjonen enkel for en bruker. Det lar en bruker se en webside etter eget valg og lar dem få vite hvilken side de er på. Emner som diskuteres i denne oppskrivningen er listet opp nedenfor.

1. Hvordan lage en responsiv paginering

2. Hvordan style en paginering

Hvordan lage en responsiv paginering

La oss først skape en enkel paginering. For å gjøre det må vi lage en DIV -beholder og hekke forskjellige ankerkoder som representerer forskjellige sider på et nettsted ved hjelp av numeriske sifre. Her er den aktuelle HTML -koden.

Html

""
1
2
3
4
5
6
""

Den første og den siste ankerkoden bruker hex-kodene for å legge til en venstre-pekepunkt og en høyre-pekepinne dobbeltvinkel anførselstegn.

La oss nå style ankerkodene ved hjelp av grunnleggende CSS.

CSS

.paginering a
farge svart;
FLOAT: Venstre;
polstring: 10px 15px;
Tekstdekorasjon: Ingen;

Her har vi tildelt litt polstring til ankerkodene og litt farge til teksten inni dem, dessuten har vi flyttet hele paginasjonen til venstre og for å fjerne understreken fra ankerkodene vi har satt tekstdekorasjonen til ingen.

Produksjon

En enkel paginering ble opprettet med hell.

Nå som vi vet hvordan vi skal lage en grunnleggende paginering, la oss lære hvordan vi kan gjøre dets responsive og interaktive ved hjelp av forskjellige teknikker.

Hvordan lage en paginering aktiv og hosofile

Paginasjoner må være i en aktiv tilstand så vel som hissbar, slik at brukeren vet på hvilken side han/hun er på.

Html

""
1
2
3
4
5
6
""

I koden ovenfor tildeler vi den fjerde ankertaggen den aktive tilstanden.

CSS

.paginering a
farge svart;
FLOAT: Venstre;
polstring: 10px 15px;
Tekstdekorasjon: Ingen;

.paginering a.aktiv
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

.Paginering A: svev: ikke (.aktiv)
Bakgrunnsfarge: Lightgray;

Ovennevnte kode spesifiserer at når en side er i en aktiv tilstand, vil den tilsvarende ankerkoden ha en rosenrød brun bakgrunnsfarge og tekstfargen vil være hvit. I mellomtiden, når en bruker henger over ankerkodene som ikke er aktive, vil bakgrunnsfargen endre seg til lysegrå.

Produksjon

En aktiv og hissbar paginering ble generert.

Hvordan style en paginering

Nå som vi har lært hvordan vi kan lage en responsiv paginering, la oss dykke inn i forskjellige måter vi kan style paginasjonen.

Hvordan legge til grenser til en paginering

For å skape grenser rundt hvert av ankerkodene i en paginering, brukes CSS -grensegenskapen.

CSS

.paginering a
farge svart;
FLOAT: Venstre;
polstring: 10px 15px;
Tekstdekorasjon: Ingen;
Grense: 1px fast grått;

.paginering a.aktiv
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

.Paginering A: svev: ikke (.aktiv)
Bakgrunnsfarge: Lightgray;

I koden ovenfor spesifiserer vi at hver ankerkode for paginasjonen vil ha en grense på 1px med solid grå farge.

Produksjon

Grenser er vellykket lagt til paginasjonen.

Hvordan endre størrelsen på en paginering

Ved å bare endre skriftstørrelsen på teksten i hvert av ankerkodene, kan du endre størrelsen på en responsiv paginering.

CSS

.paginering a
farge svart;
FLOAT: Venstre;
polstring: 10px 15px;
Tekstdekorasjon: Ingen;
Font-størrelse: 30px;
Grense: 1px fast grått;

.paginering a.aktiv
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

.Paginering A: svev: ikke (.aktiv)
Bakgrunnsfarge: Lightgray;

Her har vi satt skriftstørrelsen til 30px.

Produksjon

Størrelsen på paginasjonen er forbedret.

Hvordan sentrerer en paginering

Det hender ofte at strukturen på websiden krever at nettutviklerne plasserer paginasjonen i midten av siden. Følg eksemplet nedenfor.

Html

""
1
2
3
4
5
6
""

For å sentrere hele paginasjonen, har vi opprettet en annen div container og nestet den andre div inni den.

CSS

.senter
tekst-align: sentrum;

.div
Display: Inline-block;

.div a
farge svart;
FLOAT: Venstre;
polstring: 10px 15px;
Tekstdekorasjon: Ingen;
Grense: 1px fast grått;

.div a.aktiv
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

.Div A: Hover: ikke (.aktiv)
Bakgrunnsfarge: Lightgray;

Nå som bruker klassen som er tildelt den første div, justerer vi teksten til sentrum. I mellomtiden setter vi visningen av den andre diven til inline-block for å sentrere hele paginasjonen.

Produksjon

Paginasjonen har vært sentrert.

Hvordan legge til en overgangseffekt til en paginering

Bare tilordne noen overgangsvarighet til ankerkodene for å legge til en overgangseffekt hver gang en bruker henger over ankerkodene.

CSS

.div a
farge svart;
FLOAT: Venstre;
polstring: 10px 15px;
Tekstdekorasjon: Ingen;
Grense: 1px fast grått;
Overgangs-varighet: 0.5s;

.div a.aktiv
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

.Div A: Hover: ikke (.aktiv)
Bakgrunnsfarge: Lightgray;

Overgangsvarigheten er satt til 0.5 sekunder.

Produksjon

En overgangseffekt er lagt til paginasjonen.

Konklusjon

En responsiv paginering er en integrert del av et nettsted som består av et antall sider. Det gjør navigasjonen enkelt for brukere og la dem hvilken side de er på. En grunnleggende paginering kan opprettes ved hjelp av HTML -elementer som DIV og ankerkoder. Videre kan du gjøre det responsivt ved å legge til en aktiv tilstand og en svevdeffekt til den. Dessuten kan du style en paginering på mange måter som du kan endre størrelsen, skape grenser, legge til en overgangseffekt osv. Ved hjelp av forskjellige CSS -egenskaper. I denne oppskrivningen har du blitt vist hvordan du kan lage og style en responsiv paginering.