June 21
Dal HTML 4.01, Sheet (CSS) del codice Cascading Style viene utilizzato per definire l'allineamento di un tag di immagine. Web designer usano la regola "galleggiare" in CSS per allineare qualsiasi elemento HTML - testo, immagini e altri contenuti - a destra oa sinistra di una pagina. Qualsiasi elemento adiacente alla pagina si avvolgere attorno all'elemento galleggiava. In questo caso, testo intorno un'immagine galleggiava. Utilizzare più codice CSS per definire una propria immagine margini, bordi e altre opzioni di formattazione.
1 Aprire il file HTML in un programma di editing di testo semplice o il codice e trovare il testo che si desidera avvolgere intorno all'immagine. Il codice del immagine dovrebbe andare sopra il testo, e non inserire il codice dell'immagine tra i tag di testo. Inserire il codice seguente per aggiungere un'immagine:
<Img class = "avvolto" />
Cambiare "your-image.gif" per l'indirizzo web della vostra immagine. Utilizzare solo il nome del file se il file esiste nella stessa cartella del file HTML a cui si sta aggiungendo l'immagine. Change "avvolto" a qualsiasi nome di classe che ti piace; professionisti preferiscono utilizzare nomi significativi.
2 Modificare il codice CSS del tuo file HTML per allineare l'immagine. Se la pagina Web utilizza un file CSS collegato, aprire il file e aggiungere il codice lì. Se la pagina Web utilizza <style> e </ style> tag, quindi aggiungere il codice necessario tra questi tag. Aggiungere <style> e </ style> tra i tag <head> e </ head> del del file HTML se non link a un file CSS e non contiene ancora <style> tag. Il codice a galleggiare un'immagine è la seguente:
img.wrapped {float: left;}
Change "sinistra" a "destra", se si vuole allineare l'immagine a destra. Change "avvolto" per la classe si imposta nel tag <img>.
3 Aggiungere margini e altri formattazione per l'immagine con l'aggiunta di ulteriori regole di stile per il codice CSS. Margini aggiungere spazio intorno all'immagine e per impedire che sbattere contro il testo avvolto. Quanto segue è un po 'di codice di esempio:
img.wrapped {
float: left;
margin: 5px;
border: 1px nero solido;
}
Modificare il numero dopo "margine" per regolare la dimensione del margine in quel codice. I margini sono qui definiti da pixel; questa immagine ha un margine di cinque pixel su tutti i lati.