Yayınlanmış Yazılar

Sayfa Numaralandırma Stili

Etiketler:, , , , , , , ,

Sayfalama yapılan scriptlerde sayfa numaralarını ile değiştirerek farklı görüntüler elde edebilirsiniz.

CSS Sayfalama Stili

Bu resimdeki gibi sayfa numaralarınız olsun istiyorsanız aşağıdaki adımları takip edin.

Temanızın <head></head> kodları arasına şu stil şablonunu ekleyin:

DÜZ YAZI
CSS:
  1. <style>
  2. body {
  3.     font-size: 100%;
  4.     color: #333;
  5.     background: #FFF;
  6.     font-family: Arial, Helvetica, sans-serif;
  7. }
  8. #sayfalar {
  9.     padding: 3px;
  10. }
  11. #sayfalar ul {
  12.     list-style-type: none;
  13. }
  14. #sayfalar li {
  15.     float: left;
  16.     display: inline;
  17.     margin: 0 5px 0 0;
  18.     display: block;
  19. }
  20. #sayfalar li a {
  21.     color: #88af3f;
  22.     padding: 4px;
  23.     border: 1px solid #ddd;
  24.     text-decoration: none;
  25.     float: left;
  26. }
  27. #sayfalar li a:hover {
  28.     color: #638425;
  29.     background: #f1ffd6;
  30.     border: 1px solid #85bd1e;
  31. }
  32. #sayfalar li.linksiz {
  33.     color: #CCC;
  34.     border: 1px solid #F3F3F3;
  35.     padding: 4px;
  36. }
  37. #sayfalar li.aktif {
  38.     color: #FFF;
  39.     border: 1px solid #b2e05d;
  40.     padding: 4px;
  41.     background: #b2e05d;
  42. }
  43.  
  44. </style>

Sıra geldi kodlarımıza:

DÜZ YAZI
HTML:
  1. <div id="sayfalar">
  2.     <ul>
  3.         <li class="linksiz"> « Önceki Sayfa</li>
  4.         <li class="aktif">1</li>
  5.         <li><a href="#">2</a></li>
  6.         <li><a href="#">3</a></li>
  7.         <li><a href="#">4</a></li>
  8.         <li><a href="#">5</a></li>
  9.         <li><a href="#">6</a></li>
  10.         <li><a href="#">7</a></li>
  11.         <li><a href="#">8</a></li>
  12.         <li><a href="#">9</a></li>
  13.         <li><a href="#">10</a></li>
  14.         <li><a href="#">Sonraki Sayfa  »</a></li>
  15.     </ul>
  16. </div>

Hepsi bu :)

Bu Yazıyı Paylaşın

Yorum Yazın

revizyon ile organize matbaacılık brnckvvtmllttrhaberi - Maltepe Nakliyat