En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Sayfalama Örnekler


CSS kullanarak bir duyarlı sayfalandırma oluşturmayı öğrenin.


Basit Sayfalama

sayfalar dolu bir web siteniz varsa, her sayfaya pagination çeşit katmak isteyebilirsiniz:

Bir sayfalama, stile bir HTML listesi oluşturmak için:

Örnek

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
Kendin dene "

Aktif ve Hoverable sayfalandırmayı

Bir ile geçerli sayfayı vurgulayın .active sınıf ve kullanımı :hover fareyi üzerinde hareket her sayfa bağlantısının rengini değiştirmek için seçici:

Örnek

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Kendin dene "

Yuvarlak Aktif ve Hoverable Düğmeler

Ekle border-radius bir yuvarlak isterseniz özelliği "active" ve "hover" butonuna:

Örnek

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

ul.pagination li a.active {
    border-radius: 5px;
}
Kendin dene "

Hoverable Geçiş Etkisi

Ekle transition fareyle üzerine geçiş efekti yaratmak için sayfa bağlantıları özelliği:

Örnek

ul.pagination li a {
    transition: background-color .3s;
}
Kendin dene "

Bordürlü sayfalandırmayı

Kullan border sayfalandırmaya sınırları eklemek için özellik:

Örnek

ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}
Kendin dene "

Yuvarlak Sınırlar

İpucu: Sayfa içinde ilk ve son halkasına yuvarlatılmış kenarlar ekleyin:

Örnek

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

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
Kendin dene "

Bağlantılar Arasındaki Boşluk

İpucu: Ekle margin sayfa bağlantıları grup istemiyorsanız lütfen tesise:

Örnek

ul.pagination li a {
    margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}
Kendin dene "

Sayfalandırma Boyutu

Ile pagination boyutunu değiştirme font-size özelliği:

Örnek

ul.pagination li a {
    font-size: 22px;
}
Kendin dene "

ortalanmış Sayfalandırma

, Sayfa numaralarını ortalamak etrafında bir kap elemanı sarmak için (like <div> ) ve eklemek text-align:center

Örnek

div.center {
    text-align: center;
}
Kendin dene "

Diğer Örnekler

Örnek

Kendin dene "

Galeta unu

Pagination bir başka varyasyonu sözde olduğu "breadcrumbs" :

Ö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";
}
Kendin dene "