Una parte del buon design Web è garantire il testo e le immagini in modo appropriato in fila sulla pagina. Questo produce una continuità e facilita la navigazione del tuo sito. È possibile rendere le immagini allineate orizzontalmente con icone sul vostro sito HTML aggiungendo e modificando il codice del file Index e il foglio di stile CSS.

istruzione

1 Aprire la pagina index.html nel tuo editor HTML.

2 Incollare il seguente codice nella pagina index.html:

<Div class = "ImageBox">
<a href="#">
<Img src = "image1.gif" width = "100" height = "100"
alt = "immagine 1" /> </a>
<P> <a href="#"> 1 </a> </ p>
</ Div>

<Div class = "ImageBox">
<a href="#">
<Img src = "Image2.gif" width = "100" height = "100"
alt = "immagine 1" /> </a>
<P> <a href="#"> 2 </a> </ p>
</ Div>

Sostituire il "#" con l'URL che si desidera che il file di immagine per il collegamento. Sostituire "image.gif" con il nome del file di immagine. È possibile aggiungere altre foto copiando e incollando il codice di cui sopra tutte le volte che è necessario.

3 Salvare il file index.html e caricarlo sul server sito web.

4 Incollare il seguente codice nel foglio di stile CSS del tuo sito web:

div.imageBox {
float: left;
margin-right: 10px;
}

div.imageBox p {
text-align: center;
}

5 Salvare il file di foglio di stile CSS e caricarlo sul server.