Exemplos de guia CSS
Neste capítulo, apresentaremos como criar uma instância de paginação através do uso de CSS.
guias simples
Se seu site tem muitas páginas, você vai precisar usar a guia para tornar a navegação para cada página.
O exemplo a seguir demonstra como usar HTML e CSS para criar página:
Exemplos CSS
display: inline-block;
padding: 0;
margin: 0;
}
li ul.pagination {display: inline;}
ul.pagination li um {
color: black;
float: left;
padding: 16px 8px;
text-decoration: none;
}
tente »
Clique no estilo de guia e foco
Se você clicar nessa página, você pode usar .active para definir o estilo de página atual, você pode usar o mouse-over :hover seletores para modificar o estilo:
Exemplos CSS
background-color: # 4CAF50;
cor: branco;
}
ul.pagination li a: hover: não ( .active) {background-color: #ddd;}
tente »
Exemplos CSS
background-color: # 4CAF50;
cor: branco;
}
ul.pagination li a: hover: não (.active) {background-color: #ddd;}
tente »
estilo arredondado
Você pode usar o border-radius propriedade para a página selecionada para adicionar estilo cantos arredondados:
Exemplos CSS
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
tente »
efeitos de transição em foco
Nós podemos adicionar a transition propriedade para mover o mouse sobre a página quando você adicionar efeitos de transição:
Com guia de fronteira
Podemos usar a border atributo para adicionar uma página com uma borda:
cantos arredondados
Dica: Nos primeiro e último links de paginação página da ligação Adicionar filetes:
Exemplos CSS
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
li .pagination: last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
tente »
intervalo de paginação
Dica: Você pode usar a margin propriedade para adicionar um espaço diretamente para cada página:
Exemplos CSS
margem :. 0 4px; / * 0 é para cima e em baixo Sinta-se livre para alterá-lo * /
}
tente »
tamanho da fonte paginação
Podemos usar o font-size propriedade para definir o tamanho da fonte página:
guia central
Se você quiser guia centro, você pode (como <div>) para adicionartext-align no elemento contentor:estilocenter:
mais exemplos
farinha de rosca
Outra navegação, tal como pão ralado, os exemplos são os seguintes:
Exemplos CSS
padding: 16px 8px;
list-style: none;
background-color: #eee;
}
li ul.breadcrumb {display: inline;}
ul.breadcrumb li + li: antes de {
padding: 8px;
color: black;
content: "/ \ 00A0";
}
tente »