Láthattál már ilyet sok főoldalon.

Demó:

HTML kód:

<div class="pagination">

<ul>

<li><a href="#" class="prevnext disablelink">« Előző</a></li>

<li><a href="#" class="currentpage">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">6</a></li>

<li><a href="#">7</a></li>

<li><a href="#">8</a></li>

<li><a href="#">9</a>...</li>

<li><a href="#">15</a></li>

<li><a href="#">16</a></li>

<li><a href="#" class="prevnext">Következő »</a></li>

</ul>

</div>

 

CSS kód:

<style type="text/css">

 

.pagination{

padding: 2px;

}

 

.pagination ul{

margin: 0;

padding: 0;

text-align: left;

font-size: 16px;

}

 

.pagination li{

list-style-type: none;

display: inline;

padding-bottom: 1px;

}

 

.pagination a, .pagination a:visited{

padding: 0 5px;

border: 1px solid #9aafe5;

text-decoration: none; 

color: #2e6ab1;

}

 

.pagination a:hover, .pagination a:active{

border: 1px solid #2b66a5;

color: #ffffff;

background-color: #00BFFF;

}

 

.pagination a.currentpage{

background-color: #2e6ab1;

color: #FFF !important;

border-color: #2b66a5;

font-weight: bold;

cursor: default;

}

 

.pagination a.disablelink, .pagination a.disablelink:hover{

background-color: white;

cursor: default;

color: #929292;

border-color: #929292;

font-weight: normal !important;

}

 

.pagination a.prevnext{

font-weight: bold;

}

 

</style>