Razvijalci nastavijo položaj slike, da vzpostavijo jasno vizualno hierarhijo z določitvijo vrstnega reda in dimenzij slike glede na druge elemente HTML. S postavitvijo slike na različne položaje je mogoče ustvariti sodobne, edinstvene in prilagojene dizajne, ki lahko spremenijo videz in občutek spletnega mesta. Ta članek prikazuje postopek za nastavitev položaja slike s pomočjo CSS.
Kako nastaviti položaj slike v CSS?
Z nastavitvijo položaja slike v CSS dobite prednosti, kot so » natančna postavitev ”, “ prekrivajoči se element « in » odziven dizajn ” zlahka doseči. Z uporabo teh prednosti lahko razvijalci preprosto prilagodijo in zgradijo popolnoma funkcionalno in privlačno spletno mesto. Obstajata dve metodi/lastnosti, s katerimi lahko nastavite položaj slike. Te lastnosti so opisane spodaj:
1. način: Uporaba lastnosti Float
' lebdi ' lastnost zagotavlja CSS za premikanje elementov HTML v ' levo « ali » prav ” smer. Večinoma se uporablja pri ustvarjanju odzivne postavitve za natančno postavitev elementov HTML.
Na primer, lastnost 'float' se uporablja za poravnavo slik na levi in desni strani spletne strani:
< div >
< img src = 'bg.jpg' višina = '300px' premer = '400px' razred = 'položaj desno' >
< img src = 'knjiga.jpg' višina = '300px' premer = '400px' razred = 'levi položaj' >
div >
V zgornji kodi:
-
- Prvič, koren ' div ” je ustvarjen element, ki deluje kot vsebnik za elemente HTML.
- Nato dva '
Oznake ' se uporabljajo znotraj '
' oznaka.- Po tem so vrednosti ' 300 slikovnih pik « in » 400 slikovnih pik « se zagotovijo » višina « in » premer 'atributi obeh'
” oznake.
- Dodelite tudi razred ' položaj Desno « in » položajLevo ” na prvo in drugo oznako “
”.
Zdaj vnesite »
< stil >” za uporabo naslednjih lastnosti CSS:
.positionRight {
lebdi: desno;
}
.positionLeft {
lebdi: levo;
}
stil >
Opis je podan spodaj:
-
- Najprej izberite » položaj Desno ' in nastavite vrednost ' prav 'na svoje' lebdi ” lastnina. To premakne izbrani element HTML v pravo smer na spletni strani.
- Nato izberite » položajLevo « in navedite vrednost » levo ' do ' lebdi ” lastnina. S tem se element premakne proti levi strani.
Po koncu faze kompilacije:
Izhod kaže, da so bile slike nastavljene na levi in desni položaj.2. način: Uporaba lastnosti položaja objekta
' položaj objekta ” Lastnost zagotavlja postavitev slike ali elementa HTML na določeno mesto na spletni strani. Omogoča nadzor nad vodoravnim in navpičnim položajem, kar uporabniku omogoča doseganje želenega vizualnega učinka ali postavitve. Razvijalci ga večinoma uporabljajo za obrezovanje slik, ustvarjanje sličic, postavitev po meri itd.
Ta lastnost lahko sprejme tako številske kot ključne vrednosti. Na primer, za » položaj objekta ” lastnina. Nastavi položaj slike v CSS v spodnjem delčku kode:
< stil >
.numericalValues
{
položaj predmeta: 100px 20px;
}
.keywordValues
{
položaj objekta: levo;
}
stil >
< telo >
< div >
< img src = 'knjiga.jpg' višina = '300px' premer = '400px' razred = 'keywordValues' >
< img src = 'bg.jpg' višina = '300px' premer = '400px' razred = 'numericalValues' >
div >
telo >
V zgornjem delčku kode:-
- Prvič, ' numericalValues ' je izbran znotraj '
' oznaka. In številčne vrednosti ' 100 slikovnih pik 20 slikovnih pik ' so posredovani CSS ' položaj objekta ” lastnina. ' 100 slikovnih pik « je presledek, dodan v vodoravni smeri, » 20 slikovnih pik ” za vertikalo. - Nato je ' ključne vrednosti « je izbran razred in vrednost ključne besede » levo « je na voljo » položaj objekta ” za poravnavo slike v levo smer.
- Po tem znotraj '
” sta ustvarjeni dve sliki, ki sta jima dodeljena zgoraj ustvarjena razreda.
- Prvič, ' numericalValues ' je izbran znotraj '
Po koncu faze prevajanja je spletna stran videti takole:
Posnetek prikazuje, da so slike zdaj nastavljene na določene položaje.Zaključek
Položaj slike lahko nastavite s pomočjo CSS ' lebdi « in » položaj objekta ” lastnosti. ' lebdi Lastnost vzame ključno besedo kot vrednost in premakne element na levi ali desni položaj. Po drugi strani pa ' položaj objekta «, sprejme ključne in številske vrednosti v vodoravni in navpični smeri. Ta članek je prikazal postopek za nastavitev položaja slike v CSS.
- Po tem so vrednosti ' 300 slikovnih pik « in » 400 slikovnih pik « se zagotovijo » višina « in » premer 'atributi obeh'