tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Exemplos de paginação


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:

Exemplo

ul.pagination li a {
    transition: background-color .3s;
}
Tente você mesmo "

Bordered Paginação

Use a border propriedade para adicionar bordas para a paginação:

Exemplo

ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}
Tente você mesmo "

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:

Exemplo

ul.pagination li a {
    font-size: 22px;
}
Tente você mesmo "

Paginação centrado

Para centralizar a paginação, enrole um elemento de recipiente em torno dele (como <div> ), e adicionar text-align:center

Exemplo

div.center {
    text-align: center;
}
Tente você mesmo "

mais Exemplos


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 "