As guias CSS são realmente ótimas para exibir informações relacionadas em um local fácil de navegar. Eles basicamente se parecem com divisores com guias que você veria em uma caixa de receita ou fichário. Exemplos de sites que usam as guias de navegação:
Ao examinar esses dois sites, pense nos benefícios do uso de tal componente da interface do usuário nos sites. Quais problemas precisam ser resolvidos? Que tipo de informação seriam as abas de navegação é um bom trabalho de desenvolvimento?
Quando você precisa alcançar uma árvore da interface do usuário que organiza o texto ou a informação em componentes significativos e os exibe na tela sem ocupando muito espaço, as guias de navegação são uma escolha sábia. Falaremos sobre as abas de navegação com mais profundidade à medida que começarmos a usar JavaScript, jQuery e/ou Bootstrap, mas também há um trabalho formal que poderíamos usar que requer apenas HTML e CSS puros. Vamos dar uma olhada na configuração:
Configure seu código HTML:
Vá em frente e configure seu HTML padrão com um contêiner dentro do corpo que atuará como o contêiner principal do projeto . Você pode nomeá-lo como quiser no atributo class, mas eu o chamarei de class = "tabs"
. Até agora, seu código HTML deve ficar assim: