Saiba como criar uma paginação responsiva usando CSS.
simples Paginação
Se você tem um site com muitas páginas, você pode querer adicionar algum tipo de paginação para cada página:
Para criar uma paginação, estilo uma lista HTML:
Exemplo
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: none;
} Tente você mesmo " Ativa e Hoverable Paginação
Realce a página atual com um .active classe, e usar a :hover selector para mudar a cor de cada link da página ao mover o mouse sobre eles:
Exemplo
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} Tente você mesmo " Arredondados botões ativos e Hoverable
Adicione o border-radius propriedade, se você quer um e botão arredondado "ativo" "hover":
Exemplo
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} Tente você mesmo " Hoverable Efeito de transição
Adicionar a transition propriedade para os links de páginas para criar um efeito de transição em foco:
Bordered Paginação
Use a border propriedade para adicionar bordas para a paginação:
arredondada Fronteiras
Dica: Adicione bordas arredondadas para o seu primeiro e último elo da pagination:
Exemplo
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Tente você mesmo " Espaço entre os links
Dica: Adicione o margin propriedade, se você não quer agrupar os links de páginas:
Exemplo
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Tente você mesmo " paginação Tamanho
Alterar o tamanho da paginação com o font-size propriedade:
Paginação centrado
Para centralizar a paginação, enrole um elemento de recipiente em torno dele (como <div> ), e adicionar text-align:center
mais Exemplos
Exemplo
Tente você mesmo "Migalhas de pão
Outra variação de paginação é assim chamada "farinha":
Exemplo
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
Tente você mesmo "