Contoh penganjutan CSS

Belajar bagaimana untuk menggunakan CSS untuk membuat penganjutan halaman yang responsif.

Penganjutan halaman sederhana

Jika ada banyak halaman di laman web, mungkin Anda ingin menambahkan fungsi halaman penganjutan di setiap halaman:

Contoh

.pagination {
  display: inline-block;
}
.pagination a {
  color: hitam;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Cuba Sendiri

Halaman aktif yang dapat diarahkan

Dengan .active Kelas menonjolkan halaman saat ini, dan digunakan saat mouse berada di atasnya: :hover Pemilihan pengecoran warna setiap tautan halaman:

Contoh

.pagination a.active {
  background-color: #4CAF50;
  warna: putih;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Cuba Sendiri

Halaman rounded corner aktif dan diarahkan

Jika Anda memerlukan tombol "active" dan "hover" dengan rounded corner, tambahkan border-radius Properti:

Contoh

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Cuba Sendiri

Efek transisi yang dapat diarahkan

Silakan taruh transition Properti menambahkan efek transisi untuk tautan halaman, untuk saat mouse berada di atasnya:

Contoh

.pagination a {
  transition: background-color .3s;
}

Cuba Sendiri

Halaman dengan border

Gunakan border Properti menambahkan border untuk halaman:

Contoh

.pagination a {
  border: 1px solid #ddd; /* Abu-abu */
}

Cuba Sendiri

Kotak rounded

Petunjuk:Menambahkan kotak rounded di link pertama dan terakhir halaman:

Contoh

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Cuba Sendiri

Ruangan di antara tautan

Petunjuk:Jika Anda ingin menghindari penggabungan tautan halaman, tambahkan margin Properti:

Contoh

.pagination a {
  margin: 0 4px; /* Margen atas, bawah dan luar 0, dapat disesuaikan */
}

Cuba Sendiri

Ukuran halaman

Gunakan font-size Properti berubah untuk mengubah ukuran halaman:

Contoh

.pagination a {
  font-size: 22px;
}

Cuba Sendiri

halaman tengah

Untuk menengahkan halaman, gunakan yang disetel text-align:center Elemen penyangkut (seperti <div>) mengelilingkannya:

Contoh

.center {}}
  text-align: tengah;
}

Cuba Sendiri

Lebih banyak contoh

Contoh

Cuba Sendiri

Breadcrumbs

Sebuah bentuk lain untuk paging adalah yang disebut 'crumbs' (crumbs):

Contoh

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: hitam;
  content: "/\00a0";
}

Cuba Sendiri