Farante interesajn rigardajn liniojn sur retpaĝoj kun HR-etikedoj
Se vi bezonas aldoni horizontalajn apartigilojn al viaj retejoj, vi havas kelkajn eblojn. Vi povus aldoni realajn bildajn dosierojn de tiuj linioj al via paĝo, sed tio postulos vian retumilon por rekuperi kaj ŝarĝi tiujn dosierojn, kiuj povus havi negativan efikon en la agado de la retejo.
Vi povus uzi la landliman proprieton por aldoni limojn, kiuj funkcias kiel linioj aŭ ĉe la supro aŭ ĉe la fundo de elemento, efike kreante vian apartigilon.
Fine, vi povas uzi la HTML- elementon por la horizontala regulo - la
La Horizontala Regulo Elemento
Se vi iam metis elementon en retpaĝpaĝo, vi verŝajne malkovris, ke la defaŭlta maniero, kiun ĉi tiuj linioj montras, ne estas ideala. Ĉi tio signifas, ke vi devas turni al CSS por ĝustigi la vidan aspekton de ĉi tiuj elementoj por ke vi estu laŭ via aspekto de via retejo.
Baza HR-etikedo montriĝas kiel la retumilo volas montri ĝin. Moderna retumiloj tipe montras neordigitajn etikedojn HR kun larĝeco de 100%, alteco de 2px, kaj 3D limo en nigra por krei la linion.
Jen ekzemplo de norma HR-elemento aŭ vi povas vidi en ĉi tiu bildo kiel malstreĉita HR aspektas en modernaj retumiloj.
Larĝeco kaj Alteco estas Konsistentaj Tra Foliumiloj
La nuraj stiloj, kiuj estas konsekvencaj inter retumiloj, estas larĝaj kaj stiloj. Ĉi tiuj difinas kiom granda la linio estos. Se vi ne difinas la larĝecon kaj altecon, la defaŭlta larĝo estas 100% kaj la defaŭlta alteco estas 2px.
En ĉi tiu ekzemplo la larĝo estas 50% de la gepatra elemento (rimarku ĉi tiujn ekzemplojn sube ĉiuj inkluzivas inlinajn stilojn. En produktado, ĉi tiuj stiloj estus fakte skribitaj en ekstera stilo-folio por facile administrado laŭ ĉiuj viaj paĝoj):
stilo = "larĝa: 50%;">
Kaj en ĉi tiu ekzemplo la alteco estas 2em:
stilo = "alteco: 2em;">
Ŝanĝi la limojn povas esti defianta
En modernaj retumiloj, la retumilo konstruas la linion per ĝustigado de la limo. Do se vi forigas la limon per la stilo, tiam la linio malaperos sur la paĝo. Kiel vi povas vidi (nu, vi ne vidos ion, ĉar la linioj estos nevideblaj) en ĉi tiu ekzemplo:
stilo = "limo: neniu;">
Alĝustigante la landliman grandecon, koloron kaj stilon, la linio aspektos malsama kaj havas la saman efikon en ĉiuj modernaj foliumiloj. Ekzemple, en ĉi tiu pruvo la limo estas ruĝa, disigita kaj 1px larĝa:
stilo = "limo: 1px nuligis # 000;">
Sed se vi ŝanĝas la limon kaj la altecon, la stiloj aspektas iomete malsamaj en tre antikvaj retumiloj ol ili faras en modernaj foliumiloj. Kiel vi povas vidi en ĉi tiu ekzemplo, se vi vidos ĝin en IE7 kaj sube (navegador, kiu estas malĝoje antikva kaj ne plu subtenata de Microsoft) ekzistas interreta linio kiu ne montras en la aliaj retumiloj (inkluzive de IE8 kaj supren) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Tiuj antikvaj retumiloj vere ne multe interesas hodiaŭ en la dezajno retejo, ĉar ili estis plejparte anstataŭigitaj per pli modernaj ebloj.
Faru Ornama Linio kun Fona Bildo
Anstataŭ koloron, vi povas difini fonoran bildon por via HR por ke ĝi aspektas ĝuste kiel vi deziras ĝin, sed ankoraŭ montras semantike en via markado.
En ĉi tiu ekzemplo ni uzis bildon, kiu estas el tri ondulaj linioj. Fiksante ĝin kiel fonan bildon sen ripeto, ĝi kreas rompon en la enhavo, kiu aspektas preskaŭ kiel vi vidas en libroj:
stilo = "alteco: 20px; fono: #fff url (aa010307.gif) ne-ripetita rula centro; limo: neniu;">
Transformante HR Elementojn
Kun CSS3, vi ankaŭ povas fari viajn liniojn pli interesaj. La HR-elemento estas tradicie horizontala linio, sed kun la CSS-transformaĵa propraĵo, vi povas ŝanĝi kiel ili aspektas. Preferata transformo sur la HR-elemento estas ŝanĝi la rotacion.
Vi povas turni vian HR-elementon tiel ke ĝi estas nur iomete diagonala:
hr {
-moz-transformo: turnu (10deg);
-bendaĵo-transformo: turnu (10deg);
-o-transformi: turni (10deg);
-ms-transformi: turni (10deg);
transformi: turni (10deg);
}
Aŭ vi povas turni ĝin tiel ke ĝi estas tute vertikala:
hr {
-moz-transformo: turnu (90deg);
-bendaĵo-transformo: turnu (90deg);
-o-transformo: turnu (90deg);
-ms-transformi: turni (90deg);
transformi: turni (90deg);
}
Memoru, ke ĉi tio turnas la HR surbaze de ĝia nuna loko en la dokumento, do vi eble devas ĝustigi la lokon por akiri ĝin, kie vi volas ĝin. Ne rekomendas uzi ĉi tion por aldoni vertikalajn liniojn al dezajno, sed ĝi estas maniero akiri interesan efikon.
Alia Vojo Akiri Liniojn sur Viaj Paĝoj
Unu afero, kiun iuj homoj faras anstataŭ uzi la HR-elementon, dependas de limoj de aliaj elementoj. Sed kelkfoje HR estas multe pli konvena kaj pli facila por uzi ol provi starigi limojn. La skatolaj modeloj de iuj retumiloj povas krei limon eĉ pli malfacila.