Hvordan lage bilder Float på en webside
Folk gjør ofte bildene flyte på en webside hvis de dem til å bli lagt merke til, spesielt annonser. Selv om å lage bilder flyte på en webside er ikke vanskelig, krever det en grunnleggende kunnskap om webutvikling og koding. Et bilde kan fløt ved hjelp av enten HTML eller CSS-kode.
Bruksanvisning
Flytende Med CSS-koden
1 Å flyte bildet til venstre, bruker du følgende kode:
img.floatLeft {
float: left;
margin: 4px;
}
2 Juster innstillingene i koden. For eksempel, hvis du ikke vil ha en margin på 4 piksler, endre det til hva margin du ønsker ved å erstatte fire med et annet nummer.
3 Å flyte et bilde til høyre, bruker du følgende kode:
img.floatRight {
float: right;
margin: 4px;
}
Igjen kan marginen endres på samme måte som det ble endret i trinn 2.
Flytende med HTML-kode
4 Å flyte et bilde til venstre på siden med HTML, skriver du inn følgende kode inn i teksteditor:
<Body>
<Img class = "floatLeft">
<P> Dette er teksten på bildet vil flyte rundt </ p>
5 Bytt ut navnet på bildefilen samt teksten i HTML-koden. Hvis bildet er lagret på en server, må du kanskje ta med hele bildet banen i <img src => -taggen. Et eksempel på et fullt bilde bane ville se noe som "/ images / mine bilder / webpageimages / yourpicture.jpg."
6 Float et bilde på høyre side av siden ved å inkludere følgende kode:
<Body>
<Img class = "floatRight">
<P> Dette er teksten på bildet vil flyte rundt </ p>
Du kan legge merke til at den eneste endringen i koden endrer "class: fra floatLeft til floatRight.
Hint
- CSS-koden gir mer fleksibilitet. HTML-koden er ikke tillate brukeren å endre størrelsen på margen.
- Husk å teste din webside i sin forhåndsvisning tilstand før du publiserer det. Dette gjelder spesielt når du eksperimenterer med ulike pikselstørrelser med CSS-koden.