Horisontaalsete eraldaja stiilis joonte lisamiseks oma veebisaitidele sisaldab üks võimalus nende ridade pildifailide lisamist teie leht, kuid see eeldaks, et teie brauser need failid alla laadiks ja laadiks, mis võib avaldada negatiivset mõju peal saidi toimivus. Võite kasutada ka CSS piiri kinnisvara lisada piirid mis toimivad joontena kas elemendi üla- või alaosas, luues tõhusalt teie eraldusjoone.
Või - veel parem - kasutage HTML horisontaalreegli element.
Horisontaalse reegli element
Horisontaalsete reeglijoonte vaikimisi välimus pole ideaalne. Nende paremaks väljanägemiseks lisage CSS, et kohandada nende elementide visuaalset välimust vastavalt oma saidi välimusele.
Põhiline HR-silt näitab, kuidas brauser seda kuvada soovib. Kaasaegsed brauserid kuvavad joone loomiseks tavaliselt stiilita HR-silte, mille laius on 100 protsenti, kõrgus 2 pikslit ja 3D-ääris.
Laius ja kõrgus on brauserites ühtsed
Ainsad stiilid, mis on veebibrauserites ühtsed, on laius ja stiilid. Need määravad, kui suur joon saab olema. Kui te ei määra laiust ja kõrgust, on vaikelaius 100 protsenti ja vaikekõrgus on 2 pikslit.
Selles näites on vanemelemendi laius 50 protsenti (pange tähele, et need allpool toodud näited sisaldavad kõiki siseseid stiile. Tootmisrežiimis kirjutatakse need stiilid hallatamise hõlbustamiseks kõigil lehtedel tegelikult välisele stiililehele):
style = "width: 50%;">
Selles näites on kõrgus 2em:
style = "height: 2em;">
Piiride muutmine võib olla keeruline
Kaasaegsetes brauserites ehitab brauser joone, kohandades piiri. Nii et kui eemaldate stiili atribuudiga piiri, kaob rida lehel. Nagu näete (noh, te ei näe midagi, kuna read on nähtamatud) selles näites:
style = "border: none;">
Äärise suuruse, värvi ja stiili reguleerimine muudab joone erinevaks ja sellel on sama mõju kõigis kaasaegsetes brauserites. Näiteks on sellel demonstratsioonil piir punane, katkendlik ja 1px lai:
style = "border: 1px dashed # 000;">
Tehke taustpildiga dekoratiivne joon
Värvi asemel määrake oma horisontaalse reegli jaoks taustapilt, nii et see näeks välja täpselt selline, nagu soovite, kuid kuvatakse siiski markantides semantiliselt. Selles näites kasutasime pilti, mis koosneb kolmest lainelisest joonest. Määrates selle nimeks taustapilt kordusteta loob see sisupausu, mis näeb välja peaaegu selline, nagu näete raamatutes:
style = "kõrgus: 20px; taust: #fff url (aa010307.gif) kerimiskeskus pole korduv; piir: puudub; ">
HR-elementide teisendamine
CSS3 abil saate ka oma read huvitavamaks muuta. HR-element on traditsiooniliselt a horisontaalne rida, kuid CSS-i teisenduse omaduse abil saate muuta nende välimust. Lemmik transformatsioon HR-elemendil on pöörde muutmine.
Pöörake oma HR-elementi nii, et see oleks vaid veidi diagonaalne:
hr
-moz-muundamine: pööramine (10deg);
-veebikomplekti teisendamine: pööramine (10deg);
-o-muundamine: pööramine (10deg);
-ms-muundamine: pööramine (10deg);
teisendada: pöörata (10deg);
}
Või saate seda pöörata nii, et see oleks täiesti vertikaalne:
hr
-moz-muundamine: pööramine (90deg);
-veebikomplekti teisendamine: pööramine (90deg);
-o-muundamine: pööramine (90 kraadi);
-ms-muundamine: pööramine (90deg);
teisendamine: pööramine (90 kraadi);
}
See tehnika pöörleb HR-i selle praeguse asukoha alusel dokumendis, nii et peate võib-olla kohandama positsioneerimist, et see jõuaks sinna, kuhu soovite. Vertikaalsete joonte lisamiseks kujundusele ei ole soovitatav seda kasutada, kuid see on huvitav efekt.
Veel üks viis oma lehtedele ridade saamiseks
Üks asi, mida mõned inimesed teevad HR-elemendi kasutamise asemel, on tugineda teiste elementide piiridele. Kuid mõnikord on HR-d palju mugavam ja hõlpsam kasutada kui piiride seadistamine. Mõne brauseri kastimudeli probleemid võivad piiri seadistamise veelgi keerulisemaks muuta.