CSS Sayfalandırma Örnekleri
CSS kullanarak duyarlı bir sayfalandırmanın nasıl oluşturulacağını öğrenin.
Basit Sayfalandırma
Çok sayıda sayfası olan bir web siteniz varsa, her sayfaya bir tür sayfalandırma eklemek isteyebilirsiniz:
Örnek
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Aktif ve Gezinebilir Sayfalandırma
.active
Geçerli sayfayı bir sınıfla vurgulayın ve :hover
fareyi üzerlerine taşırken her sayfa bağlantısının rengini değiştirmek için seçiciyi kullanın:
Örnek
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Yuvarlatılmış Aktif ve Hoverable Düğmeler
border-radiusYuvarlatılmış bir "etkin" ve "vurgulu" düğmesi istiyorsanız özelliği ekleyin :
Örnek
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Hoverable Geçiş Etkisi
transitionFareyle üzerine gelindiğinde bir geçiş efekti oluşturmak için özelliği sayfa bağlantılarına ekleyin :
Örnek
.pagination a {
transition: background-color .3s;
}
Kenarlı Sayfalandırma
borderSayfalandırmaya kenarlıklar eklemek için özelliği kullanın :
Örnek
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Yuvarlak Kenarlıklar
İpucu: Sayfalandırmadaki ilk ve son bağlantınıza yuvarlak kenarlıklar ekleyin:
Örnek
.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;
}
Bağlantılar Arası Boşluk
İpucu:margin Sayfa bağlantılarını gruplamak istemiyorsanız özelliği ekleyin :
Örnek
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Sayfalandırma Boyutu
Özellik ile sayfalandırmanın boyutunu değiştirin font-size:
Örnek
.pagination a {
font-size: 22px;
}
Merkezli Sayfalandırma
Sayfalandırmayı ortalamak için, bir kap elemanını (<div> gibi) etrafına şununla sarın: text-align:center
Örnek
.center {
text-align: center;
}
Daha fazla örnek
Örnek
Galeta unu
Sayfalandırmanın başka bir varyasyonu "ekmek kırıntıları" olarak adlandırılır:
Örnek
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}