Come ottenere tag div per sedersi sotto l'un l'altro

March 5

Come ottenere tag div per sedersi sotto l'un l'altro


E 'buona norma codice HTML per separare il contenuto di un documento dalla formattazione. Cascading Style Sheets (CSS) sono utilizzati per formattare gli elementi del documento HTML. Il Modello Box delineato dal World Wide Web Consortium è il concetto di base di come gli attributi CSS riguardano gli elementi del documento. Utilizzando il modello di sicurezza, il divario tra le due tag div può essere impostato utilizzando l'attributo margine di CSS, più o meno lo stesso che si avrebbe un margine su una pagina.

istruzione

1 Aprite il vostro editor HTML preferito. Se si utilizza un editor WYSIWYG, scegliere di visualizzare il codice sorgente.

2 Inserire il seguente codice all'interno degli elementi del corpo del documento.

<Div id = "top">

<P> Questo è l'elemento superiore div. </ P>

</ Div>

<Div id = "bottom">

<P> Questo è l'elemento div fondo. </ P>

</ Div>

3 Inserire i seguenti elementi di stile al documento tra i tag head.

<Style>

superiore {

background-color: red;

border: 5px nero solido;

margin-bottom: 0;

}

parte inferiore {

background-color: verde;

border: 5px giallo solido;

margin-top: 0;

}

</ Style>

4 Salvare il documento.

5 Visualizza il documento finito nel browser Web. Non ci sarà spazio tra la parte superiore e inferiore elementi div. Questo spazio è controllato dagli attributi margin-bottom e margin-top appropriate.

Il codice completo è:

<Html>

<Head>

<Title> Il mio titolo </ title>

<Style>

superiore {

background-color: red;

border: 5px nero solido;

margin-bottom: 0;

}

parte inferiore {

background-color: verde;

border: 5px giallo solido;

margin-top: 0;

}

</ Style>

</ Head>

<Body>

<Div id = "top">

<P> Questo è l'elemento superiore div. </ P>

</ Div>

<Div id = "bottom">

<P> Questo è l'elemento div fondo. </ P>

</ Div>

</ Body>

</ Html>

Consigli e avvertenze

  • elementi di stile deve essere collocato tra i tag head del documento piuttosto che i tag body per evitare che non CSS browser conformi dalla lettura dello script come parte del contenuto del documento. Non CSS browser conformi possono includere lettori web utilizzati dai non vedenti di accedere a Internet.