Ao usar um site ou aplicativo, pode ser necessário mudar de página, documentos e opções diferentes. Mais especificamente, para navegar para conteúdo específico, “guias”Pode ser utilizado. No HTML, as guias são a área clicável em qualquer aplicativo que ajude na navegação pela página. Quando uma guia é clicada, seu conteúdo relacionado é mostrado e outras guias ficam ocultas.

Este estudo descreve o procedimento para criar e modelar guias no HTML.

Como criar guias no HTML?

Para criar guias no HTML, siga as instruções abaixo da lista abaixo.

Etapa 1: Crie arquivo HTML básico

Primeiro, adicionamos uma classe div chamada “myhtmltabs”:

Faremos três guias para demonstrar o exemplo prático:

• Dentro da div mencionada, faça três controles de rádio para “lar","sobre", e "contato”, Respectivamente. Esses rádios de entrada estão associados a elementos do rótulo. O elemento de entrada “eu iaO atributo deve ser o mesmo que o “para”Atributo do elemento do rótulo.
• O botão de rádio da guia Home é marcado como “verificado”, Que representa por padrão o botão de rádio doméstico deve ser verificado.

LAR

SOBRE

CONTATO

Criamos com sucesso três botões de rádio, onde o botão de verificação padrão é o botão home:

Etapa 2: Adicione conteúdo

Em seguida, adicione conteúdo a cada botão. Para esse fim, adicione três divs abaixo de cada botão de rádio. Dentro da div, adicionamos o

tag para o cabeçalho e o

Tag para o parágrafo, como visto no bloco de código abaixo:

LAR

Lar

Home é o ponto de partida dos sonhos e esperanças!

SOBRE

Sobre

nós somos um time! Trabalhe juntos para uma visão comum ..

CONTATO

Informações de contato

Nós nos comunicamos com eles, com amor, com coragem, com sorriso!

Os botões de rádio com o conteúdo relacionado podem ser vistos na saída abaixo:

Etapa 3: Div principal/pai do estilo

Faça um novo arquivo CSS em seu projeto e insira seu link no arquivo html, conforme dado abaixo:

Vamos dar algum estilo à estrutura HTML acima. Você pode aplicar o estilo CSS de acordo com sua preferência.

Aqui, o elemento corporal é estilizado definindo a cor de fundo como “rgba (173, 202, 171, 0.849)”. Além disso, a família de fontes está definida como “sem serifa”:

corpo
Background-Color: RGBA (173, 202, 171, 0.849);
Font-Family: Sans-Serif;

Em seguida, o “.myhtmltabs”É usado para acessar a divisora ​​pai adicionada no arquivo html:

.myhtmltabs

exibição: flex;
FLEX-WRAP: WRAP;
MAX-LUDA: 600PX;
margem: 50px automático;
preenchimento: 25px;

A descrição do código acima mencionado é descrito aqui:

• ““Exibição: flex”A propriedade é adicionada ao elemento pai para que os elementos filhos sejam alinhados automaticamente em colunas e linhas e sua largura e margem de altura como automóvel.
• ““FLEX-ABRILHO: PROBLEMA”Propriedade define se os itens flexíveis são inseridos em uma linha ou várias linhas.
• ““MAX-LIMA: 600PX”Indica que a largura máxima da div deve ser 600px.
• ““margem: 50px automático”Dá margem de fundo superior como 50px e esquerda para a direita como automóvel.
• ““preenchimento: 25px”Dá o espaço dentro da div como 25px.

Não queremos tornar os botões de rádio visíveis na página da web. Para fazer isso, defina sua tela como “nenhum”:

.Myhtmltabs input [type = "Radio"]

Mostrar nenhum;

Etapa 4: Rótulo de estilo

Atribua algumas propriedades CSS às legendas ou dos rótulos das guias, como:

• Definindo o “preenchimento" como "25px”
• ““espessura da fonte" como "audacioso”
• ““cor de fundo" como "RGB (220, 207, 233)”
• ““cursor" como "ponteiro”Para representar um ícone com uma mão apontadora para melhorar a interação:

.rótulo myhtmltabs
preenchimento: 25px;
intensidade da fonte: Negrito ;
Background-Color: RGB (220, 207, 233);
Cursor: Ponteiro;

Etapa 5: estilo H1

A seção abaixo mencionada mostra o tamanho da fonte do

A tag é definida como "2em”:

.myhtmltabs .Tab H1
Size da fonte: 2em;

Etapa 6: estilo infantil de estilo

Em seguida, aplique o estilo no “.aba”Div, que é a criança dividida do“myhtmltabs”Div. Esta div é para a área de conteúdo. Definiremos suas propriedades de largura, altura, estofamento e cor de fundo abaixo. Depois disso, defina seu pedido como 1, que definirá as guias no topo. Em seguida, a propriedade Display é definida como nenhuma:

.myhtmltabs .aba
largura: 100%;
Altura: 200px;
preenchimento: 20px;
Background-Color: RGB (228, 216, 171);
Ordem: 1;
Mostrar nenhum;

Pode -se observar que o estilo é aplicado com sucesso; No entanto, o conteúdo ainda não aparece:

Etapa 7: Exibir conteúdo das guias

O elemento ao lado do sinal plus (+) mostra que esses elementos serão mostrados na mesma ordem quando o botão de rádio for verificado. Quando a entrada que tem o tipo de rádio do .myhtmltabs div está verificado e exibe os elementos de irmãos “rótulo" e ".aba”Div Classe na linha Block (inteira):

.Myhtmltabs input [type = 'Radio']: marcada + rótulo + .aba
exibição: bloco;

Etapa 8: Guia de estilo aberto

Para diferenciar entre a guia aberta e outros, a cor de fundo da etiqueta é definida como “RGB (67, 144, 216)”E a cor de texto é definida como branca:

.Myhtmltabs input [type = 'Radio']: marcada + rótulo
Antecedentes: RGB (67, 144, 216);
cor branca;

Depois de interpretar todo o código descrito acima, vamos ver o resultado!

É assim que você pode criar guias em html.

Conclusão

As guias HTML são as áreas clicáveis ​​em qualquer aplicativo que navegue no usuário para uma seção específica. Ao utilizar as guias, os usuários podem prosseguir para várias seções do aplicativo. No HTML, você pode criar guias facilmente definindo o tipo de entrada como rádio e aplicando diferentes propriedades CSS. Neste post, aprendemos o procedimento para criar guias no HTML com a ajuda de uma demonstração prática.