Kako plavajočo sliko levo od besedila na spletni strani

Uporaba CSS za poravnavo slike na levi strani postavitve spletne strani

Oglejte si skoraj vsako spletno stran danes in videli boste kombinacijo besedila in slik, ki predstavljajo večino teh strani. Zelo enostavno je dodati besedilo in slike na stran . Besedilo je kodirano z uporabo standardnih oznak HTML, kot so odstavki, seznami in naslovi, medtem ko so slike vključene z elementom .

Sposobnost, da bi to besedilo in te slike dobro delujejo skupaj, je tisto, kar postavlja odlične spletne oblikovalce! Ne želite, da se vaše besedilo in slike prikazujejo ena za drugo, to je, kako bodo elementi na ravni bloka privzeto postavljeni. Ne, hočeš nekaj nadzora nad tem, kako se besedilo in slike gibljejo skupaj, kar bo v končni fazi vizualni dizajn vašega spletnega mesta.

Oblika slike, ki je poravnana na levi strani strani, medtem ko se besedilo te strani giblje okoli njega, je skupna oblika oblikovanja za tiskano obliko in tudi za spletne strani. V spletnem smislu je ta učinek znan kot plavajoča slika . Ta slog se doseže s premoženjem CSS za »float«. Ta lastnost omogoča prikaz besedila okoli slike na levi strani na svojo desno stran. (Ali okrog desne poravnane slike na levi strani.) Poglejmo, kako doseči ta vizualni učinek.

Začni z HTML-jem

Prva stvar, ki jo boste morali storiti, je, da imate nekaj HTML-jev. V našem primeru bomo napisali odstavek besedila in dodali sliko na začetku odstavka (pred besedilom, vendar po odprtju oznake

). Tukaj je tisto, kar izgleda oznaka HTML:

Besedilo odstavka gre tukaj. V tem primeru imamo sliko fotografije na naslovu, zato bo to besedilo verjetno o osebi, za katero gre za glavo.

Privzeto bi bila naša spletna stran prikazana s sliko nad besedilom. To je zato, ker so slike elementi na ravni blokov v HTML-ju. To pomeni, da brskalnik prikazuje privzete prelome pred in za slikovnim elementom. Ta privzeti videz bomo spremenili tako, da se obrnemo na CSS. Prvič, k našemu slikovnemu elementu dodamo vrednost razreda . Ta razred bo deloval kot "kavelj", ki ga bomo uporabili v našem CSS kasneje.

Besedilo odstavka gre tukaj. V tem primeru imamo sliko fotografije na naslovu, zato bo to besedilo verjetno o osebi, za katero gre za glavo.

Upoštevajte, da ta razred "levo" sploh ne naredi ničesar! Za dosego želenega sloga moramo uporabiti CSS naslednji.

Styles CSS

Z našim HTML-jem, vključno z našim atributom razreda "levo", se zdaj lahko obrnemo na CSS. Pravili bi dodali v našo slogovnico, ki bi plavala to sliko, poleg tega pa dodali še malo blazinice, tako da besedilo, ki se bo na koncu dotaknilo slike, ne bo preveč pozorno spremljalo. Tukaj je CSS, ki ga lahko napišete:

.left {float: levo; padding: 0 20px 20px 0; }

Ta slog lebdi to sliko v levo in doda malo blazinice (z uporabo nekaterih CSS kratkih sten) na desni in spodnji del slike.

Če ste pregledali stran, ki vsebuje ta HTML v brskalniku, bi bila slika zdaj poravnana na levo in besedilo odstavka bi se zdelo v desno z ustreznim razmikom med njima. Upoštevajte, da je vrednost razreda "levo", ki smo jo uporabili, poljubna. Lahko bi jo klicali karkoli, ker izraz "left" ne dela ničesar sam. To mora imeti atribut razreda v HTML-ju, ki deluje z dejanskim slogom CSS, ki narekuje vizualne spremembe, ki jih želite narediti.

Alternativni načini za doseganje teh stilov

Ta pristop, ki daje slikovnemu elementu atribut razreda in nato s splošnim slogom CSS, ki plavajo element, je le en način, s katerim lahko dosežete to sliko "levo poravnano sliko". Lahko tudi izklopite vrednost razreda slike in jo vtipkate s CSS s pisanjem natančnejšega izbirnika. Na primer, poglejmo si primer, v katerem je ta slika znotraj razdelka z razredno vrednostjo »glavne vsebine«.