Aflați cum să creați un paginare receptiv folosind CSS.
Simplu paginare
Dacă aveți un site cu o mulțime de pagini, ați putea dori să adăugați un fel de paginare la fiecare pagină:
Pentru a crea un paginare, stil o listă HTML:
Exemplu
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} Încearcă - l singur » Activă și Hoverable paginare
Evidențiați pagina curentă cu o .active de clasă, și de a folosi :hover selectorul pentru a schimba culoarea fiecarei pagini link - ul atunci când se deplasează mouse - ul peste ele:
Exemplu
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} Încearcă - l singur » Butoanele active și Hoverable cilindrat
Adăugați border-radius proprietate , dacă doriți un rotunjit "active" și "hover" buton:
Exemplu
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} Încearcă - l singur » Hoverable de tranziție Efect
Adăugați transition proprietatea de a link - urile de pagină pentru a crea un efect de tranziție asupra Hover:
Bordered paginare
Utilizați border proprietatea de a adăuga chenare paginația:
rotunjit frontiere
Sfat: chenare rotunjite la prima și ultima verigă în paginația:
Exemplu
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Încearcă - l singur » Spațiu între Link-uri
Sfat: Adăugați margin de proprietate , dacă nu doriți să grupați link - urile de pagină:
Exemplu
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Încearcă - l singur » Dimensiune paginare
Modificarea dimensiunii paginația cu font-size proprietate:
paginare Centrat
Pentru a centra paginația, înfășurați un element container în jurul ei (like <div> ) , și se adaugă text-align:center
Mai multe exemple
Firimituri de pâine
O altă variantă de paginare este așa-numitele "breadcrumbs" :
Exemplu
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
Încearcă - l singur »