Yadda za a Buga wani Hoton zuwa Hagu na Rubutun a Yanar Gizo

Amfani da CSS don daidaita hotunan zuwa gefen hagu na Layout shafin yanar gizon

Dubi kusan kowane shafin yanar gizon yau kuma za ku ga haɗin rubutu da hotuna da suke samar da yawan waɗannan shafuka. Yana da sauƙi don ƙara rubutu da hotuna zuwa shafin . An ƙididdige rubutun ta amfani da daidaitattun HTML tags kamar sakin layi, lissafi, da kuma rubutun, yayin da hotunan an haɗa ta amfani da element .

Da ikon yin wannan rubutun da waɗannan hotuna suna aiki tare tare da shi shine abin da ke tsara manyan masu zanen yanar gizo baya! Ba kawai kuna son rubutunku da hotuna su bayyana daya bayan wani ba, wanda shine yadda waɗannan abubuwan da ke cikin matsala zasu lalace ta hanyar tsoho. A'a, kuna so wasu iko akan yadda rubutu da hotuna ke gudana tare a cikin abin da zai zama zaneccen zane na yanar gizonku.

Samun hoton da ke hagu zuwa gefen hagu na shafi yayin da rubutun wannan shafi ke gudana a kusa da shi yana da mahimmanci don magance zane da kuma shafukan intanet. A cikin shafukan yanar gizon, wannan sanannen an san shi azaman hotunan hotunan . An samu wannan salon tare da dukiyar CSS don "taso kan ruwa". Wannan dukiya yana ba da damar rubutu ya gudana a kusa da gefen hagu zuwa hoto na dama. (Ko a kusa da hoto mai haɗin kai zuwa gefen hagu.) Bari mu dubi yadda za mu cimma wannan tasiri.

Fara tare da HTML

Abu na farko da zaka buƙatar yi shine samun HTML don aiki tare. Misali, za mu rubuta rubutu na rubutu kuma ƙara hoto a farkon sakin layi (kafin rubutun, amma bayan bude

tag). Ga abin da wannan samfurin HTML yayi kama da:

Rubutun sakin layi ya tafi nan. A cikin wannan misali, muna da hoton hoto, don haka wannan rubutu zai iya kasancewa game da mutumin wanda kamannin kansa yake.

By tsoho, shafin yanar gizon mu zai nuna tare da hoton da ke sama da rubutu. Wannan shi ne saboda hotunan hotunan abubuwa ne a cikin HTML. Wannan yana nufin cewa nuni na nuni yana raguwa kafin da bayan bayanan hoto ta hanyar tsoho. Za mu canza wannan yanayin ta hanyar juya zuwa CSS. Da farko, duk da haka, zamu ƙara darajar koli a siffar hotonmu . Wannan kundin zai yi aiki a matsayin "ƙugiya" da za mu yi amfani da su a CSS a baya.

Rubutun sakin layi ya tafi nan. A cikin wannan misali, muna da hoton hoto, don haka wannan rubutu zai iya kasancewa game da mutumin wanda kamannin kansa yake.

Yi la'akari da cewa wannan aji na "hagu" baya yin kome a kan kansa! Don mu cimma burin da muke so, muna buƙatar amfani da CSS gaba.

CSS Styles

Tare da HTML ɗinmu a wurin, ciki har da sifa na "hagu", za mu iya juya zuwa CSS. Za mu ƙara wata doka zuwa tsarin mu wanda zai zuga wannan hoton kuma ƙara dan ƙaramin katako kusa da shi domin rubutu da zai rufe shi a kusa da hoton ba ya ɗagawa da shi a hankali. A nan ne CSS za ku iya rubuta:

Wannan salon yana nuna hotunan zuwa gefen hagu kuma yana ƙara dan ƙarami (ta amfani da wasu CSS shorthand) zuwa dama da kasa na hoton.

Idan ka sake nazarin shafi wanda ya ƙunshi wannan HTML a cikin mai bincike, to yanzu hotunan za a haɗa zuwa gefen hagu kuma rubutu na sakin layi zai bayyana a hannunsa na dama tare da adadin dacewa tsakanin su biyu. Ka lura da darajar kimar "hagu" da muka yi amfani da shi ba shi da komai. Mun iya kiran shi komai saboda kalmar "hagu" ba komai akan kansa. Wannan yana buƙatar samun sifa a cikin sashen HTML wadda ke aiki tare da ainihin CSS style da ya nuna canje-canje na gani da kake son yin.

Sauran hanyoyin da za a iya cimma wadannan sifofi

Wannan hanyar da za a ba da siffar hoto a matsayin kamfani sannan kuma ta amfani da mahimmanci CSS wanda ke nuna nauyin shine kawai hanyar da za ka iya cimma wannan "haɗin hagu". Hakanan zaka iya ɗaukar darajar darajar hoton daga hoton kuma yada shi tare da CSS ta rubuta wani zaɓi mai mahimmanci. Alal misali, bari mu dubi misalin inda hoton ya kasance a cikin rabuwa tare da darajar darajar "babban abu".