Hvordan lage en flytende bilde på et nettsted

Bilder kan sprite opp selv de kjedeligste webside når du vet hva du skal gjøre med dem. HTML og CSS kan du sette inn et bilde og deretter bryte tekst rundt det å bruke "flyte" effekt. Flottøren effekten er ofte brukt i websider der bildene utfyller en kropp av tekst som i et magasin eller en bok. Med CSS (Cascading Style Sheets), kan du endre justeringen senere.

Bruksanvisning

CSS-kode

1 Start en tekst editor. Åpne stilark for Web-siden du vil redigere. Hvis det ikke er noen stilark for det ennå, lag en ny fil og lagre den som "style.css". Du kan bruke et annet navn, men holde Css forlengelse.

2 Skriv inn følgende CSS erklæring i stilarket. Merk at "img" her er en CSS-velger som tilsvarer HTML-koden <img> som brukes til å sette inn bilder i en webside. Eiendommen "flyte" og dens verdi "venstre" (uten anførselstegn) vil justere bildet til venstre når det vises på en webside.

img {

float: left;

}

3 Legg en klasse til velgeren. Dette er valgfritt, men det er en god idé å bruke en hvis du bruker mer enn ett bilde per webside. Lag en klasse for hvert bilde justering du vil bruke.

Eksempel:

img.floatleft {

float: left;

}

Bilder fra klassen "floatleft" vil bli fløtet til venstre.

4 Klikk til høyre for høyre klammeparentes. Trykk på "Enter" tasten for å starte på en ny linje i stilarket. Skriv inn følgende kode:

img {

float: right;

}

5 Legg en klasse til koden du nettopp la inn. Samtlige bilder av denne klasse vil bli fløtet til høyre.

Eksempel:

img.floatright {

float: right;

}

6 Trykk på "Enter" -tasten igjen et par ganger for å starte en ny linje. Skriv inn følgende kode for bilder som vil arve justeringen av HTML-koden de er plassert i. Du kan bruke hvilket som helst navn for klassen, så lenge du ikke bruker det navnet for en annen klasse.

img.floatinherit {

float: inherit;

}

7 Lagre stilsett ved å bruke tekst editor.

HTML kode

8 Åpne websiden i en tekst editor. Sett inn følgende kode mellom <head> og </ head> taggene. Hvis du allerede har koblet stilark til websiden, trenger du ikke å gjøre dette.

<Link rel = "stylesheet" type = "text / css" href = "mystyle.css" />

9 Søk på nettet siden koden til du finner stedet der du vil sette inn et bilde. For eksempel kan det være lurt å legge inn bildet i starten av et avsnitt.

10 Skriv inn HTML-kode for å sette inn et bilde. Plasser den mellom HTML-koder for området der du vil at den skal vises. For eksempel, hvis du vil at bildet skal vises inne i et avsnitt, plasserer den mellom <p> og </ p> koder. Skriv inn plasseringen av bildet i "src" attributt og et visningsnavn for det i "alt" attributt.

Eksempel:

<P> <img alt = "image visningsnavn" /> </ p>

11 Legg den klassen du ønsker å bruke. Bruk den klassen som vil flyte bildet der du ønsker det. Slå opp stilark.

Eksempel: For å justere bildet til venstre, skriv inn navnet på klassen som har en "venstre" justering i stilarket.

<P> <img class = "floatleft" alt = "image visningsnavn" /> </ p>

12 Gjenta for hvert bilde du ønsker å flyte. Lagre websiden.

Hint

  • Ikke alle nettlesere støtter "arve" eiendommens verdi.