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:
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 parágrafo, como visto no bloco de código abaixo:
Home é o ponto de partida dos sonhos e esperanças!
nós somos um time! Trabalhe juntos para uma visão comum ..
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”:
corpoEm seguida, o “.myhtmltabs”É usado para acessar a divisora pai adicionada no arquivo html:
.myhtmltabsA descrição do código acima mencionado é descrito aqui:
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"]Etapa 4: Rótulo de estilo
Atribua algumas propriedades CSS às legendas ou dos rótulos das guias, como:
Etapa 5: estilo H1
A seção abaixo mencionada mostra o tamanho da fonte do
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 .abaPode -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 + .abaEtapa 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ótuloDepois 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.