Indlela Yokususa Isithombe Ngakwesokunxele Sombhalo ekhasini leWebhu

Ukusebenzisa i-CSS ukuvumelanisa isithombe ngakwesokunxele seLungiselelo lekhasi lewebhu

Bheka cishe noma yiliphi ikhasi lewebhu namhlanje futhi uzobona inhlanganisela yombhalo nezithombe ezenza inqwaba yamakhasi. Kulula kakhulu ukwengeza umbhalo nezithombe ekhasini . Umbhalo ukhonjiswe ngokusebenzisa amathegi ejwayelekile we- HTML afana nezigaba, uhlu, nezihloko, kanti izithombe zifakiwe besebenzisa isici .

Ikhono lokwenza lowo mbhalo kanye nalezi zithombe zisebenza kahle ndawonye yilokho okubeka abaqambi bewebhu abakhulu! Awufuni nje ukuthi umbhalo wakho nezithombe zivele ngokulandelana, yilokho lezi zakhi zezinga lokuvimba ezizobe zihlele ngokuzenzakalelayo. Cha, ufuna ukulawula ukuthi umbhalo kanye nezithombe zigeleza kanjani kulokho okuzobe sekugcineni kube yiklamo yakho ebonakalayo yewebhu.

Ukuba nomfanekiso ohambelana nehlangothini lwesobunxele bekhasi ngenkathi umbhalo walolu khasi ugeleza nxazonke kuyindlela yokwelapha evamile yokwakhiwa okuphrintiwe kanye namakhasi ewebhu. Emibhalweni yewebhu, lo mphumela waziwa njengokusondela kwesithombe . Lesi sitayela sitholakala nge- CSS ye-"float". Lo mhlaba uvumela umbhalo ukuba ugeleze uzungeze umfanekiso ohambisana nesokunxele ngakwesokudla. (Noma eduze kwesithombe esivumelanisiwe kwesokudla ngakwesobunxele.) Ake sibheke ukuthi singayifeza kanjani lesi sici esibukwayo.

Qala Nge-HTML

Into yokuqala oyodinga ukuyenza ine-HTML yokusebenza nayo. Ngomzekelo wethu, sizobhala isigaba sombhalo bese wengeza isithombe ekuqaleni kwesigaba (ngaphambi kombhalo, kodwa ngemuva kokuvula

tag). Nansi ukuthi lelo markup HTML libukeka kanjani:

Umbhalo wendima uya lapha. Kulesi sibonelo, sinesithombe se-headhot isithombe, ngakho-ke lo mbhalo cishe uzoba ngomuntu ongu-headhot.

Ngokuzenzakalelayo, ikhasi lethu lewebhu lizobonisa ngesithombe ngaphezu kombhalo. Lokhu kungenxa yokuthi izithombe ziyizinto zokuvimba ezingeni le-HTML. Lokhu kusho ukuthi isiphequluli sibonisa ukuhlukana komugqa ngaphambi nangemva kwesici sesithombe ngokuzenzakalelayo. Sizoguqula ukubukeka okuzenzakalelayo ngokuphendukela ku-CSS. Okokuqala, noma kunjalo, sizokwengeza inani lesigaba esithombeni sethu sesithombe . Leli klasi lizosebenza njenge "hook" esizoyisebenzisa ku-CSS yethu kamuva.

Umbhalo wendima uya lapha. Kulesi sibonelo, sinesithombe se-headhot isithombe, ngakho-ke lo mbhalo cishe uzoba ngomuntu ongu-headhot.

Qaphela ukuthi leli klasi le "ngakwesokunxele" alithinti lutho! Ukuze sifinyelele isitayela sethu esifisa, kudingeka sisebenzise i- CSS ngokulandelayo.

Izitayela ze-CSS

Nge-HTML yethu endaweni, kufaka phakathi isici sethu sekilasi "sesokunxele", manje singakwazi ukubuyela ku-CSS. Singafaka umthamo ku- style yethu yezitayela ezingasondeza leso sithombe futhi sengeze ukunamathisela okuncane eduze kwalo ukuze umbhalo ozogcina uzungeze isithombe awuhambisani nawo kakhulu. Nansi i-CSS ongayibhala:

.left {float: kwesokunxele; i-padding: 0 20px 20px 0; }}

Lesi sitayela sisondela leso sithombe ngakwesobunxele futhi sinezela kancane (usebenzisa i-CSS shorthand) ngakwesokudla nangaphansi kwesithombe.

Uma ubuyekeze ikhasi eliqukethe le HTML kusiphequluli, isithombe sizobe sesihambelana ngakwesobunxele futhi umbhalo wepharagrafu ubonakale ulungile nangesilinganiso esifanele sokuhlukanisa phakathi kokubili. Qaphela inani lekilasi "lesokunxele" esilisebenzisayo lingenakuphikisa. Singazibiza ngokuthi yikuphi ngoba igama elithi "kwesokunxele" alenzi lutho ngokwedwa. Lokhu kudinga ukuba nesici seklasi ku-HTML esebenza ngesitayela sangempela se-CSS esichaza izinguquko ezibukwayo ozozenza.

Ezinye izindlela zokufeza lezi zitayela

Le ndlela yokunikeza isici sesithombe isici seklasi bese usebenzisa isitayela jikelele se-CSS esitshela isici kungenye indlela ongayifeza ngayo lokhu "ukubukeka kwesithombe esinqunyiwe". Ungase futhi uthathe inani lekilasi ngaphandle kwesithombe nesitayela nge-CSS ngokubhala umkhethi oqondile. Isibonelo, ake sibheke isibonelo lapho leso sithombe singaphakathi ngaphakathi kwesigaba ngexabiso lesigaba "kokuqukethwe okuyinhloko".

Umbhalo wendima uya lapha. Kulesi sibonelo, sinesithombe se-headhot isithombe, ngakho-ke lo mbhalo cishe uzoba ngomuntu ongu-headhot.

Ukuze udwebe lesi sithombe, ungabhala le CSS:

.kuqukethwe okulandelayo: float: kwesokunxele; i-padding: 0 20px 20px 0; }}

Kulesi sceario, isithombe sethu sizoqondaniswa ngakwesobunxele, ngombhalo usondela nxazonke, kodwa asidingi ukwengeza inani lekilasi elengeziwe kumakethe wethu. Ukwenza lokhu esikalini kungasiza ukudala ifayela elincane le-HTML, elizoba lula ukuphatha futhi lingasiza ekuthuthukiseni ukusebenza.

Okokugcina, ungangeza ngisho nezitayela ngqo kumakethe wakho we-HTML, njengale:

Umbhalo wendima uya lapha. Kulesi sibonelo, sinesithombe se-headhot isithombe, ngakho-ke lo mbhalo cishe uzoba ngomuntu ongu-headhot.

Le ndlela ibizwa ngokuthi " izitayela ezifakiwe ". Akukwaziswa ngoba kuhlanganisa ngokucacile isitayela sesici nesibalo saso sokwakha. Imikhuba emihle ye-Web ibeka ukuthi isitayela nesakhiwo sekhasi kufanele zihlale zihlukile. Lokhu kuyasiza kakhulu uma ikhasi lakho lidinga ukuguqula isakhiwo salo futhi ubuke ubukhulu bezinkrini namaskrini afanayo newebhusayithi ephendulayo. Ukuba nesitayela sekhasi elihlanganisiwe ku-HTML kuzomenza kube nzima kakhulu ukubhala imibuzo yemidiya ezoshintsha isimo sakho sesayithi njengoba sidingeka kulezo zikrini ezahlukene.

Isihloko sokuqala sikaJennifer Krynin. Ihlelwe nguJeremy Girard ngomhlaka 4/3/17.