Hvis du har brug for at tilføje vandrette linjer til separator-stil på dine websteder, omfatter dine typiske valg tilføjelse af billedfiler af disse linjer til din side, men det ville kræve, at din browser henter og indlæser disse filer, hvilket kunne have en negativ indvirkning på webstedet ydeevne. Du kan også bruge CSS-grænseegenskaben til at tilføje grænser, der fungerer som linjer enten øverst eller nederst på et element, der effektivt skaber din separatorlinie.
Eller - endnu bedre - brug HTML-elementet til den horisontale regel.
Det horisontale regelelement
Standard udseendet af vandrette linjer ikke ideelt. For at få dem til at se bedre ud, tilføj CSS for at justere det visuelle udseende af disse elementer for at være i overensstemmelse med, hvordan du vil have dit websted til at se ud.
Et grundlæggende HR-mærke vises som browseren ønsker at vise det. Moderne browsere viser typisk ustylede HR-tags med en bredde på 100 procent, en højde på 2 pixels og en 3D-ramme i sort for at oprette linjen.
Bredde og højde er konsistente over browsere
De eneste stilarter, der er konsistente på tværs af webbrowsere, er bredden og stilarterne. Disse definerer hvor stor linjen vil være. Hvis du ikke definerer bredden og højden, er standardbredden 100 procent, og standardhøjden er 2 pixel.
I dette eksempel er bredden 50 procent af grundelementet (bemærk, at disse eksempler under alle omfatter inline-stilarter. I en produktionsindstilling ville disse stilarter faktisk være skrevet i et eksternt stilark for at lette styringen på alle dine sider):
style = "width: 50%;">
Og i dette eksempel er højden 2em: style = "height: 2em;"> I moderne browsere bygger browseren linjen ved at justere grænsen. Så hvis du fjerner grænsen med stilegenskaben, forsvinder linjen på siden. Som du kan se (ja, du vil ikke se noget, da linjerne vil være usynlige) i dette eksempel: style = "border: none;">
Justering af grænsestørrelse, farve og stil gør linien til anderledes og har samme effekt i alle moderne browsere. I denne demonstration er grænsen f.eks. Rød, stiplede og 1px bred: style = "border: 1px dashed # 000;">
Men hvis du ændrer grænsen og højden, ser stilarterne lidt anderledes ud i meget forældede browsere end de gør i moderne browsere. Som du kan se i dette eksempel, hvis du ser det i IE7 og nedenfor (en browser, der er utroligt forældet og ikke længere understøttet af Microsoft), er der en skråt indvendig linje, der ikke vises i de andre browsere (herunder IE8 og op) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Disse antikvitetsbrowsere er virkelig ikke meget bekymrede i webdesign i dag, da de i vid udstrækning er blevet erstattet af mere moderne muligheder. I stedet for en farve kan du definere et baggrundsbillede for din horisontale regel, så den ser ud, som du vil have den til, men vises stadig semantisk i din markering. I dette eksempel brugte vi et billede, der er af tre bølgete linjer. Ved at indstille det som baggrundsbillede uden gentagelse skaber det en pause i indholdet, der ser næsten ud som om du ser i bøger: style = "højde: 20px; baggrund: #fff url (aa010307.gif) no-repeat rullecenter; grænse: none;"> Med CSS3 kan du også gøre dine linjer mere interessante. HR-elementet er traditionelt a vandret linje, men med CSS transform-ejendommen kan du ændre hvordan de ser ud. En foretrukken transformation på HR-elementet er at ændre rotationen. Du kan rotere dit HR-element, så det er bare lidt diagonalt: hr {-moz-transform: rotere (10deg);-webkit-transform: roter (10deg);-o-transformer: roter (10deg);-ms-transformer: roter (10deg);transformere: rotere (10deg);}
Eller du kan rotere den så den er helt lodret: hr {-moz-transform: rotere (90deg);-webkit-transform: roter (90deg);-o-transformer: roter (90deg);-ms-transformer: roter (90deg);transformere: rotere (90deg);}
Husk, at denne teknik roterer HR baseret på dets aktuelle placering i dokumentet, så du kan muligvis justere positioneringen for at få den, hvor du vil have den. Det anbefales ikke at bruge dette til at tilføje lodrette linjer til et design, men det er en måde at få en interessant effekt på. En ting, som nogle mennesker gør i stedet for at bruge HR-elementet, er at stole på grænser af andre elementer. Men nogle gange er en HR meget mere bekvem og lettere at bruge end at forsøge at oprette grænser. Løsningsmodelproblemerne fra nogle browsere kan gøre opsætningen af en grænse endnu sværere. Ændring af grænserne kan udfordres
Lav en dekorativ linje med et baggrundsbillede
Omdannelse af HR-elementer
En anden måde at få linjer på dine sider
