Ukuthabatha i-HR (iTree Rule)

Ukwenza imigqaliselo ekhangelekayo kumaphepha ewebhu ngamathegi akwa-HR

Ukuba udinga ukongeza imida engumgca, izitayela zokuhlukanisa kwiwebhusayithi yakho, unokhetho oluthile. Unokongeza iifayile zeefayile zangempela zale migca kwiphepha lakho, kodwa oko kuya kufuna ukuba isiphequluli sakho sifumane kwaye silayishe ezo fayile, ezinokuthi zibe nefuthe elibi kumsebenzi wesiza.

Ungasebenzisa ipropati yomda we- CSS ukufaka imida eqhuba njengemigca ephezulu okanye phantsi kwelungu, ukudala ngokufanelekileyo umgca wecala.

Ekugqibeleni, ungasebenzisa isici se- HTML somgaqo ojikelezayo-the

I-Element Rule Element

Ukuba uye wakha i-element kwiphepha lewebhu, mhlawumbi ufumene ukuba indlela engagqibekanga yokuba le migca iboniswa ayilungile. Oku kuthetha ukuba kufuneka uphendukele kwiCSS ukuze ulungele ukubonakala kwezinto ezibonakalayo ukuba zihambelane nendlela ofuna ukuba indawo yakho ibonakale ngayo.

Isalathisi esisisiseko se-HR siboniswa ngendlela i-browser ifaka ukuyibonisa ngayo. Iiphequluli zanamhlanje zibonakalisa iimpawu ze-HR ezingahlaziyiweyo ngobubanzi be-100%, ukuphakama kwe-2px, kunye nomda we-3D kumnyama ukudala umgca.

Nantsi umzekelo we-HR standard okanye ungabona kulo mfanekiso indlela i-HR engaxakekanga ibukeka ngayo kwiiphequluli zanamhlanje.

Ububanzi kunye nobukhulu bunxulumene nabaPhezulu

Izitayela kuphela ezihambelana neziphequluli zewebhu zibubanzi kunye nezitayela. Ezi zichaza indlela inkulu ngayo umgca. Ukuba awuyi kuchazi ububanzi kunye nokuphakama ububanzi obungagqibekanga bubungama-100% kwaye ukuphakama okungaqhelekanga ngu-2px.

Kulo mzekelo ububanzi buyi-50% yelungu lomzali (phawula le mizekelo ingezantsi zonke zibandakanya izitayela ezinqamlekileyo.) Kwimimiselo yokuvelisa, ezi zindlela ziza kubhalwa kwiphepha langaphandle lomsebenzi ukulungiswa kolawulo kuwo onke amaphepha akho):

isita = = "ububanzi: 50%;">

Kwaye kulo mzekelo ukuphakama ngu-2em:

isita = = "ukuphakama: 2em;">

Ukutshintshwa kweMingcele ingaba nzima

Kwiiphequluli zanamhlanje, umkhangeli-mgca wenza umgca ngokulungisa umda. Ngoko ukuba ususa umda kunye nesakhiwo sakhiwo, umgca uya kulahla kwiphepha. Njengoko unako ukubona (ngokuqinisekileyo, awuyi kubona nantoni na, njengoko imigca ingabonakali) kulo mzekelo:

isita = = "umda: akukho;">

Ukulungiswa kobukhulu bomda, umbala, kunye nesitayela kuya kwenza ukuba umgca ukhangeleke kwaye unempembelelo efanayo kuzo zonke iziphequluli zanamhlanje. Ngokomzekelo, kulo mboniso umda ubomvu, udibene kunye no-1px ububanzi:

isita = = "umda: 1px idibene # 000;">

Kodwa ukuba utshintshe umda kunye nokuphakama, izitayela zibukeka zihluke kakhulu kwiiphequluli ezidlulileyo kakhulu kunokuba zikwenza kwiiphequluli zanamhlanje. Njengoko ungayibona kulo mzekelo, ukuba uyayijonga kwi-IE7 nangaphantsi (isiphequluli esiphelelwe yisikhathi kwaye asisayixhaswa yi-Microsoft) kukho umgca ongaphakathi ongabonakali kwezinye iiphequluli (kuquka i-IE8 kunye naphezulu) : I

isita = = "ukuphakama: 1.5em; ububanzi: 25m; umda: 1px onamandla # 000;">

Ezi ziphequluli ezidlulileyo azikho nkxalabo ekwakhiweni kwewebhu namhlanje, ekubeni ziye zatshintshwa ngokutsha kunye neendlela ezininzi zanamhlanje.

Yenza umgca wokuHlabisa ngeMifanekiso yangasemva

Esikhundleni sombala, ungachaza umfanekiso wesigcawu se-HR yakho ukwenzela ukuba ibonakale ngokuqinisekileyo njengoko uyifunayo, kodwa iyakubonakalisa isistim kwi-markup yakho.

Kulo mzekelo sasebenzise umfanekiso onemigca emithathu ye wavy. Ngokuyibeka njengemifanekiso engemuva ngaphandle kokuphinda, yenza ikhefu kumxholo okhangele ngathi ufuna ukubona kwiincwadi:

isita = = "ukuphakama: 20px; imvelaphi: #fff url (aa010307.gif) akukhophinda isikhokelo somqulu; umda: akukho;">

Ukuguqulwa kweeH Ele Elements

Nge CSS3, unokwenza imigca yakho ibe yinto enomdla. I-element yesi-HR ngokuqhelekileyo ngumgca ongqambileyo , kodwa ngeCSS ukuguqula impahla, ungatshintsha indlela abajonga ngayo. Utshintsho oluthandayo kwi-HR element liza kutshintsha ukujikeleza.

Unako ukujikeleza iqela lakho leHR ukwenzela ukuba lilungelelanise nje kuphela:

hr {
-moz-guqula: jikela (10deg);
-webkit-guqula: jikela (10deg);
-o-guqula: jikela (10deg);
-ms-guqula: jikela (10deg);
guqula: jikela (10deg);
}

Okanye unako ukujikeleza ukuze kuqiniseke ngokucacileyo:

hr {
-moz-guqula: jikela (90deg);
-webkit-guqula: jikela (90deg);
-o-guqula: jikela (90deg);
-ms-transform: ujikeleze (90deg);
guqula: jikela (90deg);
}

Khumbula ukuba oku kujikeleza i-HR ngokusekelwe kwindawo yayo yangoku kwidokhumenti, ngoko unokufuna ukulungelelanisa ukubeka kwindawo apho ufuna khona. Ayincomo ukusebenzisa le nto ukwengeza imigca yokujonga kwi-design, kodwa yindlela yokufumana umphumo onomdla.

Enye indlela yokufumana iMida kumaphepha akho

Enye into eyenziwa ngabanye abantu endaweni yokusebenzisa i-HR element kukuthembela kwimida yezinye izinto. Kodwa ngamanye amaxesha i-HR yinto elula kakhulu kwaye kulula ukuyisebenzisa kunokuzama ukumisa imida. Imibuzo yebhokisi yemifanekiso yezinye iiphequluli inokwenza umda umda.