Ukuthayipha umshini we-HR (I-Horizontal Rule)

Ukwenza imigqa ekhangayo ebukeka kumakhasi ewebhu ngamathegi akwa-HR

Uma udinga ukungeza imigqa yokuhlukanisa, izitayela zokuhlukanisa kumawebhusayithi akho, unezinketho ezimbalwa. Ungangeza amafayela wesithombe wangempela walezo zindlela kukhasi lakho, kodwa lokho kungadinga isiphequluli sakho ukuba sithole futhi silayishe lawo mafayela, okungaba nomthelela omubi ekusebenzeni kwesayithi.

Ungasebenzisa impahla ye-border ye- CSS ukwengeza imingcele eyenza imigqa phezulu noma phansi kwesici, ngokudala ngempumelelo umugqa wakho wokuhlukanisa.

Ekugcineni, ungasebenzisa isici se- HTML somthetho oqondile - the

I-Element Rule Element

Uma ngabe uke wabeka isici kukhasi lewebhu, cishe uthole ukuthi indlela engafanele yale migqa iboniswa ayilungile. Lokhu kusho ukuthi udinga ukuphendukela ku-CSS ukuze ulungise ukubukeka okubonakalayo kwalezi zakhi ukuze kuhambisane nendlela ofuna isayithi lakho libukeke ngayo.

Ithegi eyisisekelo ye-HR iboniswa ngendlela isiphequluli esifuna ukuyiveza ngayo. Iziphequluli zanamuhla ngokuvamile zibonisa amathegi akwa-HR angenalutho ngobubanzi be-100%, ukuphakama kwe-2px, nomngcele we-3D omnyama ukudala umugqa.

Nasi isibonelo se-HR esezingeni elijwayelekile noma ungabona kulo mfanekiso ukuthi i-HR engahlambuluki ibheka kanjani kuziphequluli zanamuhla.

Ububanzi nokuphakama kukhona okuhambisanayo kuzo zonke iziphequluli

Izitayela kuphela ezihambisana neziphequluli zewebhu zibubanzi nezitayela. Lezi zichaza ukuthi luzoba lukhulu kangakanani. Uma ungachazi ububanzi nokuphakama ububanzi obuzenzakalelayo buyi-100% futhi ukuphakama okuzenzakalelayo kungu-2px.

Kulesi sibonelo ububanzi buyi-50% yesici somzali (phawula lezi zibonelo ngezansi konke kufaka izitayela ezifakiwe. Esilungiselelweni sokukhiqiza, lezi zitayela zizobhalwa ngempela kwishidi lesitayela langaphandle ukuze kube lula ukuphathwa kuwo wonke amakhasi akho):

isitayela = "ububanzi: 50%;">

Futhi kule sibonelo ubude buyi-2em:

isitayela = "ukuphakama: 2em;">

Ukushintsha Imingcele Kungaba Inselele

Ezipheqululini zanamuhla, isiphequluli sakha umugqa ngokulungisa umngcele. Ngakho uma ususa umngcele ngesakhiwo sesitayela, umugqa uzonyamalalala ekhasini. Njengoba ungabona (kahle, ngeke ubone noma yini, njengoba imigqa ingabonakali) kulesi sibonelo:

isitayela = "umngcele: akekho;">

Ukulungisa usayizi wamngcele, umbala, nesitayela kuzokwenza umugqa ubhekeke futhi unomphumela ofanayo kuwo wonke iziphequluli zanamuhla. Isibonelo, kulokhu kuboniswa umngcele ubomvu, udonswe, no-1px ububanzi:

isitayela = "umngcele: 1px udlule # 000;">

Kodwa uma ushintsha umngcele nokuphakama, izitayela zibukeka zihluke kakhulu kuziphequluli ezidlulelwe yisikhathi kuneziphequluli zanamuhla. Njengoba ungabona kulesi sibonelo, uma ubheka ku-IE7 nangaphansi (isiphequluli esiphelelwe yisikhathi futhi asisekelwa yi-Microsoft) kunomugqa ongaphakathi ongenawo ongabonisi kwezinye iziphequluli (kufaka i-IE8 naphezulu) :

isitayela = "ukuphakama: 1.5em; ububanzi: 25m; umngcele: 1px oqinile # 000;">

Lezi ziphequluli ezinamandulo azikona ukukhathazeka okukhulu kumklamo wewebhu namhlanje, ngoba ikakhulukazi zithathwe esikhundleni sezinketho zanamuhla.

Yenza Umdwebo Ohlobisa Ngomfanekiso Wemuva

Esikhundleni sombala, ungachaza isithombe sangemuva sakwa-HR yakho ukuze sibonakale ngendlela oyifunayo ngayo, kodwa sisabonisa ngesimo sakho semakethe.

Kulesi sibonelo sisebenzise isithombe esinezindlela ezintathu zama-wavy. Ngokusibeka njengesithombe sangemuva ngaphandle kokuphinda, kudala ikhefu kokuqukethwe okubukeka sengathi uthanda ezincwadini:

isitayela = "ukuphakama: 20px; isizinda: # urf url (aa010307.gif) awuphindaphindi isikhungo sokupheqa; umngcele: akukho;">

Ukuguqula ama-HR Elements

Nge-CSS3, ungenza futhi imigqa yakho ibe mnandi kakhulu. I-element element yakwa-HR isendlalelo engezansi , kepha nge-CSS guqula impahla, ungashintsha indlela ebukeka ngayo. Ukuguqulwa okuthandayo ku-HR element ukuguqula ukujikeleza.

Ungakwazi ukushintshanisa isici sakho se-HR ukuze nje sithinte kancane:

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

Noma ungawujikeleza ukuze uqonde ngokuphelele:

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

Khumbula ukuthi lokhu kujikeleza i-HR ngokusendaweni yayo yamanje kulo mbhalo, ngakho-ke kungadingeka ulungise ukuma ukuze uthole lapho uthanda khona. Akunconywa ukusebenzisa lokhu ukuze wengeze imigqa eqondile kumklamo, kodwa kuyindlela yokuthola umphumela omuhle.

Enye indlela yokuthola imithi emakhasini akho

Into eyodwa abanye abantu abakwenzayo kunokusebenzisa i-HR element ukuthembela emingceleni yezinye izakhi. Kodwa ngezinye izikhathi i-HR ilula kakhulu futhi kulula ukuyisebenzisa kunokuzama ukusetha imingcele. Izinkinga ze-model model zezinye iziphequluli zingenza ukusetha umngcele ngisho nobunzima.