Izdelava zanimivih vrstic na spletnih straneh z oznakami HR
Če želite na svoja spletna mesta dodati vodoravno linijo v ločilnem slogu, imate nekaj možnosti. Lahko bi dodali dejanske slikovne datoteke teh vrstic na svojo stran, vendar bi to zahtevalo, da brskalnik pridobi in naloži te datoteke, kar bi lahko negativno vplivalo na uspešnost spletnega mesta.
Lahko uporabite lastnost robov CSS, da dodate robove, ki delujejo kot vrstice bodisi na vrhu ali na dnu elementa, kar učinkovito ustvarja vašo ločilno črto.
Končno lahko uporabite element HTML za horizontalno pravilo -
Horizontalni pravilnik
Če ste kdaj postavili element na spletno stran, ste verjetno ugotovili, da privzeti način prikaza teh vrstic ni idealen. To pomeni, da se morate obrniti na CSS, da prilagodite vizualni videz teh elementov v skladu s tem, kako želite videti svojo spletno stran.
Osnovna HR-oznaka je prikazana na način, na katerega želi brskalnik prikazati. Sodobni brskalniki običajno prikažejo neustrezne HR-oznake s širino 100%, višino 2px in črko 3D v črni barvi, da ustvarijo linijo.
Tukaj je primer standardnega HR-elementa ali na tej sliki lahko vidite, kako neustrezen HR gleda v sodobnih brskalnikih.
Širina in višina sta v skladu z brskalniki
Edini slogi, ki so v vseh spletnih brskalnikih dosledni, so širina in slogi. Ti določajo, kako velika bo linija. Če ne določite širine in višine, je privzeta širina 100%, privzeta višina pa 2px.
V tem primeru je širina 50% nadrejenega elementa (upoštevajte, da spodnji primeri spodaj vključujejo inline sloge. V teh proizvodnih nastavitvah bi bili ti slogi dejansko napisani v zunanjem slognem listu, ki bodo lažje upravljali na vseh vaših straneh):
style = "širina: 50%;">
V tem primeru je višina 2em:
style = "višina: 2em;">
Spreminjanje meja je lahko izziv
V sodobnih brskalnikih brskalnik gradi linijo z nastavitvijo meje. Torej, če odstranite rob s slogovno lastnostjo, bo na tej strani izginila črta. Kot vidite (v tem primeru ne boste videli ničesar, saj bodo vrstice nevidne):
style = "border: none;">
Če prilagodite velikost, barvo in slog, bo vrstica videti drugačna in ima enak učinek v vseh sodobnih brskalnikih. Na primer, pri tej predstavitvi je meja rdeča, črta in široka 1px:
style = "border: 1px je padel # 000;">
Ampak, če spremenite mejo in višino, so slogi v zelo zastarelih brskalnikih nekoliko drugačni kot v modernih brskalnikih. Kot lahko vidite v tem primeru, če ga vidite v IE7 in spodaj (brskalnik, ki je zastarel in zastarelo, Microsoft ne podpira več), je v notranjih vrsticah, ki se ne prikazujejo v drugih brskalnikih (vključno z IE8 in več) :
style = "višina: 1.5em; širina: 25em; meja: 1px solid # 000;">
Ti starinski brskalniki danes v spletnem dizajnu niso zares zaskrbljeni, saj so jih večinoma nadomeščali z bolj sodobnimi možnostmi.
Naredite dekorativno linijo s sliko iz ozadja
Namesto barve lahko določite sliko ozadja za vašega HR-ja, tako da bo izgledal natanko tako, kot želite, vendar še vedno prikaže semantično v svoji oznaki.
V tem primeru smo uporabili sliko, ki ima tri valovite črte. Če ga nastavite kot ozadje brez ponavljanja, ustvari prelom v vsebini, ki izgleda skoraj tako, kot vidite v knjigah:
style = "height: 20px; background: #fff url (aa010307.gif) center za pomikanje brez ponavljanja; border: none;">
Preoblikovanje HR elementov
S CSS3 lahko svoje vrstice naredite zanimivejše. HR element je tradicionalno vodoravna črta, vendar s preoblikovanjem lastnosti CSS lahko spremenite, kako izgledajo. Najljubša preobrazba HR elementa je sprememba vrtenja.
Svoj HR element lahko zavrtite tako, da je le nekoliko diagonalna:
hr {
-moz-transform: vrtite (10deg);
-webkit-transform: vrtite (10deg);
-o-transform: vrtite (10deg);
-ms-transformacija: vrtite (10deg);
spremenite: vrtite (10deg);
}
Ali ga lahko vrtite tako, da je povsem navpična:
hr {
-moz-transform: vrtite (90deg);
-webkit-transform: vrtite (90deg);
-o-transform: vrtite (90deg);
-ms-transformacija: vrtite (90deg);
spremenite: vrtite (90deg);
}
Ne pozabite, da to zavrti HR glede na trenutno lokacijo v dokumentu, zato boste morda morali prilagoditi pozicioniranje, da ga dobite tam, kjer želite. Priporočljivo je, da to uporabite za dodajanje navpičnih črt na oblikovanje, vendar je to način, kako ustvariti zanimiv učinek.
Drug način za pridobivanje črt na svojih straneh
Ena stvar, ki jo nekateri ljudje namesto uporabe HR elementa, je, da se zanašajo na meje drugih elementov. Včasih pa je HR veliko bolj priročen in lažji za uporabo, kot pa poskuša postaviti meje. Težave z nekaterimi različicami brskalnikov lahko postavijo mejo celo bolj zahtevno.