Padaryti įdomių žvilgsnių linijų tinklalapiuose su HR žymėmis
Jei jums reikia pridėti horizontalias, atskyrimo stiliaus linijas į savo svetaines, turite kelias parinktis. Galite pridėti tikrų šių eilučių vaizdinių rinkmenų į savo puslapį, bet tai, kad jūsų naršyklė reikalauja, kad jų rinkmenos būtų įkeltos ir įkeltos, o tai gali turėti neigiamą poveikį svetainės našumui.
Galite naudoti CSS pasienio turtą, kad pridėtumėte sieneles, kurios veikia kaip elemento viršuje arba apačioje esančios eilutės, efektyviai kurdami jūsų atskyrimo liniją.
Galiausiai galite naudoti HTML elementą horizontaliai taisyklę -
Horizontaliojo taisyklių elementas
Jei kada nors įdėjote elementą tinklalapyje, tikriausiai pastebėjote, kad numatytasis šių eilučių rodymo būdas nėra idealus. Tai reiškia, kad jums reikia kreiptis į 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. Šiuolaikinės naršyklės paprastai rodomos nenustatytos HR žymos, kurių plotis yra 100%, 2 pikselių aukštis ir juodos spalvos trimatė siena.
Čia pateikiamas standartinio HR elemento pavyzdys arba šiame paveikslėlyje galite pamatyti, kaip neatskleista HR atrodo šiuolaikinėse naršyklėse.
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%, o numatytasis aukštis - 2 piksai.
Šiame pavyzdyje plotis yra 50% pagrindinio elemento (atkreipkite dėmesį į šiuos žemiau esančius pavyzdžius, įtraukiant į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;">
Sienų keitimas gali būti iššūkis
Š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.
Padarykite dekoratyvinę liniją su fono vaizdais
Vietoj spalvos galite nustatyti savo HR atvaizdą, kad jis atrodytų tiksliai taip, kaip norite, bet vis tiek semantiniu būdu rodomas jūsų žymėjime.
Š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;">
Transformuoti HR elementus
Su CSS3 taip pat galite padaryti savo eilutes įdomiau. HR elementas tradiciškai yra horizontali linija, tačiau CSS transformavimo savybe 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);
}
Nepamirškite, kad tai keičia HR, atsižvelgiant į jo dabartinę dokumento vietą, todėl gali tekti 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ą.
Kitas būdas gauti linijas jūsų puslapiuose
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ą.