HR-märgistega veebisaitide huvitavate otside loomine
Kui peate oma veebisaitidele horisontaalsete eraldusmärkide ridade lisama, on teil mõned võimalused. Saate lisada oma lehele nende ridade tegelikud pildifailid, kuid see nõuab brauserist nende failide allalaadimist ja laadimist, mis võib avaldada negatiivset mõju saidi jõudlusele.
Võite kasutada CSSi piiriomandit, et lisada piirid, mis toimivad elementide ülaosas või allosas olevate joontena, luues eraldi separaatori rea.
Lõpuks võite horisontaalse reegli HTML- elemendi kasutada -
Horisontaalse reegli element
Kui olete kunagi elemendi veebisaidile loonud, siis tõenäoliselt avastasite, et nende ridade vaikimisi kuvamine pole ideaalne. See tähendab, et peate pöörduma CSS-i poole, et kohandada nende elementide visuaalset välimust, et see vastaks teie saidi välimusele.
Algne HR-kood näitab seda, kuidas brauser seda soovib. Kaasaegsed brauserid näitavad tavaliselt joonte loomiseks silumiskindlaid HR-märgiseid, mille laius on 100%, kõrgus 2px ja mustri piir.
Siin on näide standardse HR-elemendi kohta või näete selles pildis seda, kui tühimatu HR otsib kaasaegsetesse brauseritesse.
Laius ja kõrgus on järjepidevad kogu brauseritega
Ainsad veebibrauseris ühtsed stiilid on laius ja stiilid. Need määravad, kui suur rida on. Kui te ei määra laiust ja kõrgust, on vaikimisi laius 100% ja vaikimisi kõrgus 2 pikslit.
Selles näites on laius 50% põhielemendist (kõik need allpool olevad näited hõlmavad sisseehitatud stiile. Tootmisseadistuses kirjutatakse need stiilid kõikjal oma lehtedel tegelikult väliseks stiilileheks, et hõlbustada haldamist):
stiil = "laius: 50%;">
Ja selles näites on kõrgus 2em:
stiil = "kõrgus: 2em;">
Piiride muutmine võib olla keeruline
Kaasaegsetes brauserites kasutab brauser piiri, kohandades seda joont. Nii et kui eemaldate piiri stiilis vara, siis joon kaob lehel. Nagu näete (hästi, te ei näe midagi, kuna jooned on nähtamatud) selles näites:
style = "border: none;">
Piiri suuruse, värvi ja stiili muutmine muudab liini välimuse ja mõjutab kõiki tänapäevaseid brausereid. Näiteks selles demonstratsioonis on punane, katkendlik ja 1-pikkune laius:
style = "border: 1px dashed # 000;">
Aga kui muudad piiri ja kõrgust, siis on stiilid väga vananenud brauserites veidi erinevad kui tänapäevastes brauserites. Nagu näete selles näites, kui vaatate seda IE7-s ja allpool (brauser, mis on Microsoft'ilt unustult vananenud ja enam ei toeta seda), on sisseehitatud sisemine rida, mida teistes brauserites (sh IE8 ja uuemas) ei kuvata. :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Need antiqued brauserid ei ole tänapäeval eriti veebidisaini jaoks muresid, sest need on suuresti asendatud tänapäevaste võimalustega.
Tehke dekoratiivne joon koos taustapildiga
Värvi asemel saate määratleda oma HR-i jaoks taustapilti nii, et see näeb välja täpselt nii, nagu seda soovite, aga kuvatakse ikkagi semantiliselt oma märgistuses.
Selles näites kasutasime pilti, millel on kolm lainelist joont. Seades selle kui taustpildi ilma korduseta, luuakse see sisult, mis näeb välja peaaegu nagu näete raamatutes:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
HR personali ümberkujundamine
CSS3 abil saate oma read veelgi huvitavamaks muuta. HR-element on traditsiooniliselt horisontaalne joon, kuid CSS-i teisendusteguriga saab muuta seda, kuidas nad välja näevad. HR-elemendi lemmikmuudatus on muuta pöörlemist.
Saate oma HR-elemendi pöörata nii, et see oleks veidi diagonaalne:
hr {
-moz-transform: pöörata (10deg);
-webkit-transform: pöörata (10deg);
-o-muundamine: pöörata (10deg);
-ms-transform: pöörata (10deg);
muuda: pöörlema (10deg);
}
Või saate seda pöörata nii, et see oleks täiesti vertikaalne:
hr {
-moz-transform: pöörata (90deg);
-webkit-transform: pöörlema (90deg);
-o-muundamine: pöörata (90deg);
-ms-transform: pöörata (90deg);
muuda: pöörlema (90deg);
}
Pidage meeles, et see pöörab HR-i lähtuvalt selle praegusest dokumendis asuvast asukohast, seega peate võib-olla positsiooni kohandama, et seda soovitud asukohta saada. Disaini vertikaalsete ridade lisamiseks ei soovitata seda kasutada, kuid see on huvitava mõju saavutamise viis.
Teine viis oma lehtede leidmiseks
Üks asi, mida mõned inimesed teevad selle asemel, et kasutada HR-elementi, on tugineda teiste elementide piiridele. Kuid mõnikord on HR palju mugavam ja lihtsam kasutada kui piiride seadmist. Mõne brauseri kasti mudeli probleemid võivad piiri seadistada isegi keerukamaks.