Paggawa ng mga kagiliw-giliw na naghahanap ng mga linya sa mga web page na may HR tag
Kung kailangan mong magdagdag ng mga pahalang, estilo ng separator na linya sa iyong mga website, mayroon kang ilang mga pagpipilian. Maaari kang magdagdag ng mga aktwal na mga file ng larawan ng mga linyang iyon sa iyong pahina, ngunit kinakailangan nito ang iyong browser na kunin at i-load ang mga file na iyon, na maaaring magkaroon ng negatibong epekto sa pagganap ng site.
Maaari mong gamitin ang ari-arian ng hangganan ng CSS upang magdagdag ng mga hangganan na kumilos bilang mga linya alinman sa tuktok o sa ilalim ng isang elemento, na epektibo ang paglikha ng iyong linya ng separator.
Sa wakas, maaari mong gamitin ang elemento ng HTML para sa pahalang na tuntunin - ang
Ang Horizontal Rule Element
Kung sakaling maglagay ka ng isang elemento sa isang web page, malamang na natuklasan mo na ang default na paraan na ipinapakita ang mga linyang ito ay hindi perpekto. Nangangahulugan ito na kailangan mong lumipat sa CSS upang ayusin ang visual na hitsura ng mga elementong ito upang maging angkop sa kung paano mo gustong tingnan ang iyong site.
Ang isang pangunahing HR tag ay ipinapakita sa paraan ng browser na gustong ipakita ito. Ang mga modernong mga browser ay karaniwang nagpapakita ng mga tag na walang naka-tag na HR na may lapad na 100%, taas ng 2px, at isang hangganan ng 3D na itim upang lumikha ng linya.
Narito ang isang halimbawa ng isang karaniwang elemento ng HR o maaari mong makita sa larawang ito kung paano ang isang unstyled HR ay tumitingin sa mga modernong browser.
Ang Lapad at Taas ay Pare-pareho sa Mga Browser
Ang tanging mga istilo na naaayon sa mga web browser ay ang lapad at estilo. Ang mga ito ay tumutukoy kung gaano kalaki ang linya. Kung hindi mo tukuyin ang lapad at taas ang default na lapad ay 100% at ang default na taas ay 2px.
Sa halimbawang ito ang lapad ay 50% ng elemento ng magulang (tandaan ang mga halimbawang ito sa ibaba ay naglalaman ng lahat ng mga inline na estilo.) Sa isang setting ng produksyon, ang mga estilo na ito ay talagang isusulat sa isang panlabas na style sheet para sa madaling pamamahala sa lahat ng iyong mga pahina):
style = "width: 50%;">
At sa halimbawang ito ang taas ay 2em:
style = "height: 2em;">
Ang Pagbabago ng mga Hangganan ay Maaaring Mapanghamong
Sa mga modernong browser, binubuo ng browser ang linya sa pamamagitan ng pagsasaayos ng hangganan. Kaya kung alisin mo ang hangganan sa estilo ng ari-arian, ang linya ay mawawala sa pahina. Tulad ng makikita mo (mabuti, hindi mo makikita ang anumang bagay, dahil ang mga linya ay hindi nakikita) sa halimbawang ito:
style = "border: none;">
Ang pagsasaayos ng laki, kulay, at estilo ng hangganan ay magiging iba't iba ang hitsura at may parehong epekto sa lahat ng mga modernong browser. Halimbawa, sa pagtatanghal na ito ay pula ang border, dashed, at 1px wide:
style = "border: 1px dashed # 000;">
Ngunit kung binago mo ang hangganan at ang taas, ang mga estilo ay medyo naiiba sa mga napakahabang browser kaysa sa mga modernong browser. Tulad ng makikita mo sa halimbawang ito, kung tiningnan mo ito sa IE7 at sa ibaba (isang browser na kung saan ay wag na lipas na sa panahon at hindi na suportado ng Microsoft) may isang beveled na panloob na linya na hindi ipinapakita sa iba pang mga browser (kabilang ang IE8 at up) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Ang mga antiqued browser ay talagang hindi gaanong isang pag-aalala sa web disenyo ngayon, dahil ang mga ito ay higit sa lahat pinalitan ng mas modernong mga pagpipilian.
Gumawa ng isang pandekorasyon na Linya na may Larawan sa Likod
Sa halip ng isang kulay, maaari mong tukuyin ang isang larawan sa background para sa iyong HR upang mukhang eksaktong gusto mo nito, ngunit nagpapakita pa rin sa semantically sa iyong markup.
Sa halimbawang ito ginamit namin ang isang imahe na may tatlong kulot na linya. Sa pamamagitan ng pag-set ito bilang larawan sa background na walang pag-uulit, lumilikha ito ng pahinga sa nilalaman na mukhang halos tulad ng nakikita mo sa mga aklat:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
Pagbabago ng Mga Elemento ng SD
Sa CSS3, maaari mo ring gawing kawili-wili ang iyong mga linya. Ang elemento ng HR ay ayon sa tradisyonal na pahalang na linya, ngunit sa CSS transform property, maaari mong baguhin ang hitsura nila. Ang isang paboritong pagbabago sa elemento ng HR ay upang baguhin ang pag-ikot.
Maaari mong paikutin ang iyong elemento ng HR upang ito ay bahagyang bahagyang dayagonal:
hr {
-moz-transform: paikutin (10deg);
-webkit-transform: paikutin (10deg);
-o-transform: paikutin (10deg);
-mag-transform: paikutin (10deg);
ibahin ang anyo: paikutin (10deg);
}
O maaari mong i-rotate ito upang ganap itong patayo:
hr {
-moz-transform: paikutin (90deg);
-webkit-transform: paikutin (90deg);
-o-transform: paikutin (90deg);
-mag-transform: paikutin (90deg);
ibahin ang anyo: paikutin (90deg);
}
Tandaan na ito ay umiikot ang HR batay sa kasalukuyang lokasyon nito sa dokumento, kaya maaaring kailangan mong ayusin ang pagpoposisyon upang makuha ito kung saan mo nais ito. Hindi inirerekumenda na gamitin ito upang magdagdag ng mga vertical na linya sa isang disenyo, ngunit ito ay isang paraan upang makakuha ng isang kagiliw-giliw na epekto.
Isa pang Way Upang Kumuha ng Mga Linya sa Iyong Mga Pahina
Ang isang bagay na ginagawa ng ilang tao sa halip na gamitin ang elemento ng HR ay umasa sa mga hangganan ng iba pang mga elemento. Ngunit kung minsan ang isang HR ay mas maginhawa at mas madaling gamitin kaysa sa pagsisikap na mag-set up ng mga hangganan. Ang mga isyu sa modelo ng kahon ng ilang mga browser ay maaaring gumawa ng pag-set up ng isang hangganan kahit trickier.