Nwlapcug.com


Come inserire un Div in un Div

Come inserire un Div in un Div


Un elemento < div > è un elemento di elemento HTML (Hypertext Markup) che contiene il contenuto. Gli sviluppatori Web utilizzano spesso elementi < div >, insieme a valori di Cascading Style Sheet (CSS) per definire come il contenuto è strutturato e visualizzato nella pagina web. È possibile nidificare gli elementi < div > dentro l'altro per creare intricati formati senza l'utilizzo di tabelle. In questa esercitazione si creerà un elemento < div > esterno e tre elementi interno < div >, insieme a tre diversi stili CSS.

Istruzioni

Creare una pagina Web

1

Fare clic sul pulsante "Start", scegliere la voce di menu "Tutti i programmi", la voce di menu "Accessori", quindi la voce di menu "Blocco note".

2

Digitare il seguente codice nella finestra del documento:

< html >

< head >

< title > Nested Div dimostrazione < / title >

< / head >

< corpo >

< / body >

< / html >

< Html > è l'elemento più esterno e consente al browser di sapere che si dovrebbe tradurre il contenuto come HTML. Nell'elemento < head > contiene elementi che definiscono le informazioni generali relative alla pagina. In questo esempio, l'elemento < title > definisce il testo visualizzato nella barra del titolo quando la pagina viene visualizzata. L'elemento < body > contiene il contenuto visualizzato nella pagina.

3

Fare clic sul menu "File" e scegliere la voce di menu "Salva" per visualizzare la finestra di dialogo "Salva come".

4

Scegliere "Tutti i file" dall'elenco a discesa "Salva come tipo". Ciò è necessario per impedire l'aggiunta alla fine del nome del file l'estensione ". txt".

5

Digitare "DivsExample.html" nel campo "Nome File".

6

Passare al percorso dove si desidera salvare il file. Assicurati di che ricordare per l'utilizzo nei passaggi successivi.

7

Fare clic sul pulsante "Salva" per salvare il file.

Verificare la pagina

8

Fare clic sul pulsante "Start" e scegliere la voce di menu "Computer".

9

Passare al percorso dove hai salvato il "DivsExample.html".

10

Fare doppio clic su "DivsExample.html" e verificare che il titolo corretto viene visualizzato nella barra del titolo del browser. Se così non fosse, verificare il markup è stato digitato per assicurarsi di che non digitare nulla in modo non corretto.

Creare il Div esterno

11

Digitare il seguente codice tra i tag < head > e < / head > tag:

< style type = "text/css" >

.outerDiv () {

border: solid 2px tan;

Width: 300px;

Altezza: 150px;

Posizione: parente;

font-family: verdana;

font-weight: bold;

font-size: 11px;

}

< / stile >

L'elemento < style > viene utilizzato per definire gli stili CSS inline. Si antepone il nome dello stile con un "." per indicare che lo stile viene selezionato in base al valore di attributo "class" dell'elemento. Di conseguenza, che avete appena creato un inline CSS stile che verrà applicate anche tutti gli elementi con un attributo class impostato su "outerDiv". È definire le proprietà dello stile all'interno di parentesi graffe. Le proprietà sono definite come "coppie nome: valore."

12

Digitare il seguente codice tra i tag < body > e < / body > tag:

< div class = "outerDiv" >

Scatola esterna

< / div >

Impostando l'attributo di "classe" dell'elemento < div > da "outerDiv", si indica che lo stile definito nel passaggio 1 dovrebbe essere applicato per div. Il contenuto dell'elemento < div > è "Outer scatola." Questo è il testo che verrà visualizzato all'interno della scatola.

13

Fare clic sul menu "File" e scegliere la voce di menu "Salva".

14

Portare la finestra del browser "Dimostrazione di Div annidati" in primo piano. Pulsante destro del mouse nella finestra e scegliere la voce di menu "Aggiorna". Dovrebbe essere visualizzata una finestra con un bordo marrone chiaro. Deve contenere il testo "box Outer." Se non viene visualizzato correttamente, controlla il tuo markup e correggere eventuali errori.

Creare un Div interno

15

Aggiungere il seguente codice CSS all'interno dell'elemento < style > sotto la parentesi graffa chiusa (}) dello stile outerDiv:

.vBarDiv

{

background-color: #000000;

Width: 300px;

Height: 100px;

Posizione: parente;

}

Questo stile verrà applicato a qualsiasi elemento con l'attributo di "classe" impostato su "vBarDiv". Lo stile definisce un 100 per cento nero bar 100 pixel di altezza e 300 pixel lungo che verrà posizionato rispetto agli altri elementi.

16

Digitare il seguente codice sotto il testo "box Outer":

< div class = "vBarDiv" >

< / div >

17

Fare clic sul menu "File" e scegliere la voce di menu "Salva".

18

Portare la finestra del browser "Dimostrazione di Div annidati" in primo piano. Pulsante destro del mouse nella finestra e scegliere la voce di menu "Aggiorna". Una scatola nera deve essere disegnata all'interno della scatola di bordo marrone, sotto il testo. Se non lo è, verificare che non hai fatto un errore di battitura.

Creare altri DIV interno

19

Digitare il seguente codice CSS sotto la parentesi graffa di chiusura della definizione dello stile di varBarDiv:

.wordDiv

{

background-color: #FF0000;

Larghezza: 100px;

Posizione: parente;

text-align: center;

}

Questa definizione di stile crea una scatola rossa che è 100 pixel di larghezza. Il contenuto della casella sarà centrato.

20

Aggiungere il markup seguente dopo il testo "box Outer":

< div class = "wordDiv" >

Interno

< / div >

21

Aggiungere il markup seguente sotto l'elemento < div > che disegna la barra nera:

< div class = "wordDiv" >

Casella

< / div >

22

Fare clic sul menu "File" e scegliere la voce di menu "Salva".

23

Portare la finestra del browser "Dimostrazione di Div annidati" in primo piano. Pulsante destro del mouse nella finestra e scegliere la voce di menu "Aggiorna". Una scatola rossa con la parola "Interiore" deve essere visualizzata sopra la barra nera. Una scatola rossa con la parola "Casella" dovrebbe essere visualizzata sotto la barra nera. Le caselle rosse devono essere allineate con il bordo sinistro della scatola esterna. Se non vengono visualizzati correttamente, controlla il tuo markup per errori.

Consigli & Avvertenze

  • Anche se questo tutorial utilizza il blocco note e Internet Explorer, lo stesso markup dovrebbe essere utilizzato, indipendentemente dal fatto gli strumenti utilizzati. Se esegue il test in un browser diverso da Internet Explorer, potrebbero differire i passaggi per aggiornare la pagina. Ad esempio, Firefox ha una voce di menu "Ricarica" invece di una voce di menu "Aggiorna".
  • Le differenze tra un selettore di stile di classe e un selettore di stile id è un selettore di classe può essere applicato a più elementi in una pagina; considerando che un selettore id può essere applicato a una sola.
  • Assicurarsi che ogni tag aperto ha un tag di chiusura.
  • Alcuni browser trattare i nomi di classe come maiuscole/minuscole.