HTML: Sådan ombryde tekst omkring et billede

August 17

HTML: Sådan ombryde tekst omkring et billede


Siden HTML 4.01, er Cascading Style Sheet (CSS) kode, der bruges til at definere et billede tag linjeføring. Webdesignere bruge "flyde" regel i CSS at tilpasse eventuelle HTML-element - tekst, billeder og andet indhold - til højre eller venstre på en side. Enhver tilstødende element på siden vil ombryde omkring flød element. I dette tilfælde, tekst ombrydes omkring et flød billede. Brug mere CSS kode til at definere et billedes marginer, grænser og andre formateringsindstillinger.

Instruktioner

1 Åbn din HTML-fil i en almindelig tekst eller kode redigering program og finde den tekst, du vil ombryde omkring billedet. Billedet kode skal gå over teksten, og ikke placere billedet kode mellem de tekstelementer tags. Placer følgende kode for at tilføje et billede: <img src = klasse "din-image.gif" = "indpakket" /> Change "din-image.gif" til webadressen på dit billede. Brug kun filens navn, hvis filen findes i samme mappe som HTML-filen, som du tilføjer billedet. Change "pakket ind" til uanset klasse navn, du kan lide; fagfolk foretrækker at bruge meningsfulde navne.

2 Rediger din HTML fil CSS kode for at justere billedet. Hvis din webside bruger en sammenkædet CSS-fil, skal du åbne denne fil og tilføje koden der. Hvis din webside bruger <style> og </ style> tags, tilsæt derefter den nødvendige kode mellem disse tags. Tilføj <style> og </ style> mellem <head> og </ head> tag er i HTML-filen, hvis den ikke linke til en CSS-fil og endnu ikke indeholder <style> tags. Koden til at flyde et billede er som følger: img.wrapped {float: venstre;} Skift "venstre" til "rigtige", hvis du ønsker at tilpasse billedet til højre. Change "pakket ind" til den klasse, du har angivet i <img> tag.

3 Tilføj marginer og anden formatering til billedet ved at tilføje flere stil regler til din CSS kode. Margener tilføjer plads omkring billedet, og vil holde det fra at støde ind i den indpakkede tekst. Det følgende er nogle eksempler kode: img.wrapped {float: venstre; margin: 5px; kant: 1px solid sort; } Ændr antallet efter "margin" for at justere størrelse margenen i denne kode. De margener her er defineret af pixels; dette billede har en fem-pixel margin på alle sider.


relaterede artikler