Bagaimana Membuat: Pagination CSS
- Halaman sebelumnya Panel samping tergulung
- Halaman berikutnya Navigasi bunga roti
Belajar cara menggunakan CSS untuk membuat pagination.
Bagaimana Membuat Pagination
Langkah pertama - Tambahkan HTML:
<div class="pagination"> <a href="#">«</a> <a href="#">1</a> <a class="active" href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">»</a> </div>
Langkah kedua - Tambahkan CSS:
/* Link halaman pagination */ .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; } /* Menetapkan gaya tampilan untuk link yang aktif/dianggung */ .pagination a.active { background-color: dodgerblue; color: white; } /* Menambahkan warna latar belakang abu-abu saat mouse diatas */ .pagination a:hover:not(.active) {background-color: #ddd;}
Halaman yang berhubungan
Tutorial:Halaman berikutnya CSS
- Halaman sebelumnya Panel samping tergulung
- Halaman berikutnya Navigasi bunga roti