Onglets HTML
Cette étude décrit la procédure de création et de stylisation des onglets dans HTML.
Comment créer des onglets dans HTML?
Pour créer des onglets dans HTML, suivez les instructions ci-dessous.
Étape 1: Créer un fichier HTML de base
Tout d'abord, nous ajoutons une classe div nommée «myhtmltabs»:
Nous ferons trois onglets pour démontrer l'exemple pratique:
- À l'intérieur du div mentionné ci-dessus, effectuez trois commandes radio pour «maison","à propos", et "contact", respectivement. Ces radios d'entrée sont associées aux éléments d'étiquette. L'élément d'entrée «identifiant«L'attribut doit être le même que le«pour”Attribut de l'élément d'étiquette.
- Le bouton radio de l'onglet Home est marqué comme «vérifié», Qui représente par défaut le bouton radio d'accueil doit être coché.
Nous avons réussi à créer trois boutons radio, où le bouton vérifié par défaut est le bouton d'accueil:
Étape 2: Ajouter du contenu
Ensuite, ajoutez du contenu à chaque bouton. À cette fin, ajoutez trois divs en dessous de chaque bouton radio. À l'intérieur de la div, nous avons ajouté le
tag pour le cap et le
Tag pour le paragraphe comme vu dans le bloc de code ci-dessous:
Maison
La maison est le lieu de départ des rêves et des espoirs!
À propos
Nous sommes une équipe! Travaillez ensemble pour une vision commune…
Coordonnées
Nous communiquons avec eux, avec amour, avec courage, avec sourire!
Les boutons radio avec le contenu connexe peuvent être vus dans la sortie ci-dessous:
Étape 3: Style Div principal / parent
Faites un nouveau fichier CSS dans votre projet et insérez son lien dans le fichier HTML comme indiqué ci-dessous:
Donnons un peu de style à la structure HTML ci-dessus. Vous pouvez appliquer le style CSS en fonction de votre préférence.
Ici, l'élément corporel est conçu en définissant la couleur d'arrière-plan comme «RGBA (173, 202, 171, 0.849)". De plus, la famille des polices est définie comme «sans-serif»:
corpsColor en arrière-plan: RGBA (173, 202, 171, 0.849);
Font-Family: Sans-Serif;
Ensuite, le «.myhtmltabs"Est utilisé pour accéder au div parent ajouté dans le fichier html:
.myhtmltabsAffichage: flex;
wrap flex: enveloppement;
largeur maximale: 600px;
marge: 50px automatique;
rembourrage: 25px;
La description du code susmentionné est décrite ici:
- "Affichage: flexion«La propriété est ajoutée dans l'élément parent afin que les éléments enfants soient automatiquement alignés dans les colonnes et les lignes et leur largeur et marge de hauteur comme auto.
- "wrap flexion: envelopper»La propriété définit si les éléments flexibles sont insérés sur une ligne ou plusieurs lignes.
- "largeur maximale: 600px»Indique que la largeur maximale de la div doit être de 600px.
- "marge: 50px automatique”Donne une marge de haut-fond à 50px et à droite à droite en tant qu'auto.
- "rembourrage: 25px”Donne l'espace à l'intérieur de la div en 25px.
Nous ne voulons pas rendre les boutons radio visibles sur la page Web. Pour ce faire, définissez son affichage comme «aucun»:
.entrée myhtmltabs [type = "radio"]Affichage: aucun;
Étape 4: étiquette de style
Attribuez certaines propriétés CSS aux légendes ou aux étiquettes des onglets, telles que:
- Définition du "rembourrage" comme "25px"
- "poids de police" comme "gras"
- "Couleur de l'arrière plan" comme "RVB (220, 207, 233)"
- "le curseur" comme "aiguille«Pour représenter une icône avec une main pointée pour améliorer l'interaction:
rembourrage: 25px;
Police-poids: Bold;
Color en arrière-plan: RVB (220, 207, 233);
curseur: pointeur;
Étape 5: Style H1
La section mentionnée ci-dessous montre la taille de la police du
La balise est définie comme «2EM»: .myhtmltabs .Tab H1
taille de police: 2em;
Étape 6: Style Child Divs
Ensuite, appliquez un style sur le «.languette»Div qui est l'enfant div du«myhtmltabs»Div. Cette div est pour la zone de contenu. Nous allons définir ses propriétés de largeur, de hauteur, de rembourrage et de couleur en arrière-plan ci-dessous. Après cela, définissez sa commande comme 1, qui définira les onglets en haut. Ensuite, la propriété d'affichage est définie comme aucune:
.myhtmltabs .languetteLargeur: 100%;
hauteur: 200px;
rembourrage: 20px;
Color en arrière-plan: RVB (228, 216, 171);
Commande: 1;
Affichage: aucun;
On peut observer que le style est appliqué avec succès; Cependant, le contenu n'apparaît toujours pas:
Étape 7: Afficher le contenu des onglets
L'élément à côté du panneau Plus (+) montre que ces éléments seront affichés dans le même ordre lorsque le bouton radio est vérifié. Lorsque l'entrée ayant une radio de type du .Myhtmltabs div est vérifié puis affiche les éléments de frères et sœurs "étiqueter" et ".languette”Div Class in Block (entier) Ligne:
.entrée myhtmltabs [type = 'radio']: vérification + étiquette + .Tabbloc de visualisation;
Étape 8: Onglet Style ouvert
Pour différencier l'onglet ouvert et les autres, la couleur d'arrière-plan de l'étiquette est définie comme «RVB (67, 144, 216)»Et la couleur texte est définie comme blanche:
.entrée myhtmltabs [type = 'radio']: vérifié + étiquetteContexte: RVB (67, 144, 216);
Couleur blanche;
Après avoir interprété tout le code décrit ci-dessus, voyons le résultat!
C'est ainsi que vous pouvez créer des onglets dans HTML.
Conclusion
Les onglets HTML sont les zones cliquables de toute application qui navigue à l'utilisateur vers une section spécifique. En utilisant les onglets, les utilisateurs peuvent facilement passer à plusieurs sections de l'application. Dans HTML, vous pouvez facilement créer des onglets en définissant le type d'entrée comme radio et en appliquant différentes propriétés CSS. Dans cet article, nous avons appris la procédure pour créer des onglets en HTML à l'aide d'une démonstration pratique.