O melhor tutorial Exemplos de guia CSS em 2024. Neste tutorial você pode aprender
guias simples,Clique no estilo de guia e foco,Com guia de fronteira,tamanho da fonte paginação,guia central,mais exemplos,farinha de rosca,
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
ul.pagination {
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
ul.pagination li a.active {
background-color: # 4CAF50;
cor: branco;
}
ul.pagination li a: hover: não ( .active) {background-color: #ddd;}
tente » Exemplos CSS
ul.pagination li a.active {
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
ul.pagination li um {
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:
Exemplos CSS
ul.pagination li um {
transição: .3s background-color;
}
tente »
Com guia de fronteira
Podemos usar a border
atributo para adicionar uma página com uma borda:
Exemplos CSS
ul.pagination li um {
border: 1px #ddd sólida; / * cinza * /
}
tente » cantos arredondados
Dica: Nos primeiro e último links de paginação página da ligação Adicionar filetes:
Exemplos CSS
li .pagination: primeiro-criança a {
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
ul.pagination li um {
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:
Exemplos CSS
ul.pagination li um {
font-size: 22px;
}
tente »
guia central
Se você quiser guia centro, você pode (como <div>) para adicionartext-align no elemento contentor:estilocenter:
Exemplos CSS
div.center {
text-align: center;
}
tente »
mais exemplos
farinha de rosca
Outra navegação, tal como pão ralado, os exemplos são os seguintes:
Exemplos CSS
ul.breadcrumb {
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 »