Come progettare DIV Scatole

September 1

HTML è il linguaggio di base utilizzato per la progettazione di pagine Web. HTML contiene un numero di elementi utilizzati per creare suddivisioni in pagine Web. Alcuni di questi elementi HTML sono: tabelle, tag span, strati e tag DIV. tag DIV sono spesso utilizzati con i fogli di stile CSS e sono popolari con i progettisti web per la loro flessibilità, facilità d'uso e la formattazione. Utilizzando tag DIV è possibile creare diversi sotto-divisioni o sezioni di molto tenere e contenuti in formato. La definizione di un tag DIV è semplice e non richiede l'apertura <DIV> tag e di chiusura </ DIV>.

istruzione

1 Aprire il Blocco note. Digitare o copiare e incollare il seguente codice:

<Html>

<Title> Il mio DIV Scatole </ title>

<Style type = "text / css">

<! -

box1 {

height: 300px;

width: 300px;

background-color: # 003366;

}

box2 {

background-color: #FF0000;

altezza: 300px;

width: 300px;

}

box2 {

float: right;

}

->

</ Style>

</ Head>

<Body>

<Div id = "box1"> Questo è il riquadro 1 e il suo blu </ div>

<Div id = "box2"> Questo è il contenitore 2 e la sua rossa </ div>

</ Body>

</ Html>

Il codice precedente definisce due caselle DIV nella pagina Web utilizzando l'aperta <div> e la chiusura </ div> tag. Uno si chiama: box1 e l'altro è chiamato: box2. Il codice utilizza quindi CSS per definire le loro caratteristiche, come il colore di sfondo, le posizioni, larghezza e altezza.

2 Fare clic su "File", "Salva con nome". Seleziona "Tutti i file" come il "Salva come tipo."

3 Salvare il file come un file HTML mettendo ".html" alla fine del nome del file. Per esempio: MyBoxDivs.html.

4 Vai a cui è stato salvato la pagina Web sul disco rigido. Fare doppio clic su di esso. Si aprirà nel browser. Si dovrebbe vedere due scatole DIV, uno rosso e l'altro blu.


Articoli Correlati