Norėdami pridėti horizontalias, separatoriaus stiliaus linijas prie savo svetainių, viena parinktis apima tų eilučių vaizdo failų pridėjimą jūsų puslapį, tačiau tam jūsų naršyklė turėtų nuskaityti ir įkelti tuos failus, o tai gali turėti neigiamą poveikį ant svetainės našumas. Taip pat galite naudoti CSS pasienio nuosavybė sienos kurios veikia kaip linijos arba elemento viršuje, arba apačioje, efektyviai sukurdamos atskyrimo liniją.
Arba - dar geriau - naudokite HTML horizontaliosios taisyklės elementas.
Horizontaliosios taisyklės elementas
Numatytasis horizontalių taisyklių linijų vaizdas nėra idealus. Norėdami, kad jie atrodytų gražiau, pridėkite CSS, kad pritaikytumėte šių elementų vizualinę išvaizdą, kad ji atitiktų jūsų svetainės išvaizdą.
Pagrindinė HR žyma rodo, kaip naršyklė nori ją rodyti. Šiuolaikinėse naršyklėse linijai sukurti paprastai pateikiamos nestilingos HR žymos, kurių plotis yra 100 procentų, 2 taškų aukštis ir 3D kraštinė juodai.
Naršyklėse plotis ir aukštis yra nuoseklūs
Vieninteliai stiliai, nuoseklūs visose žiniatinklio naršyklėse, yra plotis ir stilius. Jie apibrėžia, kokia bus didelė linija. Jei neapibrėžiate pločio ir aukščio, numatytasis plotis yra 100 proc., O numatytasis aukštis yra 2 pikseliai.
Šiame pavyzdyje pirminio elemento plotis yra 50 procentų (atkreipkite dėmesį, kad šie toliau pateikti pavyzdžiai apima įterptinius stilius. Gamybos aplinkoje šie stiliai iš tikrųjų bus parašyti išoriniame stiliaus lape, kad būtų lengviau valdyti visus jūsų puslapius):
style = "plotis: 50%;">
Šiame pavyzdyje aukštis yra 2em:
style = "height: 2em;">
Sienų pakeitimas gali būti sudėtingas
Šiuolaikinėse naršyklėse naršyklė kuria liniją koreguodama kraštinę. Taigi, jei pašalinsite briauną su stiliaus ypatybe, eilutė puslapyje išnyks. Kaip matote (gerai, nieko nematysite, nes eilutės bus nematomos) šiame pavyzdyje:
style = "border: none;">
Koreguojant krašto dydį, spalvą ir stilių, linija atrodo kitaip ir turi tą patį poveikį visose šiuolaikinėse naršyklėse. Pvz., Šioje demonstracijoje siena yra raudona, brūkšniuota ir 1 taško pločio:
style = "border: 1px dashed # 000;">
Padarykite dekoratyvinę liniją su fono paveikslėliu
Vietoj spalvos apibrėžkite horizontalios taisyklės fono vaizdą, kad jis atrodytų tiksliai taip, kaip norite, bet vis tiek būtų rodomas semantiškai jūsų žymėjime. Šiame pavyzdyje mes panaudojome vaizdą iš trijų banguotų linijų. Nustačius jį kaip fono paveikslėlis be pakartojimų sukuria turinio pertrauką, kuri atrodo beveik taip, kaip matai knygose:
style = "aukštis: 20 taškų; fonas: #fff url (aa010307.gif) slinkties centras be pakartojimų; riba: nėra; ">
Žmogiškųjų išteklių elementų transformavimas
Naudodami CSS3 taip pat galite padaryti savo eilutes įdomesnes. HR elementas tradiciškai yra a horizontaliai eilutę, tačiau naudodami CSS transformavimo ypatybę galite pakeisti jų išvaizdą. Mėgstamiausia HR elemento transformacija yra pakeisti sukimąsi.
Pasukite savo HR elementą taip, kad jis būtų šiek tiek įstrižas:
valanda {
-moz-transformuoti: pasukti (10 laipsnių);
-webkit-transformuoti: pasukti (10deg);
-o-transformuoti: pasukti (10 laipsnių);
-ms-transformuoti: pasukti (10 laipsnių);
transformuoti: pasukti (10 laipsnių);
}
Arba galite pasukti taip, kad jis būtų visiškai vertikalus:
valanda {
-moz-transformuoti: pasukti (90 laipsnių);
-webkit-transformuoti: pasukti (90deg);
-o-transformuoti: pasukti (90 laipsnių);
-ms-transformuoti: pasukti (90 laipsnių);
transformuoti: pasukti (90 laipsnių);
}
Šis metodas pasuka HR, atsižvelgiant į jo dabartinę vietą dokumente, todėl gali tekti pakoreguoti padėties nustatymą, kad jis būtų ten, kur norite. Nerekomenduojama to naudoti norint pridėti vertikalių linijų prie dizaino, tačiau tai yra įdomus efektas.
Kitas būdas gauti eilučių savo puslapiuose
Vienas dalykas, kurį kai kurie žmonės daro užuot naudoję HR elementą, yra pasikliauti kitų elementų sienomis. Tačiau kartais HR yra daug patogesnis ir lengviau naudojamas nei bandymas nustatyti sienas. Kai kurių naršyklių langelio modelio problemos gali padaryti krašto nustatymą dar sudėtingesnį.