Nwlapcug.com


Come nidificare i tag Div posizione

Tag DIV sono tag HTML che creare un DIV contenitore. DIV contenitori possono essere utilizzato per posizione o stile testo, immagini e altri contenitori DIV e vengono in genere utilizzati per creare il layout di base di un sito Web. DIV contenitori possono essere posizionati utilizzando la proprietà CSS "position", insieme alle informazioni che indica la posizione relativa o assoluta richiede la vostra. Si può anche mettere un DIV contenitore all'interno di un altro contenitore, che si chiama "nidificazione". Combinando le proprietà di posizione dei contenitori DIV annidati, è possibile creare effetti di layout unico che sarebbero difficili da replicare utilizzando tabelle HTML o tag "< SPAN >".

Istruzioni

1

Aprire il documento di pagina Web in un editor di testo o HTML. Per aprire il documento utilizzando l'editor di testo di Windows nativo, cliccate destro sul file, quindi fare clic su "Apri con". Fare clic per selezionare "Blocco note" dall'elenco delle applicazioni, quindi fare clic su "OK".

2

Fare clic per posizionare il cursore su una riga del documento, tra il "< BODY >" e "< / BODY >" tag, in cui si desidera creare i contenitori nidificati di DIV.

3

Tipo "< div style =" Posizione: absolute; Top: [x] px; sinistra: [y] px;' > "per creare il contenitore DIV esterno con la proprietà"position"impostata su"absolute". Il valore "assoluto" significa che il DIV è posizionato sullo schermo senza legame con altri contenitori. La posizione di un elemento pagina "assoluta" è definita solo in relazione l'area di visualizzazione del browser Web. Sostituire il testo "[x]" con il numero di pixel dalla parte superiore dello schermo che si desidera posizionare il DIV. sostituire il testo "[y]" con il numero di pixel che si desidera posizionare l'elemento DIV dal lato sinistro dello schermo.

4

Tipo "< div style =" Posizione: parente; Top: [x] px; sinistra: [y] px;' > "per creare un contenitore nidificato interno DIV con una posizione relativa. Il valore di posizione "relativa" rende il DIV contenitore display in una posizione che è relativo alla sua contenente gli elementi della pagina. In questo caso l'elemento di pagina che lo contiene è il DIV contenitore creato nel passaggio precedente. Sostituire il testo "[x]" con la distanza in pixel che si desidera visualizzare il contenitore DIV interno dalla parte superiore del contenitore DIV esterno. Sostituire "[y]" con la distanza in pixel che si desidera posizionare il contenitore DIV interno dal bordo sinistro del contenitore DIV esterno.

5

Digitare o incollare qualsiasi contenuto che si desidera visualizzare nel contenitore DIV interno.

6

Tipo "< / div >" per chiudere il contenitore DIV interno con il posizionamento relativo.

7

Tipo "< / div >" per chiudere il contenitore DIV esterno con il posizionamento assoluto.

8

Fare clic sul menu "File", quindi fare clic su "Salva" per salvare il documento di pagina Web.

Consigli & Avvertenze

  • È possibile modificare la "posizione" valori dei contenitori DIV interni ed esterni creati in precedenza per creare un DIV contenitore esterno con posizionamento relativo e un contenitore interno di DIV con posizionamento assoluto. È inoltre possibile creare contenitore DIV annidati che entrambi hanno il posizionamento assoluto o relativo.