Nwlapcug.com


Come fare galleggiare un'immagine utilizzando lo stile di Span

Come fare galleggiare un'immagine utilizzando lo stile di Span


"Galleggia" contribuire a rendere intricati disegni di layout Web possibile. Sviluppatori professionisti utilizzano l'attributo CSS "float" per posizionare immagini e altri oggetti sulle pagine Web. Utilizzando uno stile di "float left", ad esempio, è possibile rendere testo in un elemento HTML span elemento avvolgere intorno il lato destro dell'immagine. Potreste aver visto questo modello di layout durante la visualizzazione di articoli di giornale e riviste che contengono la disposizione del testo intorno alle immagini. Imparare a galleggiare un'immagine su una pagina Web e scopri un mondo di nuove funzionalità di formattazione del testo che può migliorare il tuo sito.

Istruzioni

1

Aprire un documento HTML utilizzando blocco note o editor HTML.

2

Incollare questo codice nella sezione body del documento:

< img class = "floatImageLeft" / >

< span >

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test

< / span >

Questo codice crea un'immagine..--utilizzando un tag img..--e un arco. L'intervallo contiene testo andrà a capo intorno all'immagine. Si noti che l'immagine img fa riferimento a una classe CSS denominata "floatLeft." Sostituire "testImage.png" con l'URL di un'immagine sul Web o il nome del percorso di un'immagine sul disco rigido. Per esempio, se un'immagine denominata "park.gif" è in una cartella denominata "Images" sull'unità "C", creare il tag img come segue:

< img class = "floatImageLeft" / >

3

Incollare le seguenti definizioni di classe CSS nella sezione head del documento:

< style type = "text/css" >

.floatImageLeft () {

float: left;

margin-left: 10px;

margine-destra: 20px;

}

.floatImageRight () {

float: Right;

margin-left: 10px;

margine-destra: 20px;

}

< / stile >

La classe floatImageLeft, a cui fa riferimento l'immagine, contiene un attributo float. Valore dell'attributo è "sinistra". Questo valore indica il browser a galleggiare gli oggetti sul lato sinistro di una pagina Web. La classe "floatImageRight" galleggia oggetti sul lato destro di una pagina.

4

Salvare il documento e aprirlo utilizzando un browser. La classe floatLeft fa sì che l'immagine a galleggiare sul lato sinistro della pagina Web; il testo intorno a lato destro dell'immagine.

5

Tornare alla sezione body del documento HTML e modificare il codice "floatImageLeft" a "floatImageRight" nel tag img. Salvare il documento, poi tornare al vostro browser.

6

Premere "F5" per ricaricare il browser. L'immagine viene spostata verso il lato destro della pagina Web e il testo intorno a lato sinistro dell'immagine.

Consigli & Avvertenze

  • Le impostazioni dei margini, definite nelle classi CSS float, assicurano che le immagini non si aggrappano troppo vicino ai lati della pagina Web. Questo ulteriore spazio bianco tra un'immagine e il bordo di una pagina Web consente di creare un layout più professionali. I valori dei margini consentono inoltre di controllare la distanza tra l'immagine e il testo adiacente situato nell'arco. Esperimento con diversi valori per i margini destro e sinistro vedere come valori diversi influiscono sull'aspetto della vostra immagine e span.