Paginare CSS
Această lecție construiește o paginare responsivă cu CSS.
Un site cu un număr mare de pagini poate avea de câștigat dacă are paginare pe fiecare pagină.
Marcajul obișnuit este o listă neordonată (<ul>) care conține o serie de linkuri, câte un link pentru fiecare număr de pagină, plus controalele „anterior” și „următor”.
Exemplu
O versiune de bază:
Prompt
Creează o paginare simplă folosind o listă neordonată cu CSS flexbox. Include controalele anterior („«”) și următor („»”) și numere de pagină 1-5. Stilizează cu aspect centrat, fără marcatori de listă, linkuri cu chenar și colțuri rotunjite, și padding.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Pagination</title>
<style>
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Simple Pagination</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Explicația exemplului
Trei declarații pe containerul de paginare se ocupă de aranjare:
display: flex;așază numerele de pagină într-un rând orizontaljustify-content: center;centrează acel rândlist-style: none;elimină marcatorii de listă
Aspectul numerelor de pagină vine de la elementul <a> din interiorul fiecărui <li>, stilizat cu proprietăți precum display, padding, text-decoration, border, color și border-radius.
Paginare cu o clasă Active
O clasă .active marchează pagina curentă, astfel încât utilizatorii să știe unde se află.
Exemplu
Aceeași listă, acum cu o clasă .active:
Prompt
Creează o paginare cu controale anterior/următor și numere de pagină 1-5. Adaugă o clasă .active pe un link de pagină cu fundal verde (#4CAF50) și text alb pentru a evidenția pagina curentă. Include stilurile de bază pentru paginare (flex, centrat, fără marcatori, linkuri cu chenar și colțuri rotunjite).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination With Active Class</title>
<style>
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Pagination With Active Class</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Paginare cu o clasă Disabled
Pe ultima pagină, butonul „Următor” nu ar trebui să funcționeze.
O clasă .disabled rezolvă asta: setările ei pentru color, cursor și pointer-events lasă butonul „Următor” neclickabil.
Exemplu
Din nou lista, cu o clasă .disabled:
Prompt
Creează o paginare cu controale anterior/următor și numere de pagină 1-5. Adaugă o clasă .disabled pe linkul „următor” cu culoare gri (#dddddd), cursor not-allowed și pointer-events none pentru a-l face neclickabil. Include stilurile de bază pentru paginare și o clasă .active pe un link de pagină.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination With Disabled Class</title>
<style>
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
.pagination li a.disabled {
color: #dddddd;
cursor: not-allowed;
pointer-events: none;
}
</style>
</head>
<body>
<h2>Pagination With Disabled Class</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" class="active">5</a></li>
<li><a href="#" class="disabled">»</a></li>
</ul>
</body>
</html>