Indlela yokugubungela umbhalo Ngomfanekiso

Khangela nayiphi na iphepha lewebhu kwaye uza kubona udibaniso lomxholo wombhalo kunye nekiso. Zomibini zezi zinto ziyimfuneko ebalulekileyo kwimpumelelo yewebhusayithi. Isiqulatho sombhalo yiyiphi iindwendwe zendawo eza kufundwa kwaye zeziphi iinjongo zokukhangela ezizisebenzisayo njengenxalenye yeziqulatho zazo. Imifanekiso izongeza intando ebonwayo kwisayithi kunye nokuncedisa ukuxhaswa komxholo wesicatshulwa.

Ukongeza umbhalo kunye nemifanekiso kwiwebhusayithi kulula. Umbhalo uyongezwa ngeempawu ze-HTML eziqhelekileyo ezifana neziqendu, izihloko, kunye nezintlu, ngelixa imifanekiso ifakwa kwiphepha nge isici. Emva kokuba ungeze umfanekiso kwiphepha lakho lewebhu, nangona kunjalo, unokuba ufuna ukufumana umyalezo ohamba ngaphaya komfanekiso, kunokuba ulungelelanise ngaphantsi kwayo (leyo yindlela engagqibekanga umfanekiso ongeziwe kwidilesi ye-HTML iya kunika kwisiphequluli). Ngokwenene, kukho iindlela ezimbini onokuzifezekisa ngolu hlobo, mhlawumbi ngokusebenzisa iCSS (ekhuthazwayo) okanye ngokufaka imiyalelo ebonakalayo ngqo kwi- HTML (ayikhuthazwa, kuba ufuna ukugcina ukwahlukana kwesitayela nesakhiwo kwiwebhusayithi yakho).

Ukusebenzisa iCSS

Indlela echanekileyo yokutshintsha indlela yokubhaliweyo kwimiyalezo kunye nemifanekiso kunye nendlela amabala abo abonwa ngayo kwi-browser. Khawukhumbule nje, ekubeni sithetha ngenguqu ebonakalayo kwiphepha (ukwenza umyalezo ojikelezayo umzungezo umfanekiso), oku kuthetha ukuba yimihlaba yeSpredish Style Sheets.

1. Okokuqala, faka umfanekiso wakho kwikhasi lakho lewebhu. Khumbula ukuba ungabandakanyi naziphi iimpawu ezibonakalayo (ezifana nobubanzi nobukhulu bexabiso) ukusuka kule HTML. Oku kubalulekile, ngakumbi kwiwebhusayithi ephendulayo apho ubukhulu bomfanekiso buya kuhluka ngokususela kwisiphequluli. Iprojekti ethile, njenge-Adobe Dreamweaver, iya kwandisa ububanzi kunye nokuphakama kolwazi kwimifanekiso efakwe kwisixhobo, ngoko qi niseka ukuba ususe le ngcaciso kwikhowudi ye-HTML! Kodwa qiniseka ukuba kunjalo, ukuba ufake i- al . Nantsi umzekelo wendlela ikhowudi yakho ye-HTML ingajonga ngayo:
2. Ngeenjongo zokubumba, ungongeza kwakhona iklasi kumfanekiso. Ixabiso leklasi yinto esiza kuyisebenzisa kwifayili yethu yeCSS. Qaphela ukuba ixabiso esiyisebenzisayo apha lingahambelani, nangona, kule ndlela ethile, sivame ukusebenzisa ixabiso "lokushiya" okanye "ekunene", kuxhomekeke kwindlela efuna ukuba umfanekiso wethu ulungelelanise. Sifumana ukuba i-syntax elula ukusebenza kakuhle kwaye ibe lula kwabanye abakufuneka bakwazi ukulawula indawo kwixesha elizayo ukuyiqonda, kodwa unokwenza oku nawaphi na amanani eklasi oyifunayo.
   2. Ngokwalo, eli xabiso leklasi aliyi kwenza nantoni na. Umfanekiso awuyi kuhambelana ngokuzenzekelayo ngakwesobunxele besicatshulwa. Kule nto, ngoku kufuneka siphendule kwifayile yethu yeCSS.

1. Kwifayile yefayile yakho, ngoku ungongeza isitayela esilandelayo:
   1. .khohlo {
   2. float: ekhohlo;
   3. ukupakisha: 0 20px 20px 0;
   4. }
   5. Into oyenzayo apha isebenzisa ipropati ye - CSS "float" , eya kutsala umfanekiso ukusuka kumqulu oqhelekileyo weempawu (indlela umfanekiso oza kubonisa ngayo, kunye nesicatshulwa eselungele phantsi kwayo) kwaye iya kulungelelanisa kwicala lasekhohlo lesitya . Isicatshulwa esiza emva kwayo kumarbo we HTML kwaye ngoku siwujikeleze. Siphinde songeze ixabiso lokubambisa ukuze lo mbhalo ungayi kulwa ngqo nomfanekiso. Esikhundleni salokho, kuya kuba neendawo ezintle eziza kubonakala zikhangeleke kwi-design yekhasi. Kwi-CSS mfutshane ye-padding, songeze ixabiso le-0 kumgca ophezulu nangesobunxele womfanekiso, kunye neepikseli ezingama-20 ukuya ngasekhohlo nasezantsi. Khumbula, kufuneka udibanise i-padding ngakwesokunene somfanekiso ohambelana nesobunxele. Umfanekiso olungeleleneyo (esiya kujonga ngawo ngomzuzwana) uza kuba ne-padding esetyenziswe kwicala lasekhohlo.
2. Ukuba ubona iphepha lakho lewebhu kwisiphequluli, ngoku ufanele ubone ukuba umfanekiso wakho uhambelaniswe kwicala lasekhohlo kwiphepha kwaye isicatshulwa siyijikeleze ngokukhawuleza. Enye indlela yokuthetha oku kukuthi umfanekiso "ujikeleze ngakwesobunxele".

1. Ukuba ufuna ukutshintsha lo mfanekiso ukuba ulungelelanise ngakwesokudla (njengomzekelo wesithombe ohamba kunye nale nqaku), kuya kuba lula. Okokuqala, kufuneka uqinisekise ukuba, ukongeza kwisitayela esisandula nje kwiCSS yethu kwixabiso leklasi "lokushiya", sinakho enye yokulungelelanisa okulungileyo. Kuya kubonakala ngathi:
   1. .kunene {
   2. float: kwesokudla;
   3. Ukupakisha: 0 0 20px 20px;
   4. }
   5. Uyabona ukuba oku kufana neCSS yokuqala esiyibhaleyo. Ukwahlukana kuphela yintengiso esisebenzisayo kwipropati ye "float" kunye nemilinganiselo yokubambisa esiyisebenzisayo (ukongeza enye kwicala lasekhohlo lomfanekiso wethu endaweni yokunene).
2. Ekugqibeleni, utshintshe ixabiso leklasi yomfanekiso ukusuka "ngakwesobunxele" ukuya "kunene" kwi-HTML yakho:
3. Khangela ikhasi lakho kwisiphequluli ngoku kunye nomfanekiso wakho kufuneka ulungelelaniswe ngakwesokudla ngokubhaliweyo ngokufanelekileyo ngokujikeleza. Sivame ukongeza zombini le mijelo, "sishiye" kwaye "ngileyo" kuzo zonke iifayile zethu zeesitayela ukuze sisebenzise izitayela ezibonakalayo njengoko kuyimfuneko xa sakha amakhasi ewebhu. Ezi zindlela zombini ziba zizinto ezintle, ezibuyiselwayo ezinokuphinda ziphendule nanini na xa sifuna ukwenza imifanekiso yezitayela ngokubhaliweyo kwimiyalezo.

Ukusebenzisa i-HTML Esikhundleni seCSS (kwaye Kutheni ufuna & # 39;

Nangona kunokwenzeka ukwenza umxholo wombhalo nge-HTML, imilinganiselo yewebhu ibonisa ukuba i-CSS (kunye namanyathelo anikwe ngentla) yindlela yokuya ukuze sikwazi ukugcina ukwahlukana kwesakhiwo (HTML) kunye nesitayela (CSS). Oku kubaluleke ngakumbi xa ucinga ukuba, kwezinye iifayile kunye neendlela, okokubhaliweyo akudingeki ukuba ujikeleze malunga nomfanekiso. Izikrini ezincinci, isakhiwo sewebhusayithi esabelayo singadinga ukuba umbhalo ubhalise phantsi komfanekiso kwaye umfanekiso ulula ububanzi besikrini. Oku kwenziwa ngokulula ngemibuzo yeendaba ukuba iifayile zakho zihlukileyo kwi-HTML markup. Kwimhlaba yee-multi-device, apho iifoto kunye nesicatshulwa ziza kubonakala ngokuhlukileyo kwiindwendwe ezahlukeneyo nakwizikrini ezihlukeneyo, oku kwahlukana kubalulekile ekuphumeleleni kwexesha elide kunye nokuphathwa kwephepha lewebhu.