Gerðu áhugaverðar línur á vefsíðum með HR tags
Ef þú þarft að bæta við láréttum, aðskildum línum við vefsíðurnar þínar, þá hefur þú nokkra möguleika. Þú gætir bætt raunverulegum myndum af þessum línum við síðuna þína, en það myndi krefjast þess að vafrinn þinn henti og hlaðið þeim skrám, sem gæti haft neikvæð áhrif á árangur vefsvæðisins.
Þú getur notað CSS landamærin eign til að bæta við landamæri sem virka sem línur annaðhvort efst eða neðst á frumefni, skapa skilvirkan línu.
Að lokum er hægt að nota HTML frumefni fyrir lárétta reglan - the
The Lárétt Regla Element
Ef þú hefur einhvern tíma sett frumefni á vefsíðu, uppgötvaði þú líklega að vanræksla leiðin sem þessi lína birtist eru ekki tilvalin. Þetta þýðir að þú þarft að snúa sér til CSS til að stilla sjónræna útliti þessara þátta til að vera í samræmi við hvernig þú vilt að vefsvæðið þitt sé að leita.
Einfaldur HR-merki er sýndur eins og vafrinn vill birta hana. Nútíma vafrar sýna yfirleitt óstilla HR merkingar með 100% breidd, 2px hæð og 3D landamerki í svörtu til að búa til línuna.
Hér er dæmi um venjulegt HR-frumefni eða þú sérð á þessari mynd hvernig unstyled HR lítur út í nútíma vafra.
Breidd og hæð eru í samræmi við vafra
Eina stílin sem eru í samræmi við vafra er breidd og stíl. Þetta skilgreinir hversu stór línan verður. Ef þú skilgreinir ekki breidd og hæð er sjálfgefið breidd 100% og sjálfgefið hæð er 2px.
Í þessu dæmi er breiddin 50% af foreldrihlutanum (athugaðu þetta dæmi fyrir neðan öll innihalda innsláttarstíll. Í framleiðslustillingum myndu þessi stíll í raun vera skrifuð í ytri stílblaði til að auðvelda stjórnun á öllum síðum þínum):
style = "width: 50%;">
Og í þessu dæmi er hæðin 2em:
style = "height: 2em;">
Breyting á landamærunum getur verið áskorun
Í nútíma vafra byggir vafrinn línuna með því að breyta landamærunum. Þannig að ef þú fjarlægir landamærin með stíll eigninni, línan mun hverfa á síðunni. Eins og þú sérð (vel, þú munt ekki sjá neitt, þar sem línurnar verða ósýnilegar) í þessu dæmi:
style = "border: none;">
Aðlaga landamæri, lit og stíl gerir línuna öðruvísi og hefur sömu áhrif á alla nútíma vafra. Til dæmis, í þessari sýningu er landamærin rauð, þjóta og 1px breiður:
style = "border: 1px dashed # 000;">
En ef þú breytir landamærunum og hæðinni, líta þær út svolítið öðruvísi í mjög gamaldags vafra en þeir gera í nútíma vafra. Eins og þú sérð í þessu dæmi, ef þú skoðar það í IE7 og hér að neðan (vafri sem er woefully gamaldags og ekki lengur studd af Microsoft) er skurður innri lína sem birtist ekki í öðrum vafra (þ.mt IE8 og upp) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Þeir antíkir vafrar eru í raun ekki mikið áhyggjuefni í vefhönnun í dag, þar sem þau hafa að mestu verið skipt út fyrir nútímamöguleika.
Búðu til skreytt lína með bakgrunnsmynd
Í stað litar geturðu skilgreint bakgrunnsmynd fyrir HR þinn þannig að það lítur nákvæmlega út eins og þú vilt, en birtist enn sem komið er í merkingu þinni.
Í þessu dæmi notuðum við mynd sem er af þremur bylgjulínum. Með því að setja það sem bakgrunnsmynd án endurtekningar skapar það brot í efninu sem lítur næstum eins og þú sérð í bókum:
style = "hæð: 20px; bakgrunnur: #fff url (aa010307.gif) ekki endurtaka skrunamiðstöð; landamæri: enginn;">
Umbreyta HR Elements
Með CSS3 geturðu einnig gert línur þínar áhugaverðar. HR þátturinn er jafnan láréttur lína, en með CSS umbreytingareigninni geturðu breytt því hvernig þær líta út. Uppáhalds umbreyting á HR þátturinn er að breyta snúningi.
Þú getur snúið HR einingunni þinni þannig að það er aðeins örlítið skáhallt:
hr {
-moz-transform: snúið (10deg);
-webkit-transform: snúa (10deg);
-ó-umbreyta: snúið (10deg);
-ms-umbreyta: snúa (10deg);
umbreyta: snúa (10deg);
}
Eða þú getur snúið því þannig að það sé alveg lóðrétt:
hr {
-moz-transform: snúið (90deg);
-webkit-transform: snúa (90deg);
-ó-umbreyta: snúið (90deg);
-ms-umbreyta: snúa (90deg);
umbreyta: snúa (90deg);
}
Mundu að þetta snýst HR á grundvelli núverandi staðsetningu hennar í skjalinu, svo þú gætir þurft að stilla staðsetningu til að fá það þar sem þú vilt það. Ekki er mælt með því að nota þetta til að bæta lóðréttum línum við hönnun, en það er leið til að fá áhugaverð áhrif.
Önnur leið til að fá línur á síðum þínum
Eitt sem sumir gera í stað þess að nota HR þáttinn er að treysta á landamæri annarra þátta. En stundum er HR mjög þægilegra og auðveldara að nota en að reyna að setja upp landamæri. The kassi líkan málefni sumra vafra getur gert að setja upp landamæri jafnvel trickier.