Schede HTML
Questo studio descrive la procedura per la creazione e lo styling di schede in HTML.
Come creare schede in html?
Per creare schede in HTML, seguire le istruzioni sotto l'elenco.
Passaggio 1: creare il file HTML di base
Innanzitutto, aggiungiamo una classe Div chiamata "myhtmltabs":
Faremo tre schede per dimostrare l'esempio pratico:
- All'interno del Div sopra menzionato crea tre controlli radiofonici per "casa","Di", E "contatto"Rispettivamente. Queste radio di ingresso sono associate agli elementi dell'etichetta. L'elemento di input "id"L'attributo dovrebbe essere lo stesso del"per"Attributo dell'elemento dell'etichetta.
- Il pulsante di opzione della scheda Home è contrassegnato come "controllato", Che rappresenta per impostazione predefinita, il pulsante di radio home deve essere controllato.
Abbiamo creato correttamente tre pulsanti di opzione, in cui il pulsante controllato predefinito è il pulsante Home:
Passaggio 2: Aggiungi contenuto
Quindi, aggiungi contenuto a ciascun pulsante. A tale scopo, aggiungi tre div sotto ogni pulsante di opzione. All'interno del Div abbiamo aggiunto il
tag per l'intestazione e il
Tag per il paragrafo come visto nel blocco del codice seguente:
Casa
La casa è il luogo di partenza dei sogni e delle speranze!
Di
siamo una squadra! lavorare insieme per una visione comune ..
Informazioni sui contatti
Comunichiamo con loro, con amore, con coraggio, con sorriso!
I pulsanti di opzione con il contenuto correlato possono essere visualizzati nell'output seguente:
Passaggio 3: Stile Main/Parent Div
Crea un nuovo file CSS nel tuo progetto e inserisci il suo collegamento nel file HTML come indicato di seguito:
Diamo un po 'di stile alla struttura HTML sopra. Puoi applicare lo stile CSS in base alle tue preferenze.
Qui, l'elemento del corpo è disegnato impostando il colore di sfondo come "RGBA (173, 202, 171, 0.849)". Inoltre, la famiglia dei caratteri è impostata come "sans-serif":
corpoBackground-color: RGBA (173, 202, 171, 0.849);
Font-Family: sans-serif;
Successivamente, il ".myhtmltabs"Viene utilizzato per accedere al Parent Div aggiunto nel file HTML:
.myhtmltabsdisplay: flex;
Flex-wrap: avvolgimento;
Licromra massima: 600px;
Margine: 50px Auto;
imbottitura: 25px;
La descrizione del codice sopra menzionato è descritta qui:
- "Visualizza: Flex"La proprietà viene aggiunta nell'elemento genitore in modo che gli elementi figlio vengano automaticamente allineati in colonne e righe e la loro larghezza e margine di altezza come auto.
- "Flex-wrap: avvolgimento"La proprietà definisce se gli elementi flessibili vengono inseriti su una riga o più linee.
- "Licromra massima: 600px"Indica che la larghezza massima del div dovrebbe essere 600px.
- "Margine: 50px automatico"Dà margine di alto livello come 50px e sinistra a destra come auto.
- "imbottitura: 25px"Dà lo spazio all'interno del div come 25px.
Non vogliamo rendere visibili i pulsanti di radio sulla pagina web. Per fare ciò, imposta il suo display come "nessuno":
.MyHtmlTabs Input [type = "radio"]visualizzazione: nessuno;
Passaggio 4: etichetta di stile
Assegna alcune proprietà CSS alle didascalie o alle etichette delle schede, come:
- Impostazione del "imbottitura" COME "25px"
- "Font-peso" COME "grassetto"
- "colore di sfondo" COME "RGB (220, 207, 233)"
- "cursore" COME "Pointer"Per rappresentare un'icona con una mano indicata per migliorare l'interazione:
imbottitura: 25px;
Font-weight: audace;
Background-color: RGB (220, 207, 233);
Cursore: puntatore;
Passaggio 5: stile H1
La sezione sotto menzionata mostra la dimensione del carattere del
Il tag è impostato come "2em": .myhtmltabs .Tab H1
Font-size: 2em;
Passaggio 6: Style Child Divs
Quindi, applica lo stile sul ".scheda"Div che è il bambino Div del"myhtmltabs"Div. Questo div è per l'area del contenuto. Imposteremo la sua larghezza, altezza, imbottitura e proprietà di sfondo di seguito. Successivamente, imposta il suo ordine come 1, che imposterà le schede in alto. Quindi, la proprietà del display è impostata come nessuno:
.myhtmltabs .Tablarghezza: 100%;
Altezza: 200px;
imbottitura: 20px;
Background-color: RGB (228, 216, 171);
Ordine: 1;
visualizzazione: nessuno;
Si può osservare che lo stile viene applicato con successo; Tuttavia, il contenuto non viene ancora visualizzato:
Passaggio 7: Visualizza il contenuto delle schede
L'elemento accanto al segno più (+) mostra che questi elementi verranno visualizzati nello stesso ordine quando il pulsante di opzione viene selezionato. Quando l'ingresso ha una radio di tipo di .myhtmltabs Div viene controllato, quindi visualizza gli elementi di fratello "etichetta" E ".scheda"Classe Div in Blocco (intera) riga:
.MyHtmlTabs Input [type = 'Radio']: controllato + etichetta + .Tabblocco di visualizzazione;
Passaggio 8: scheda aperta in stile
Per distinguere tra la scheda aperta e altri, il colore di sfondo dell'etichetta è impostato come "RGB (67, 144, 216)"E il colore di testo è impostato come bianco:
.myhtmltabs input [type = 'radio']: controllato + etichettaBackground: RGB (67, 144, 216);
colore bianco;
Dopo aver interpretato tutto il codice sopra descritto, vediamo il risultato!
È così che puoi creare schede in HTML.
Conclusione
Le schede HTML sono le aree cliccabili su qualsiasi applicazione che naviga nell'utente in una sezione specifica. Utilizzando le schede, gli utenti possono facilmente procedere in diverse sezioni dell'applicazione. In HTML, è possibile creare facilmente schede impostando il tipo di input come radio e applicando diverse proprietà CSS. In questo post, abbiamo imparato la procedura per creare schede in HTML con l'aiuto di una dimostrazione pratica.