Come utilizzare il tag div in HTML per creare blocchi di interfaccia
In questo articolo, ti mostrerò come utilizzare il tag div e alcune proprietà CSS correlate. In tal modo, saprai come creare blocchi sull'interfaccia di un sito Web.
Il tag div svolge un ruolo molto importante, viene utilizzato per creare una copertura per una posizione ( blocco ) sull'interfaccia. Prima, quando non c'erano tag di intestazione, piè di pagina, articolo .., i programmatori utilizzavano i tag div per creare blocchi di interfaccia su intestazione e piè di pagina. Ora è diverso, puoi invece utilizzare i tag div o quei tag appena aggiunti.
Ma alla fine, queste nuove carte non sono niente di speciale. È essenzialmente lo stesso del tag div, basta dare un nuovo nome per guardare il layout HTML in modo da poter giudicare la sua esatta posizione sull'interfaccia.
Mục lục
Proprietà dei tag div in HTML
Il tag div in HTML è un tag normale, visualizzato per impostazione predefinita come un blocco. Pertanto, lo utilizziamo spesso per creare blocchi sull'interfaccia del sito Web.
La lunghezza predefinita di un tag div è 100% , il che significa che si estende completamente da sinistra a destra, il dominio è limitato dalla quantità di spazio che compongono i tag HTML esterni. Il tag div non ha affatto un attributo per regolare la visualizzazione, che dobbiamo combinare con CSS per modificare se necessario.
La sintassi del tag div è la seguente :
<div> ... Nội dung bên trong </div>Puoi anche creare più tag div nidificati come questo :
<div> <div> <div> ... Nội dung bên trong </div> </div> </div>Naturalmente, l'uso eccessivo di tag HTML in un tema influirà sulla velocità di caricamento della pagina, sulla SEO… e su molti altri fattori. Pertanto, per le persone esperte di frontend, saranno molto limitate nell'usare troppi livelli di HTML.
Come creare un blocco div sull'interfaccia HTML
Per utilizzarlo in modo fluido, devi sapere come combinarlo con le proprietà CSS per personalizzare la visualizzazione predefinita dei tag div.
Cambia lo sfondo per il tag div
Molto semplicemente, dobbiamo solo usare la proprietà background nei CSS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Imposta l'altezza e la larghezza per il tag div
Utilizzando le proprietà height e width , possiamo modificare l'altezza e la larghezza del tag div.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background:white; height: 300px; width: 400px; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Crea bordo per tag div
Per creare un bordo, utilizziamo la proprietà border in CSS.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red }Modifica lo spazio tra il contenuto e il bordo
Esegui gli esempi sopra e vedrai il contenuto all'interno del tag div vicino al bordo. Ora userò la proprietà padding in CSS per creare spazio tra di loro.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; }Imposta la centratura dello schermo per il tag div
Se si desidera visualizzare il tag div centrato rispetto ai margini, utilizzare l'attributo margin.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; margin: 0px auto; }Dove 0px è la distanza in alto e in basso e auto è la distanza automatica tra sinistra e destra. Poiché ho impostato auto, verrà automaticamente centrato. Eseguiamo l'esempio per vedere i risultati.
Sposta a sinistra oa destra con float
La proprietà float in CSS ci aiuterà ad allineare a sinistra oa destra per quel tag div.
- float:left => allinea a sinistra
- float:right => allineamento a destra
Ala sinistra
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:left }Destra
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:right }È troppo semplice, vero? In questo articolo, voglio solo introdurre il tag div e alcune delle operazioni più comunemente utilizzate. Nei prossimi articoli lo applicherò ai layout degli edifici.
