Pinceladas da Web

Se você possui um blog ou um site que possui muitas páginas, aqui iremos aprender uma maneira muito fácil para que os usuários possam estar visitando essas páginas mais rapidamente, nós iremos utilizar uma técnica chamada de paginação, onde são dispostos vários números de páginas em formato de listas para que o usuário possa estar navegando mais rapidamente pelo site, essa técnica é muito utilizada em fóruns, e também lá no Digg. Para isso iremos utilizar do seguinte código CSS:

body {
	font-size: 100%;
	color: #333;
	background: #FFF;
	font-family: Arial, Helvetica, sans-serif;
}
#pages {
	padding: 3px;
}
#pages ul {
	list-style-type: none;
}
#pages li {
	float: left;
	display: inline;
	margin: 0 5px 0 0;
	display: block;
}
#pages li a {
	color: #88af3f;
	padding: 4px;
	border: 1px solid #ddd;
	text-decoration: none;
	float: left;
}
#pages li a:hover {
	color: #638425;
	background: #f1ffd6;
	border: 1px solid #85bd1e;
}
#pages li.nolink {
	color: #CCC;
	border: 1px solid #F3F3F3;
	padding: 4px;
}
#pages li.current {
	color: #FFF;
	border: 1px solid #b2e05d;
	padding: 4px;
	background: #b2e05d;
}

E agora, no nosso HTML você pode observar que estamos utilizando de listas desordenadas, que para esse fim seria a melhor indicação, e se notar no código CSS, estamos utilizando a propriedade CSS Display:inline, muito utilizada em menus e formulários para dispor o nosso exemplo em linha.

<div id="pages">
	<ul>
		<li class="nolink">« Previous Page</li>
		<li class="current">1</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="#">10</a></li>
		<li><a href="#">Next Page »</a></li>
	</ul>
</div>

Para as páginas que não estão ativas, utilize-se da classe “nolink”, e para a página que está ativa, utilize-se da classe “current”, veja aqui um exemplo em funcionamento.

Tradução do artigo original de: Now CSS