Il tag < div > è uno degli elementi costitutivi fondamentali di qualsiasi sito Web. Un div può essere pensato come un contenitore, come una scatola che mantiene tutti i tuoi contenuti, pulite e ordinate, o una cartella è possibile presentare alcune informazioni in. Questo consente di logicamente ordinare il contenuto sul tuo sito Web e posizionarlo dove si desidera. Quando si inserisce un div in HTML il contenuto sarà visibile ma il div stesso sarà invisibile. Rendendolo visibile, è necessario utilizzare una piccola quantità di CSS.
Istruzioni
Definizione il div in HTML
1
Aprire il documento HTML nell'editor di testo ASCII preferito. Se non si dispone di un editor di testo, utilizzare il blocco note.
2
Individuare gli elementi che si desidera eseguire il wrapping in un div. Può trattarsi di testo o un'immagine. Il modo più rapido per trovare contenuti specifici è quello di fare una ricerca usando "Ctrl + f".
3
Inserire un div nel codice utilizzando il tag < div > di apertura e il tag di chiusura < / div >. Il codice dovrebbe risultare come questo:
< div >
I contenuti qui
< / div >
4
Dare il div un id. L'id può essere nulla, ma che è meglio tenerlo descrittivo, in modo si può capire il codice quando si arriva a modificarlo. L'id dovrebbe assomigliare a questo:
< div id = "wrapper" >
Rendere il div visibile in CSS
5
Aprire il documento CSS nel vostro comodo editor di testo ASCII. Se non si dispone di un editor di testo, utilizzare il blocco note.
6
Creare una nuova classe in questo documento utilizzando il seguente codice:
Wrapper () {
}
7
Dare il div un'altezza e una larghezza effettuando le seguenti operazioni:
Wrapper () {
height:100px;
width:100px;
}
8
Rendere visibile il div dandogli un bordo come segue:
Wrapper () {
border:1px solid black;
}
9
Per garantire il div e il suo contenuto sono visibili e non eredita gli stili da altrove, aggiungere la proprietà visible, come questo:
Wrapper () {
visibility: visible
}
Consigli & Avvertenze
- È possibile nascondere il vostro div e il suo contenuto utilizzando "visibilità: nascosto".
- Il vostro div deve avere contenuto o un'altezza specificata e larghezza siano visibili.
- Garantire i documenti HTML e CSS sono collegati utilizzando < link rel = "stylesheet" type = "text/css" href="styles.css" / > all'interno dei tag < head >.