Altın Konu CSS Sayfalandırma Oluşturma..

ByESiNTi · 23 Tem 2021

CSS Sayfalandırma Örnekleri

CSS kullanarak duyarlı bir sayfalandırmanın nasıl oluşturulacağını gösterelim..

Basit Sayfalandırma

Çok sayıda sayfası olan bir web siteniz varsa, her sayfaya bir tür sayfalandırma eklemek isteyebilirsiniz:

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Aktif ve Gezinebilir Sayfalandırma

Geçerli sayfayı bir .activesınıfla vurgulayın ve :hoverfareyi üzerlerine taşırken her sayfa bağlantısının rengini değiştirmek için seçiciyi kullanın:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

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

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Yuvarlatılmış Aktif ve Hoverable Butonlar

border-radiusYuvarlatılmış bir "etkin" ve "vurgulu" düğmesi istiyorsanız özelliği ekleyin :

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Hoverable Geçiş Etkisi

transitionFareyle üzerine gelindiğinde bir geçiş efekti oluşturmak için özelliği sayfa bağlantılarına ekleyin :

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

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

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Transition Effect on Hover</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Kenarlı Sayfalandırma

borderSayfalandırmaya kenarlıklar eklemek için özelliği kullanın :

Örnek

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Borders</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Yuvarlak Kenarlıklar

İpucu: Sayfalandırmadaki ilk ve son bağlantınıza yuvarlak kenarlıklar ekleyin:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

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

.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;
}
</style>
</head>
<body>

<h2>Pagination with Rounded Borders</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Bağlantılar Arası Boşluk

İpucu:margin Sayfa bağlantılarını gruplamak istemiyorsanız özelliği ekleyin :

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Margins</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Sayfalandırma Boyutu

font-sizeÖzellik ile sayfalandırmanın boyutunu değiştirin :

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  font-size: 22px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination Size</h2>
<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Merkezli Sayfalandırma

Sayfalandırmayı ortalamak için, bir kap elemanını (<div> gibi) etrafına şununla sarın: text-align:center

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Centered Pagination</h2>

<div class="center">
  <div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
  </div>
</div>

</body>
</html>

Replicant · 25 Tem 2021

Paylaşım için teşekkürler

EsatOfficial · 25 Tem 2021

Paylaşım için teşekkürler

ByESiNTi · 25 Tem 2021

Replicant' Alıntı:
Paylaşım için teşekkürler

EsatOfficial' Alıntı:
Paylaşım için teşekkürler

Rica Ederim..Yorumlarınız için Teşekkürler..

ByESiNTi · 9 Ağu 2021

günceldir..

Altın Konu CSS Sayfalandırma Oluşturma..

ByESiNTi

CSS Sayfalandırma Örnekleri

Basit Sayfalandırma

Aktif ve Gezinebilir Sayfalandırma

Yuvarlatılmış Aktif ve Hoverable Butonlar

Hoverable Geçiş Etkisi

Kenarlı Sayfalandırma

Örnek

Yuvarlak Kenarlıklar

Bağlantılar Arası Boşluk

Sayfalandırma Boyutu

Merkezli Sayfalandırma

Örnek:

Replicant

EsatOfficial

ByESiNTi

ByESiNTi

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

Altın Konu CSS Sayfalandırma Oluşturma..

ByESiNTi

CSS Sayfalandırma Örnekleri​

Basit Sayfalandırma​

Aktif ve Gezinebilir Sayfalandırma​

Yuvarlatılmış Aktif ve Hoverable Butonlar​

Hoverable Geçiş Etkisi​

Kenarlı Sayfalandırma​

Örnek​

Yuvarlak Kenarlıklar​

Bağlantılar Arası Boşluk​

Sayfalandırma Boyutu​

Merkezli Sayfalandırma​

Örnek:​

Replicant

EsatOfficial

ByESiNTi

ByESiNTi

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

CSS Sayfalandırma Örnekleri

Basit Sayfalandırma

Aktif ve Gezinebilir Sayfalandırma

Yuvarlatılmış Aktif ve Hoverable Butonlar

Hoverable Geçiş Etkisi

Kenarlı Sayfalandırma

Örnek

Yuvarlak Kenarlıklar

Bağlantılar Arası Boşluk

Sayfalandırma Boyutu

Merkezli Sayfalandırma

Örnek: