Jei į savo svetaines reikia pridėti horizontalių, atskirų stiliaus eilučių, įprastomis parinktimis yra pridėti paveikslėlių failus iš tų eilučių į jūsų puslapį, bet tai, kad jūsų naršyklė reikalauja, kad jų failai būtų paimti ir įkelti, o tai gali turėti neigiamą poveikį svetainėms spektaklis. Taip pat galite naudoti CSS pasienio nuosavybę, kad pridėtumėte sienas, kurios veikia kaip elemento viršuje arba apačioje esančios eilutės, efektyviai kurdami jūsų skiriamąją liniją.
Arba - dar geriau - naudokite HTML elementą horizontaliai taisyklę.
Horizontaliojo taisyklių elementas
Numatytoji horizontaliųjų taisyklių eilučių išvaizda nėra ideali. Jei norite, kad jie atrodytų gražiau, pridėkite CSS, kad pritaikytumėte šių elementų išvaizdą, kad jie atitiktų jūsų svetainės išvaizdą.
Pagrindinė ŽT žyma rodoma taip, kaip naršyklė nori ją rodyti. Šiuolaikiškose naršyklėse paprastai pateikiamos neužpildytos HR žymos, kurių plotis yra 100 proc., 2 pikselių aukštis ir juodoji trimatė sienelė, kad būtų sukurta linija.
Plotis ir aukštis yra vienodi visose naršyklėse
Vieninteliai stilių, kurie yra vienodi visose žiniatinklio naršyklėse, yra plotis ir stiliai. Tai apibrėžia, kiek bus linija. Jei nenurodysite pločio ir aukščio, numatytasis plotis bus 100 procentų, o numatytasis aukštis - 2 pikseliai.
Šiame pavyzdyje plotis yra 50 procentų tėvų elemento (atkreipkite dėmesį į šiuos žemiau esančius pavyzdžius, įskaitant įterptinius stilius. Gamybos nustatymuose šie stiliai iš tikrųjų būtų parašyti išoriniame stilių lange, kad būtų lengviau tvarkyti visus savo puslapius):
style = "width: 50%;">
Ir šiame pavyzdyje aukštis yra 2em: stilius = "aukštis: 2em;"> Šiuolaikinėse naršyklėse naršyklė sukūrė liniją koreguodami sieną. Taigi, jei pašalinsite sieną su stiliaus nuosavybe, linija dingsta puslapyje. Kaip matote (gerai, nieko nematysite, nes eilutės bus nematomos) šiame pavyzdyje: style = "border: none;">
Sienų dydžio, spalvos ir stiliaus nustatymas padaro liniją atrodo kitokia ir veikia visose šiuolaikinėse naršyklėse. Pavyzdžiui, šioje parodoje siena yra raudona, briaunuota ir 1 piks. Pločio: style = "border: 1px dashed # 000;">
Tačiau jei pakeisite sieną ir aukštį, stiliai šiek tiek skiriasi labai pasenusiose naršyklėse, o ne šiuolaikinėse naršyklėse. Kaip matote šiame pavyzdyje, jei jį žiūrėsite IE7 ir toliau (naršyklė, kuri yra blogai pasenusi ir daugiau nebe palaikoma "Microsoft"), yra paslėpta vidinė eilutė, kuri nėra rodoma kitose naršyklėse (įskaitant IE8 ir aukštyn) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Šios senovinės naršyklės šiandien iš tiesų nėra didelės svarbos interneto dizaino srityje, nes jos daugiausia buvo pakeistos šiuolaikiškesnėmis parinktimis. Vietoj spalvos galite nustatyti savo horizontaliosios taisyklės fono vaizdą, kad jis atrodytų tiksliai taip, kaip norite, bet vis tiek rodomas semantiniu būdu. Šiame pavyzdyje panaudojome trijų banguotų linijų vaizdą. Nustatydami jį kaip fono vaizdą be pakartojimo, jis sukuria pertrauką turinyje, kuris atrodo taip, kaip atrodo knygose: style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;"> Su CSS3 taip pat galite padaryti savo eilutes įdomiau. HR elementas tradiciškai yra a horizontalus linija, bet su CSS transformacijos nuosavybe galite pakeisti tai, kaip jie atrodo. Mėgstamiausia transformacija į HR elementą - pakeisti sukimąsi. Galite pasukti HR elementą, kad jis būtų šiek tiek įstrižus: hr {-moz-transformuoti: pasukti (10deg);-webkit-transform: pasukti (10deg);-o-transformuoti: pasukti (10deg);-ms-transformuoti: pasukti (10deg);transformuoti: pasukti (10deg);}
Arba galite pasukti jį taip, kad jis būtų visiškai vertikalus: hr {-moz-transformuoti: pasukti (90deg);-webkit-transform: pasukti (90deg);-o-transformuoti: pasukti (90deg);-ms-transformuoti: pasukti (90deg);transformuoti: pasukti (90deg);}
Atminkite, kad ši technika sukasi HR, atsižvelgiant į jo dabartinę dokumento vietą, todėl gali prireikti koreguoti poziciją, kad ją būtų galima pasiekti ten, kur norite. Nerekomenduojama tai naudoti, kad į dizainą įtraukti vertikalias linijas, tačiau tai yra būdas gauti įdomų efektą. Vienas dalykas, kurį kai kurie žmonės naudoja vietoj HR elemento, yra pasikliauti kitų elementų ribomis. Tačiau kartais žmogus yra daug patogesnis ir lengvesnis nei bandydamas nustatyti sienas. Kai kurių naršyklių dėžutės modelio klausimai gali apsunkinti sienos nustatymą. Sienų keitimas gali būti iššūkis
Padarykite dekoratyvinę liniją su fono vaizdais
Transformuoti HR elementus
Kitas būdas gauti linijas jūsų puslapiuose
