ungathanda ukwazi ukuba njani embindini womfanekiso kwi-DIV? Ukumisa umfanekiso kwi-DIV kunokuba luncedo ukuphucula inkangeleko kunye nombutho wephepha lakho lewebhu, kunye nokuqaqambisa umfanekiso ofuna ukuwubonisa. Embindini womfanekiso kwi-DIV akukho nzima, kodwa kuxhomekeke kwizinto ezininzi, ezinjengodidi lomfanekiso, ubungakanani be DIV, isimbo se DIV, njl.
Kweli nqaku siza kuchaza uwumisa njani umfanekiso kwi-DIV usebenzisa iHTML kunye neCSS, eziilwimi zokucwangcisa ezisetyenziselwa ukuyila kunye nokuyila amaphepha ewebhu. Siza kukubonisa iindlela ezininzi kunye nemizekelo ukuze ukhethe eyona ikufaneleyo.
Yintoni i-DIV
I-div sisiqalelo se-HTML esisetyenziselwa yenza amacandelo okanye izikhongozeli kwiphepha lewebhu. Oku kunokuqulatha ezinye izinto, ezifana nokubhaliweyo, imifanekiso, amakhonkco, njl. Kwakhona oku sisiqalelo sebhloko, nto leyo ethetha ukuba ithatha bonke ububanzi bephepha kunye noko unokuchaza ubude bayo nobubanzi bayo. I-div yinto eqhelekileyo, nto leyo ethetha ukuba ayinayo intsingiselo yentsingiselo ethile. Ngesi sizathu, iqhele ukusetyenziswa kunye neklasi okanye iimpawu ze-id, ukunika i-div igama okanye udidi. Ikwasetyenziswa rhoqo kunye uphawu loyelelwano lwesitayile okanye ngeCSS isimbo samaphepha, ukunika inkangeleko okanye uyilo kwi div.
I-div isetyenziselwa ukucwangcisa kunye nokucwangcisa umxholo wephepha lewebhu, kunye nokusebenzisa iimpawu zesimbo kulo. Nge-div unokwenza ibhokisi equlathe ezinye izinto, kwaye inokulungelelaniswa, iphakathi, inemibala, ifakwe umbala, njl. Ifomathi inokusetyenziselwa uku yenza iikholamu okanye imiqolo, ukusasaza umxholo ngendlela elungeleleneyo neguquguqukayo. Ngokubanzi ingasetyenziselwa ukudala iziphumo ezibonakalayo okanye ezisebenzayo, ezifana ne-animations, iinguqu, iinguqu, njl.
Umisa njani umfanekiso ngokuthe tye
Embindini womfanekiso ngokuthe tye kwi-DIV kuthetha ukulungelelanisa umfanekiso embindini Ububanzi be-DIV. Zininzi iindlela zokwenza oku, kodwa ezona zixhaphakileyo zezi zilandelayo:
- Sebenzisa ulungelelwaniso lokubhaliweyo: indawo esembindini. Le mpahla isetyenziswa kwisiqalelo se-DIV kwaye ibangela ukuba zonke iziqalelo ezingaphakathi kwe-DIV zilungelelanise embindini ngokuthe tye. Umzekelo:
- Sebenzisa umda: ipropathi ezenzekelayo. Le propati isetyenziswe kwi-IMG element kwaye ibangela ukuba umfanekiso ube nemida efanayo ekhohlo nasekunene, igxininise ngokuthe tye. Ukuze oku kusebenze, umfanekiso kufuneka ube nobubanzi obuchaziweyo kwaye ube luhlobo lwebhloko okanye ube nomboniso wepropathi: ibhloko. Umzekelo:
- Sebenzisa ipropathi yokuguqula: translateX(). Le propati isetyenziswe kwi-IMG element kwaye ibangela ukuba umfanekiso uhambe ngokuthe tye umgama othile ukusuka kwindawo yawo yokuqala. Ukuyibeka embindini ngokuthe tye, kufuneka uyisuse nge-50% yobubanzi bayo ukuya ekunene. Ukuze oku kusebenze, umfanekiso kufuneka ube nobubanzi obuchaziweyo kwaye ube luhlobo lwebhloko okanye ube nomboniso wepropathi: ibhloko. Umzekelo:
Umisa njani umfanekiso ngokuthe nkqo
Embindini womfanekiso ngokuthe nkqo kwi-DIV ithetha ukulungelelanisa umfanekiso embindini womphakamo we-DIV. Zininzi iindlela zokwenza oku, kodwa ezona zixhaphakileyo zezi zilandelayo:
- Ukusebenzisa ipropati ethe nkqo-ulungelelaniso: phakathi. Le propati isetyenziswe kwi-IMG element kwaye ibangela ukuba umfanekiso ulungelelaniswe embindini ngokuthe nkqo ngokumalunga nesiseko sombhalo. Ukuze oku kusebenze, isiqalelo se-DIV kufuneka sibe nomphakamo ochaziweyo kwaye isiqalelo se-IMG kufuneka sibe sohlobo olusemgqeni okanye sibe nomboniso: ipropathi engaphakathi. Umzekelo:
- Ukusebenzisa ipropati yomda-phezulu kunye nomda-phantsi. Ezi zakhiwo zisetyenziselwa i-IMG element kwaye zibangela ukuba umfanekiso ube nemida ephezulu kunye nezantsi, ubeka iziko ngokuthe nkqo. Ukusebenza, isiqalelo se-DIV kufuneka sibe nomphakamo ochaziweyo kwaye isiqalelo se-IMG kufuneka sibe nobude obuchaziweyo kwaye sibe luhlobo lwebhloko okanye sibe nomboniso: ipropathi yebhloko. Umzekelo:
- Sebenzisa ipropathi yokuguqula: translateY(). Ngeli xesha isetyenziswe kwi-IMG element kwaye ibangela ukuba umfanekiso uhambe ngokuthe nkqo umgama othile ukusuka kwindawo yawo yokuqala. Ukuyibeka embindini ngokuthe nkqo, kufuneka uyisuse nge-50% yobude bayo ezantsi. Ukusebenza, isiqalelo se-DIV kufuneka sibe nomphakamo ochaziweyo kwaye isiqalelo se-IMG kufuneka sibe nobude obuchaziweyo kwaye sibe luhlobo lwebhloko okanye sibe nomboniso: ipropathi yebhloko. Umzekelo:
Uwenza njani umfanekiso kuzo zombini izembe
Ukumisa umfanekiso kuzo zombini izembe kwi-DIV kuthetha lungelelanisa umfanekiso embindini wazo zombini ububanzi kunye nobude ye DIV, le yeyona intsonkothileyo. Zininzi iindlela zokwenza oku, kodwa ezona zixhaphakileyo zezi zilandelayo:
- Ukusebenzisa ulungelelwaniso lombhalo: indawo esembindini kunye nolungelelwaniso oluthe nkqo: ipropathi ephakathi. Ezi mpawu zisebenza kwisiqalelo se-DIV kunye nesiqalelo se-IMG ngokulandelelanayo, kwaye zibangela ukuba umfanekiso ulungelelanise esembindini zombini ngokuthe tye nangokuthe nkqo. Ukuze oku kusebenze, isiqalelo se-DIV kufuneka sibe nomphakamo ochaziweyo kwaye isiqalelo se-IMG kufuneka sibe sohlobo olusemgqeni okanye sibe nomboniso: ipropathi engaphakathi. Umzekelo:
- Sebenzisa umda: ipropathi ezenzekelayo. Apha isetyenziswe kwi-IMG element kwaye ibangela ukuba umfanekiso ube nemida elinganayo kuwo onke macala omane, ugxile kuwo omabini ama-axes. Ukusebenza, isiqalelo se-DIV kufuneka sibe nobude obuchaziweyo kwaye isiqalelo se-IMG kufuneka sibe nobubanzi obuchaziweyo kunye nobude kwaye sibe luhlobo lwebhloko okanye lube nomboniso: ipropathi yebhloko. Umzekelo:
- Sebenzisa uguqulo: translate() impahla. Kule meko isetyenziswe kwi-IMG element kwaye ibangela ukuba umfanekiso uhambe umgama othile ukusuka kwindawo yawo yokuqala kuzo zombini izembe. Ukuyibeka embindini, kufuneka uyisuse nge-50% yobubanzi bayo ukuya ngasekunene kunye ne-50% yobude bayo phantsi. Ukusebenza, isiqalelo se-DIV kufuneka sibe nobude obuchaziweyo kwaye isiqalelo se-IMG kufuneka sibe nobubanzi obuchaziweyo kunye nobude kwaye sibe luhlobo lwebhloko okanye lube nomboniso: ipropathi yebhloko. Umzekelo:
Embindini nawuphi na umfanekiso
Ukumisa umfanekiso kwi-DIV kunokuba luncedo ukuphucula inkangeleko kunye nombutho wewebhusayithi yakho, kunye nokuqaqambisa umfanekiso ofuna ukuwubonisa. Ukumisa umfanekiso kwi-DIV akukho nzima, kodwa kuxhomekeke kwizinto ezininzi ezifana nodidi lomfanekiso, ubungakanani be-DIV, isimbo se-DIV, njl.
Kweli nqaku Sichazile ukuba ungamisa njani umfanekiso kwi-DIV usebenzisa iHTML kunye neCSS, eziilwimi zokucwangcisa ezisetyenziselwa ukuyila kunye nokuyila amaphepha ewebhu. Sikubonise iindlela ezahlukeneyo kunye nemizekelo onokuthi ukhethe kuyo. eyona ikufanelayo.
Siyathemba ukuba ulithandile eli nqaku kwaye ufunde indlela yokumisa umfanekiso kwi-DIV. Ukuba unayo nayiphi na imibuzo okanye iingcebiso, sishiye uluvo. Ungabelana neli nqaku nabahlobo bakho okanye usapho oluthandayo HTML okanye CSS. Masingene emsebenzini kwaye sicwangcise!