Paghimo og makapaikag nga pagtan-aw nga mga linya sa mga pahina sa web nga adunay mga tag sa HR
Kon kinahanglan nimo nga idugang ang pinahigda, estilo sa separator nga mga linya sa imong mga website, adunay pipila ka mga kapilian. Mahimo nimong idugang ang aktwal nga mga file sa mga hulagway sa maong mga linya ngadto sa imong panid, apan kana nagkinahanglan sa imong browser sa pagkuha ug pag-load sa mga file, nga adunay negatibong epekto sa performance sa site.
Mahimo nimo gamiton ang property sa CSS nga utlanan aron makadugang sa mga utlanan nga nagsilbing mga linya sa ibabaw o sa ubos sa usa ka elemento, nga epektibo nga nagmugna sa imong linya sa separator.
Sa katapusan, mahimo nimong gamiton ang elemento sa HTML alang sa pinahigda nga lagda - ang
Ang Horizontal Rule Element
Kon nakabutang ka ug usa ka elemento sa usa ka web page, lagmit imong nadiskobrehan nga ang default nga paagi nga kini nga mga linya gipakita dili maayo. Kini nagpasabot nga kinahanglan ka mag turn sa CSS aron ma-adjust ang biswal nga dagway sa mga elemento nga nahisubay sa kung unsa ang gusto nimo makita sa imong site.
Ang usa ka batakang HR tag gipakita sa paagi nga gusto sa browser nga ipakita kini. Ang mga modernong mga browser kasagarang nagpakita sa mga tag-as nga mga tag-tag sa HR nga may gilapdon nga 100%, taas nga 2px, ug usa ka 3D nga utlanan nga itom aron makahimo sa linya.
Ania ang usa ka pananglitan sa usa ka standard nga elemento sa HR o imong makita sa niini nga larawan kung giunsa nga ang usa ka wala-mapalong nga HR nangita sa modernong mga browser.
Ang gilapdon ug ang gitas-on mao ang makanunayon nga mga browser
Ang bugtong mga estilo nga makanunayon sa mga web browser mao ang gilapdon ug estilo. Kini nagpaila kung unsa ka dako ang linya. Kung wala nimo ipasabot ang gilapdon ug gitas-on ang default width mao ang 100% ug ang default nga gitas-on mao ang 2px.
Sa kini nga pananglitan ang gilapdon mao ang 50% sa ginikanan nga elemento (matikdi kini nga mga pananglitan sa ubos tanan naglakip sa inline nga estilo. Sa usa ka pamaagi sa produksiyon, kini nga mga estilo gisulat sa usa ka estilo sa gawas nga estilo alang sa kasayon sa pagdumala sa tanan nga mga panid):
style = "width: 50%;">
Ug niining pananglitan ang gitas-on mao ang 2em:
style = "height: 2em;">
Ang Pag-usab sa mga utlanan mahimong Mahagiton
Sa modernong mga browser, ang browser nagtukod sa linya pinaagi sa pag-adjust sa utlanan. Busa kon imong kuhaon ang utlanan sa estilo nga propiedad, ang linya mawala sa panid. Sama sa imong makita (pag-ayo, dili nimo makita ang bisan unsang butang, ingon nga dili makita ang mga linya) niining pananglitan:
estilo = "border: wala;">
Ang pag-adjust sa gidak-on, kolor, ug estilo sa utlanan maghimo sa linya nga magkalahi nga tan-awon ug pareho ang epekto sa tanang modernong mga browser. Pananglitan, niini nga demonstrasyon ang utlanan pula, dashed, ug 1px ang gilapdon:
style = "border: 1px dashed # 000;">
Apan kon imong usbon ang utlanan ug ang gitas-on, ang mga estilo adunay gamay nga kalainan sa mga daan nga mga browser kaysa sa mga modernong browser. Sama sa imong makita sa niini nga panig-ingnan, kon imong tan-awon kini sa IE7 ug sa ubos (usa ka browser nga maliputon nga us aka daan ug dili na suportado sa Microsoft) adunay usa ka lusong sulod nga linya nga wala ipakita sa ubang mga browser (lakip ang IE8 ug sa itaas) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Kadtong mga antiqued browsers dili gayud usa ka kabalaka sa disenyo sa web karon, tungod kay kini kadaghanan gipulihan sa mas modernong mga kapilian.
Paghimo sa usa ka Line nga Pangdekorasyon nga may usa ka Larawan sa Background
Imbis sa usa ka kolor, mahimo nimong ipasabot ang usa ka hulagway sa background alang sa imong HR aron kini makita sa eksakto nga gusto nimo, apan nagpakita pa sa imong markup.
Sa niini nga panig-ingnan gigamit namo ang usa ka imahen nga adunay tulo ka kulba nga linya. Pinaagi sa paghimo niini ingon nga ang hulagway sa panid nga wala'y gisubli, kini naghimo sa usa ka pahulay sa sulod nga morag sama sa imong makita sa mga libro:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
Pagbalhin sa mga Elemento sa HR
Uban sa CSS3, makahimo ka usab sa paghimo sa imong mga linya nga mas makapaikag. Ang HR nga elemento sa tradisyonal nga usa ka pinahigda nga linya, apan sa CSS nga pagbag-o sa kabtangan, mahimo nimo mausab ang hitsura niini. Usa ka paborito nga pagbag-o sa elemento sa HR mao ang pag-usab sa rotation.
Mahimo nimo nga pag-rotate ang imong elemento sa HR aron kini gamay nga diagonal:
hr {
-moz-pagbag-o: rotate (10deg);
-webkit-transform: rotate (10deg);
-o-usab: rotate (10deg);
-mga pagbag-o: i-rotate (10deg);
pagbag-o: i-rotate (10deg);
}
O mahimo nimo kini pag-rotate aron kini hingpit nga nagbarug:
hr {
-moz-pagbag-o: pag-rotate (90deg);
-webkit-pagbag-o: rotate (90deg);
-o-usab-usab: rotate (90deg);
-mga pagbag-o: i-rotate (90deg);
pagbag-o: i-rotate (90deg);
}
Hinumdomi nga kini nagtuyok sa HR nga gibase sa kasamtangan nga nahimutangan sa dokumento, aron mahimo nimo nga usbon ang posisyon aron makuha kini kung asa nimo gusto. Dili kini girekomendar nga gamiton kini aron makadugang sa mga linya sa vertikal sa usa ka disenyo, apan kini usa ka paagi sa pagkuha og makapaikag nga epekto.
Laing Paagi nga Makuha ang mga Linya sa Imong Mga Panid
Ang usa ka butang nga gibuhat sa pipila ka mga tawo sa baylo nga gamiton ang elemento sa HR mao ang pagsalig sa mga utlanan sa ubang mga elemento. Apan usahay ang usa ka HR mas sayon ug sayon gamiton kay sa pagsulay sa pagtukod og mga utlanan. Ang mga modelo sa kahon nga mga isyu sa pipila ka mga browsers mahimo nga makahimo sa pag-ugmad sa usa ka utlanan nga labi pa nga malisud.