Contoh tab CSS
Bab ini kami akan memperkenalkan cara membuat sebuah instance dari paging melalui penggunaan CSS.
tab sederhana
Jika situs Anda memiliki banyak halaman, Anda harus menggunakan tab untuk membuat navigasi untuk setiap halaman.
Contoh berikut menunjukkan bagaimana menggunakan HTML dan CSS untuk membuat halaman:
Contoh CSS
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
warna: hitam;
float: kiri;
padding: 8px 16px;
text-decoration: none;
}
Coba »
Klik tab dan melayang-layang gaya
Jika Anda mengklik halaman ini, Anda dapat menggunakan .active untuk mengatur gaya halaman saat ini, Anda dapat menggunakan mouse-over :hover pemilih untuk memodifikasi gaya:
Contoh CSS
background-color: # 4CAF50;
warna: putih;
}
ul.pagination li a: hover: tidak ( .active) {background-color: #ddd;}
Coba »
Contoh CSS
background-color: # 4CAF50;
warna: putih;
}
ul.pagination li a: hover: tidak (.active) {background-color: #ddd;}
Coba »
gaya bulat
Anda dapat menggunakan border-radius properti untuk halaman yang dipilih untuk menambah gaya sudut dibulatkan:
Contoh CSS
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Coba »
efek transisi Hover
Kita dapat menambahkan transition properti untuk menggerakkan mouse pada halaman ketika Anda menambahkan efek transisi:
Dengan tab perbatasan
Kita dapat menggunakan border atribut untuk menambah halaman dengan perbatasan:
sudut dibulatkan
Tip: Di halaman pagination link pertama dan terakhir Tautkan Tambahkan fillet:
Contoh CSS
border-top-kiri-radius: 5px;
border-bottom-kiri-radius: 5px;
}
.pagination li: terakhir-anak {
border-top-kanan-radius: 5px;
border-bottom-kanan-radius: 5px;
}
Coba »
Interval paging
Tip: Anda dapat menggunakan margin properti untuk menambahkan spasi langsung ke setiap halaman:
Contoh CSS
Margin :. 0 4px; / * 0 adalah untuk atas dan bawah Jangan ragu untuk mengubahnya * /
}
Coba »
ukuran font paging
Kita dapat menggunakan font-size properti untuk mengatur ukuran font halaman:
tab pusat
Jika Anda ingin pusat tab, Anda dapat (seperti <div>) untuk menambahkanteks-menyelaraskan pada elemen kontainer:gayacenter:
contoh yang lebih
Breadcrumbs
navigasi lain seperti remah roti, contoh adalah sebagai berikut:
Contoh CSS
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li + li: sebelum {
padding: 8px;
warna: hitam;
konten: "/ \ 00a0";
}
Coba »