Hvis du trenger å legge til horisontale linjer for separatorstiler på nettstedene dine, inkluderer de typiske alternativene å legge til bildefiler av disse linjene på siden din, men det vil kreve at nettleseren din henter og laster inn disse filene, noe som kan ha en negativ innvirkning på nettstedet opptreden. Du kan også bruke CSS-grenseegenskapen til å legge til grenser som fungerer som linjer enten øverst eller nederst på et element, og effektivt skaper separatorlinjen.
Eller - enda bedre - bruk HTML-elementet for den horisontale regelen.
Det horisontale regelelementet
Standard utseendet på horisontale regellinjer er ikke ideelt. For å få dem til å se bedre ut, legg til CSS for å justere det visuelle utseendet til disse elementene for å være i tråd med hvordan du vil at nettstedet ditt skal se ut.
En grunnleggende HR-kode vises på samme måte som nettleseren ønsker å vise den. Moderne nettlesere viser vanligvis ustylte HR-koder med en bredde på 100 prosent, en høyde på 2 piksler og en 3D-grense i svart for å lage linjen.
Bredde og høyde er konsistente over nettlesere
De eneste stilene som er konsistente på tvers av nettlesere er bredden og stilene. Disse definerer hvor stor linjen vil være. Hvis du ikke definerer bredde og høyde, er standardbredden 100 prosent og standardhøyden er 2 piksler.
I dette eksemplet er bredden 50 prosent av hovedelementet (merk at disse eksemplene nedenfor alle inneholder inline-stiler. I en produksjonsinnstilling vil disse stilene faktisk bli skrevet i et eksternt stilark for enkel administrasjon gjennom alle sidene dine):
style = "width: 50%;">
Og i dette eksemplet er høyden 2em: style = "height: 2em;"> I moderne nettlesere bygger nettleseren linjen ved å justere grensen. Så hvis du fjerner grensen med stilegenskapen, forsvinner linjen på siden. Som du kan se (vel, du vil ikke se noe, da linjene vil være usynlige) i dette eksemplet: style = "border: none;">
Justering av grense størrelse, farge og stil vil gjøre linjen ser annerledes ut og har samme effekt i alle moderne nettlesere. For eksempel, i denne demonstrasjonen er grensen rød, dashed og 1px bred: style = "border: 1px dashed # 000;">
Men hvis du endrer grensen og høyden, ser stilene litt annerledes ut i svært utdaterte nettlesere enn de gjør i moderne nettlesere. Som du kan se i dette eksemplet, hvis du ser det i IE7 og under (en nettleser som er utdatert og ikke lenger støttet av Microsoft), er det en avfaset indre linje som ikke vises i de andre nettleserne (inkludert IE8 og oppover) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
De antiqued nettleserne er egentlig ikke så mye bekymret i webdesign i dag, siden de i stor grad er erstattet av mer moderne alternativer. I stedet for en farge kan du definere et bakgrunnsbilde for den horisontale regelen slik at den ser ut akkurat som du vil ha den til, men vises fortsatt semantisk i oppslaget ditt. I dette eksemplet brukte vi et bilde som er av tre bølgete linjer. Ved å sette det som bakgrunnsbilde uten gjentagelse, skaper det en pause i innholdet som ser nesten ut som du ser i bøker: style = "height: 20px; background: #fff url (aa010307.gif) no-repeat rulle senter; grense: ingen;"> Med CSS3 kan du også gjøre linjene mer interessante. HR-elementet er tradisjonelt a horisontal linje, men med CSS-transformasjonsegenskapen, kan du endre hvordan de ser ut. En favoritt transformasjon på HR-elementet er å endre rotasjonen. Du kan rotere HR-elementet slik at det bare er litt diagonalt: hr {-moz-transform: roter (10deg);-webkit-transform: roter (10deg);-o-transformer: roter (10deg);-ms-transformer: roter (10deg);transformer: roter (10deg);}
Eller du kan rotere den slik at den er helt vertikal: hr {-moz-transform: roter (90deg);-webkit-transform: roter (90deg);-o-transformer: roter (90deg);-ms-transformer: roter (90deg);transformer: roter (90deg);}
Husk at denne teknikken roterer HR basert på gjeldende plassering i dokumentet, så du må kanskje justere posisjoneringen for å få den der du vil ha den. Det anbefales ikke å bruke dette for å legge til vertikale linjer i et design, men det er en måte å få en interessant effekt på. En ting som noen mennesker gjør i stedet for å bruke HR-elementet, er å stole på grenser til andre elementer. Men noen ganger er en HR mye mer praktisk og enklere å bruke enn å prøve å sette opp grenser. Løsningsmodusproblemer fra noen nettlesere kan gjøre det enklere å sette opp en kantlinje. Endring av kantene kan være utfordrende
Lag en dekorativ linje med et bakgrunnsbilde
Transformere HR-elementer
En annen måte å få linjer på sidene dine
