“CSS ile Sayfalama Oluşturma: Basit ve Şık Pagination Örnekleri”

Posted on Mart 31, 2024 by porsukcansu@gmail.com

Sayfalama, web sitelerinde içeriği organize etmenin ve kullanıcıların kolaylıkla gezinmelerini sağlamanın önemli bir parçasıdır. CSS kullanarak sayfalama oluşturmak, içeriğinizi daha erişilebilir ve düzenli hale getirmenize yardımcı olabilir. İşte, basit ve şık CSS pagination örnekleri:

1. Temel Sayfalama:

&lt;div class="pagination"&gt;
  &lt;a href="#" class="prev"&gt;&amp;laquo; Previous&lt;/a&gt;
  &lt;a href="#" class="active"&gt;1&lt;/a&gt;
  &lt;a href="#"&gt;2&lt;/a&gt;
  &lt;a href="#"&gt;3&lt;/a&gt;
  &lt;a href="#"&gt;4&lt;/a&gt;
  &lt;a href="#"&gt;5&lt;/a&gt;
  &lt;a href="#" class="next"&gt;Next &amp;raquo;&lt;/a&gt;
&lt;/div&gt;

.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination a {
  display: inline-block;
  padding: 8px 16px;
  text-decoration: none;
  color: #000;
}

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

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

.pagination a.prev,
.pagination a.next {
  background-color: #f1f1f1;
}

Bu temel sayfalama, sayfalar arasında gezinmeyi sağlar ve etkin sayfayı vurgular.

2. Daire Şeklinde Sayfalama:

&lt;div class="pagination"&gt;
  &lt;a href="#" class="prev"&gt;&amp;laquo;&lt;/a&gt;
  &lt;a href="#" class="active"&gt;1&lt;/a&gt;
  &lt;a href="#"&gt;2&lt;/a&gt;
  &lt;a href="#"&gt;3&lt;/a&gt;
  &lt;a href="#"&gt;4&lt;/a&gt;
  &lt;a href="#"&gt;5&lt;/a&gt;
  &lt;a href="#" class="next"&gt;&amp;raquo;&lt;/a&gt;
&lt;/div&gt;

.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination a {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  background-color: #f1f1f1;
  margin: 0 5px;
  text-decoration: none;
  color: #000;
}

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

.pagination a.prev,
.pagination a.next {
  width: auto;
}

Bu örnek, sayfaları daire şeklinde düzenler ve daha görsel bir tasarım sunar.

Sayfalama, kullanıcı deneyimini artırmak ve içeriği daha iyi organize etmek için önemli bir araçtır. Yukarıdaki CSS pagination örnekleri, sayfalama oluşturmanıza ve web sitenizin görünümünü geliştirmenize yardımcı olabilir.

Bir yanıt yazın Yanıtı iptal et