Enlaces de páginas con estilo CSS

Una herramienta que muchos utilizan para hacer sus páginas y enlazarlas es crear un menú con numeración, el cual resulta bastante atractivo si lo diseñas bien. entonces aquí verás un ejemplo de ello con hojas de estilo.

El ejemplo está basado par autilizarlo con php pero puedes modificarlo a tu gusto.

<!--

html, body {

background-color: white;

color: #2B3956;

font-family: Verdana, Arial, Sans-Serif;

font-size: 11px;

text-align: left;

}

/* Pagination DIV */

#pg{

width: 700px;

background-color: #FFFFFF;

text-align: center;

font-size: 10px;

margin-bottom: 5px;

padding: 10px;

}

/* Pagination Link */

#pg a {

font-size: 10px;

text-decoration: none;

color: #000000;

border: 1px solid #dddddd;

padding: 3px;

-moz-border-radius: 3px;

}

#pg a:hover {

font-size: 10px;

text-decoration: none;

color: #000000;

border: 1px solid #A7A7A7;

background-color: white;

padding: 3px;

-moz-border-radius: 3px;

}

/* Pagination Current Page */

#pg a.current {

font-size: 10px;

text-decoration: none;

color: #000000;

border: 1px solid #336699;

background-color: #F5F7FA;

padding: 3px;

-moz-border-radius: 3px;

}

/* Pagination Disabled Page */

#pg span.disabled {

font-size: 10px;

text-decoration: none;

color: #C6C7C7;

border: 1px solid #C6C7C7;

background-color: white;

padding: 3px;

-moz-border-radius: 3px;

// Rounds the corners; Works for Mozilla only

}-->

Dentro del body escribirmos lo siguiente, que es en sí la estructura de la paginación:

<div id="pg">

<span class='disabled'>&laquo; Previous</span>&nbsp;&nbsp;<a class="current" href='pagination.php?number=1'>1</a>

&nbsp;&nbsp;<a href='pagination.php?number=2'>2</a>

&nbsp;&nbsp;<a href='pagination.php?number=3'>3</a>

&nbsp;&nbsp;<a href='pagination.php?number=4'>4</a>

&nbsp;&nbsp;<a href='pagination.php?number=5'>5</a>

&nbsp;&nbsp;<a href='pagination.php?number=6'>6</a>

&nbsp;&nbsp;<a href='pagination.php?number=7'>7</a>

&nbsp;&nbsp;<a href='pagination.php?number=8'>8</a>

&nbsp;&nbsp;<a href='pagination.php?number=9'>9</a>

&nbsp;&nbsp;<a href='pagination.php?number=10'>10</a>

&nbsp;&nbsp;<a href='pagination.php?number=2'>Next &raquo;</a></div>