Contoh halaman CSS

Belajar bagaimana untuk menggunakan CSS untuk membuat halaman berfungsi yang ber responsif.

Halaman berikut

Jika ada banyak halaman di situs web, mungkin Anda ingin menambahkan fungsi halaman berikut di setiap halaman:

Contoh

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

Coba Sendiri

Halaman navigasi yang dapat dihover

Dengan .active Kelas menonjolkan halaman saat ini, dan digunakan saat mouse di atasnya: :hover Pilih pengecoakan warna setiap tautan halaman:

Contoh

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

Coba Sendiri

Halaman navigasi active dengan rounded corner

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;
}

Coba Sendiri

efek transisi yang dapat dihover

Pindahkan transition Properti menambahkan efek transisi ke tautan halaman, menciptakan efek transisi saat mouse di atasnya:

Contoh

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

Coba Sendiri

Halaman dengan border

Gunakan border Properti menambahkan border ke halaman:

Contoh

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

Coba Sendiri

Buntut rounded

Peringatan:Tambahkan buntut 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;
}

Coba Sendiri

ruang antar tautan

Peringatan:Jika Anda tidak ingin menggabungkan tautan halaman, tambahkan margin Properti:

Contoh

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

Coba Sendiri

ukuran halaman

Gunakan font-size Ganti ukuran halaman dengan properti:

Contoh

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

Coba Sendiri

Halaman yang menengahkan

Untuk menengahkan halaman, gunakan yang disetel: text-align:center Element wadah kontainer (seperti <div>) memeriksa dia:

Contoh

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

Coba Sendiri

Beberapa Contoh Lain

Contoh

Coba Sendiri

Roti Kering

Salah satu bentuk lain dari pemagilan adalah yang disebut "crumbs" (roti kering):

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";
}

Coba Sendiri