Aussoen interessant Linnen op Web Säiten mat HR Tags
Wann Dir Horizontal, Separator-Stillinn op Är Websäiten eropzelueden, hutt Dir e puer Optiounen. Dir kënnt effektiv Biller vu dësen Zeilen op Är Säit addéieren, awer datt Dir Äre Browser erfëllt hutt an dës Fichieren ze lueden, wat e negativ Auswierkungen op der Site hunn.
Dir kënnt d'Grenzgänger Eegeschafte benotzen fir Grenzen ze addéieren, déi als Linnen entweder am Top oder am Enn vun engem Element handelen, fir effektiv d'Separator ze kreéieren.
Schlussendlech kënnt Dir de HTML Element fir d'horizontal Regel benotzen -
D'Horizontalregel Element
Wann Dir jee e Element op enger Websäit gesat huet, kënnt Dir wahrscheinlech feststellen datt de Standardartikel déi dës Zeilen ugewisen ginn net ideal sinn. Dëst bedeit datt Dir e CSS schreift fir d'visuell Optriede vun dësen Elementer ze justifiéieren an wéi Dir wëllt Är Site kucken.
E Basis-HR-Tag gëtt ugewisen, wéi de Browser et duerstellt. Modern Browseren weisen normalerweis onbestänneg HR-Tags mat enger Breet vun 100%, enger Héicht vun 2px, an enger 3D Grenz zu schwaarz, fir d'Linn ze kreéieren.
Hei ass e Beispill vun engem normale HR-Element oder Dir kënnt an dësem Bild kucken wéi engem onstylen HR an modernen Browser kuckt.
Breite a Héicht sinn konsistent iwwer Browser
Déi eenzeg Stiler, déi konsistent iwwer Webbrowser bestehen, sinn d' Breet a Stiler. Dës definéieren wéi grouss d'Linn wäert sinn. Wann Dir keng Breet an Héicht definéiert ass d'Standardbreedung 100% an déi Standardhöhe ass 2px.
Dëst Beispill ass d'Breet vun 50% vum Elterenelement (kuckt dës Beispiller ënnert all Inline Styles. Bei enger Produktiounsanlag wäerte dës Stiler eigentlech an engem externen Stylblat geschriwwe ginn fir d'Verwaltung op all seng Säiten ganz einfach ze maachen):
Stil = "Breet: 50%;">
An dëst Beispill ass d'Héicht 2em:
Stil = "Héicht: 2em;">
Äert Grenzen ännert sech ze schwiereg
Bei modernen Browser navigéiert de Browser d'Linn duerch d'Grenzregioun. Also wann Dir d'Grenz mat der Stilimmkeet fuere wäert, fënns d'Linn op der Säit. Wéi Dir gesitt (och, Dir sicht näischt, wéi d'Leit sinn net sichtbar) an dësem Beispill:
style = "border: none;">
Andeems Dir d'Grenzgréisst, d'Faarf an de Stil benotzt, wäert d'Linn verschidden sinn an déi selwecht Effekt an all modernen Browser huet. Zum Beispill, an dëser Demonstratioun ass d'Grenz roud, gestach, a 1px breed:
Stil = "border: 1px dashed # 000;">
Mee wann Dir d'Grenz an d'Héicht ännert, kucke wéi d'Stiler a verschidden Browser an e bësse méi ausgedréckt Browseren. Wéi Dir an dësem Beispill kuckt, wann Dir se an IE7 a méi drënner gesinn (e Browser dat komplett iwwerdrowen ass an net méi ënnerstëtzt gëtt) ass et eng abstrakt intern Zeil déi net an den aneren Browser ze gesinn (IE8 a bis up) :
Stil = "Héicht: 1.5em, Breet: 25em; Grenz: 1px solid # 000;">
Déi antiqued Browser sinn net vill vun engem Besuergt um Webdesign haut, well se haaptsächlech duerch méi modern Modaritéiten ersetzt ginn.
Maacht eng Dekoratiounsart mat engem Hannergrond
Andeems Dir eng Faarf mécht, kënnt Dir e Fondatiounsbild fir Är HR definéieren fir datt se genau wéi Dir et wëllt, awer ëmmer nach semantesch an Ärer Markup.
An dësem Beispill benotzt mir e Bild, deen aus dräi gewellten Linnen ass. Andeems Dir se als Background vum Bild ouni Wiederhol hutt, e Paus huet den Inhalt, dee bal wéi Dir an Bicher kuckt gesinn:
Et ass e bësse méi wäit ewech,
Transformatioun vu HR Elements
Mat CSS3 kënnt Dir Är Zeilen méi interessant maachen. Den HR-Element ass traditionell enger horizontaler Linn, awer mat der CSS-Transfiguratioun Eegeschafte kënnt Dir veränneren wéi se kucken. E Favoritttransformation op dem HR Element ass d'Rotatioun ze änneren.
Dir kënnt Äre HR-Element dreemen fir datt et nëmme liicht diagonal ass:
hr {
-moz-transform: rotéieren (10deg);
-webkit-transform: rotéieren (10deg);
-o-transform: rotéieren (10deg);
-ms-transform: rotéieren (10deg);
transforméieren: rotéieren (10deg);
}}
Oder Dir kënnt et dreier maachen datt et ganz vertikal ass:
hr {
-moz-transform: rotéieren (90deg);
-webkit-transform: rotéieren (90deg);
-o-transform: rotéieren (90deg);
-ms-transform: rotéieren (90deg);
transforméiert: rotéieren (90deg);
}}
Denkt drun datt dat rotéiert den HR baséiert op senger aktueller Location am Dokument, sou datt Dir musst d'Positionéiere maache wat et wëllt. Et ass net recommandéiert dat ze benotzen fir vertikalen Linnen mat engem Design ze ginn, awer et ass e Wee fir en interessante Effekt ze kréien.
Eng aner Wee fir Linnen op Är Säiten ze kréien
Eng Saach, datt e puer Leit anstatt de HR Element ze benotzen ass op d'Grenzen vun aneren Elementer op. Mee heiansdo en HR ass vill méi praktesch a méi einfach ze benotzen, wéi ee probéiert Grenzen ze setzen. De Boxmodell vun e puer Browser kann e Grëff och méi flott maachen.