Tutorial Contoh tab CSS Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
tab sederhana,Klik tab dan melayang-layang gaya,Dengan tab perbatasan,ukuran font paging,tab pusat,contoh yang lebih,Breadcrumbs,
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
ul.pagination {
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
ul.pagination li a.active {
background-color: # 4CAF50;
warna: putih;
}
ul.pagination li a: hover: tidak ( .active) {background-color: #ddd;}
Coba » Contoh CSS
ul.pagination li a.active {
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
ul.pagination li a {
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:
Contoh CSS
ul.pagination li a {
transisi: .3s background-color;
}
Coba »
Dengan tab perbatasan
Kita dapat menggunakan border
atribut untuk menambah halaman dengan perbatasan:
Contoh CSS
ul.pagination li a {
border: 1px #ddd padat; / * Gray * /
}
Coba » sudut dibulatkan
Tip: Di halaman pagination link pertama dan terakhir Tautkan Tambahkan fillet:
Contoh CSS
.pagination li: pertama-anak {
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
ul.pagination li a {
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:
Contoh CSS
ul.pagination li a {
font-size: 22px;
}
Coba »
tab pusat
Jika Anda ingin pusat tab, Anda dapat (seperti <div>) untuk menambahkanteks-menyelaraskan pada elemen kontainer:gayacenter:
Contoh CSS
div.center {
text-align: center;
}
Coba »
contoh yang lebih
Breadcrumbs
navigasi lain seperti remah roti, contoh adalah sebagai berikut:
Contoh CSS
ul.breadcrumb {
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 »