Pernah liat page link nyang ada di : http://www.dremi.info/tutorial/photoshop-forum.php ???
nah bagian paging na gw pake CSS bwat bikin box link na, kali ini kita bikin nyang sama tapi dengan style CSS nyang berbeda.
Simple aja mulai dengan style ke gini:
<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>
Tros terapkan ke dalam halaman HTML lu:
<div id="pagin">
<a class="sel">1</a><a href="http://csslovers.co.cc">2</a>
<a href="http://dremi468.blogspot.com">3</a>
<a href="http://dremi.info/tutorial/photoshop-forum.php">4</a>
</div>
<a class="sel">1</a><a href="http://csslovers.co.cc">2</a>
<a href="http://dremi468.blogspot.com">3</a>
<a href="http://dremi.info/tutorial/photoshop-forum.php">4</a>
</div>
Tidak ada komentar:
Posting Komentar