Mientras usa un sitio web o aplicación, es posible que deba cambiar diferentes páginas, documentos y opciones. Más específicamente, para navegar a contenido específico ",pestañas"Se puede utilizar. En HTML, las pestañas son el área que se puede hacer clic en cualquier aplicación que ayude a navegar alrededor de la página. Cuando se hace clic en una pestaña, se muestra su contenido relacionado y otras pestañas se ocultan.

Este estudio describe el procedimiento para crear y diseñar pestañas en HTML.

Cómo crear pestañas en HTML?

Para crear pestañas en HTML, siga las instrucciones que cotizan a continuación.

Paso 1: crear un archivo HTML básico

Primero, agregamos una clase Div llamada "myhtmltabs":

Haremos tres pestañas para demostrar el ejemplo práctico:

• Dentro del DIV mencionado anteriormente hace tres controles de radio para "hogar","acerca de", y "contacto", Respectivamente. Estas radios de entrada están asociadas con elementos de etiqueta. El elemento de entrada "identificación"El atributo debe ser el mismo que el"para"Atributo del elemento de la etiqueta.
• El botón de radio de la pestaña Inicio está marcado como "comprobado", Que representa de forma predeterminada el botón de radio doméstico debe verificarse.

HOGAR

ACERCA DE

CONTACTO

Hemos creado con éxito tres botones de radio, donde el botón marcado predeterminado es el botón de inicio:

Paso 2: Agregar contenido

A continuación, agregue contenido a cada botón. Para este propósito, agregue tres divs debajo de cada botón de radio. Dentro del div hemos agregado el

etiqueta para el encabezado y el

Etiqueta para el párrafo como se ve en el siguiente bloque de código:

HOGAR

Hogar

El hogar es el lugar de inicio de los sueños y las esperanzas!

ACERCA DE

Acerca de

somos un equipo! Trabajan juntos para una visión común ..

CONTACTO

Información del contacto

nos comunicamos con ellos, con amor, con coraje, con sonrisa!

Los botones de radio con el contenido relacionado se pueden ver en la siguiente salida:

Paso 3: Estilo principal/Padre Div

Haga un nuevo archivo CSS en su proyecto e inserte su enlace en el archivo HTML como se indica a continuación:

Damos un poco de estilo a la estructura HTML anterior. Puede aplicar el estilo CSS de acuerdo con su preferencia.

Aquí, el elemento del cuerpo se diseña estableciendo el color de fondo como "RGBA (173, 202, 171, 0.849)". Además, la familia de fuentes se establece como "sans-serif":

cuerpo
Color de fondo: RGBA (173, 202, 171, 0.849);
Font-Family: Sans-Serif;

A continuación, el ".myhtmltabs"Se usa para acceder al Div principal agregado en el archivo HTML:

.myhtmltabs

Pantalla: Flex;
Flex-Wrap: envoltura;
Máxido: 600px;
Margen: 50px Auto;
relleno: 25px;

La descripción del código mencionado anteriormente se describe aquí:

• "Pantalla: FlexLa propiedad se agrega en el elemento principal para que los elementos secundarios se alineen automáticamente en columnas y filas y su ancho y margen de altura como auto.
• "Flex-Wrap: envolturaLa propiedad define si los elementos flexibles se insertan en una línea o múltiples líneas.
• "anchura máxima: 600px"Indica que el ancho máximo del DIV debe ser de 600px.
• "Margen: 50px Auto"Da un margen de fondo superior como 50px y izquierda a la derecha como Auto.
• "relleno: 25px"Da el espacio dentro del divs como 25px.

No queremos que los botones de radio sean visibles en la página web. Para hacerlo, configure su pantalla como "ninguno":

.entrada myhtmltabs [type = "radio"]

Pantalla: ninguno;

Paso 4: etiqueta de estilo

Asigne algunas propiedades de CSS a los subtítulos o las etiquetas de pestañas, como:

• Establecer el "relleno" como "25px"
• "pescado" como "atrevido"
• "color de fondo" como "RGB (220, 207, 233)"
• "cursor" como "puntero"Representar un ícono con una mano de señalización para mejorar la interacción:

.etiqueta myhtmltabs
relleno: 25px;
Font-Weight: Bold;
Color de fondo: RGB (220, 207, 233);
cursor: puntero;

Paso 5: Estilo H1

La sección a continuación mencionada muestra el tamaño de fuente del

La etiqueta se establece como "2em":

.myhtmltabs .Tab H1
tamaño de fuente: 2em;

Paso 6: Divs de niños estilo

Luego, aplique el estilo en el ".pestaña"Div, que es el niño div de la"myhtmltabs"Div. Este div es para el área de contenido. Estableceremos sus propiedades de ancho, altura, acolchado y color de fondo a continuación. Después de eso, establezca su orden como 1, que establecerá las pestañas en la parte superior. Luego, la propiedad de visualización se establece como ninguna:

.myhtmltabs .pestaña
Ancho: 100%;
Altura: 200px;
relleno: 20px;
Color de fondo: RGB (228, 216, 171);
Orden: 1;
Pantalla: ninguno;

Se puede observar que el estilo se aplica con éxito; Sin embargo, el contenido aún no aparece:

Paso 7: Mostrar contenido de pestañas

El elemento junto al signo más (+) muestra que estos elementos se mostrarán en el mismo orden cuando se verifique el botón de radio. Cuando la entrada tiene la radio de tipo de tipo de la .myhtmltabs div se verifica y luego muestra los elementos hermanos "etiqueta" y ".pestaña"Div Clase en línea de bloque (completa):

.entrada myhtmltabs [type = 'radio']: marcada + etiqueta + .pestaña
bloqueo de pantalla;

Paso 8: Pestaña Abrida de estilo

Para diferenciar entre la pestaña abierta y otros, el color de fondo de la etiqueta se establece como "RGB (67, 144, 216)"Y el color de texto se establece como blanco:

.entrada myhtmltabs [type = 'radio']: checked + etiqueta
Antecedentes: RGB (67, 144, 216);
color blanco;

Después de interpretar todo el código descrito anteriormente, veamos el resultado!

Así es como puedes crear pestañas en HTML.

Conclusión

Las pestañas HTML son las áreas que se pueden hacer clic en cualquier aplicación que navegue al usuario a una sección específica. Al utilizar las pestañas, los usuarios pueden proceder fácilmente a varias secciones de la aplicación. En HTML, puede crear fácilmente pestañas configurando el tipo de entrada como radio y aplicando diferentes propiedades CSS. En esta publicación, hemos aprendido el procedimiento para crear pestañas en HTML con la ayuda de una demostración práctica.