Merhaba arkadaşlar bu yazımda css ile ilgili bir paging yani sayfalama örneği yapacağım,
Css Cascading Style Sheets açılımına tekabül eder. Bunuada Stil oluşturmak diye niteleyebiliriz.
Sayfalama , özellikle blog sitelerinde ya da görüntüleme datagrid mantığıyla çalışan interaktif ekranlarda oldukça kullanışa elverişli bir yapı diyebilir.
Css için birden fazla selektör biçimi vardır ,
Element selector ,
H1{
color: White;
}
İd selektör,
#pr{
Color:red;
}
Class selektör
.center {
text-align: center;
color: red;
}
Bunları yaptığımızda .css uzantılı bir dosyanın içinde saklayarak refere edebileceğimiz gibi ,
Html’de head tagları arasında bulunan style tagının içine koyabiliriz
Css ile nasıl sayfalama yapabileceğimize ;
<!– <!DOCTYPE html>
<html>
<head>
<style>
<!– Özet kısmında değinildiği gibi class şeklinde selector’ü kullanıyoruz –>
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: canvas;
}
</style>
</head>
<body>
<h2>Temel Sayfalama</h2>
<ul class=”pagination”>
<li><a href=”#”></a></li>
<li><a href=”https://www.oguzaltuntas.com/sp_whoisactive-how-to-use-sp_whoisactive-in-a-loop-using-sp_whoisactive”>1</a></li> <!– href için yönlendirme yapıyorsunuz –>
<li><a class=”active” href=”#”>2</a></li>
<li><a href=”https://www.oguzaltuntas.com/asp-net-login-ekrani-yapimi-simple-user-login-form-example-in-asp-netc/”>3</a></li>
<li><a href=”https://www.oguzaltuntas.com/http-hatasi-403-14-forbidden-web-sunucusu-bu-dizinin-icindekileri-listelemeyecek-sekilde-yapilandirilmis/”>4</a></li>
<li><a href=”https://www.oguzaltuntas.com/briefly-unavailable-for-scheduled-maintenance-error-hatasi-briefly-unavailable-for-scheduled-maintenance-check-back-in-a-minute/”>5</a></li>
<li><a href=”https://www.oguzaltuntas.com/msb3283-cannot-find-wrapper-assembly-for-type-library-microsoft-office-core-verify-that-1-the-com-component-is-registered-correctly-and-2-your-target-platform-is-the-same-as-the-bitness-of-t/”>6</a></li>
<li><a href=”#”>7</a></li>
<li><a href=”#”>»</a></li>
</ul>
</body>
</html> –>
dosyayı .html uzantısında kaydedip çalıştırdığınızda ,
şeklinde çıktı göreceksiniz.
Bir sonraki yazıda görüşmek üzere sağlıcakla.
Oğuz ALTUNTAŞ © 2016
Türkçe
English