Maak interessante soeklyne op webblaaie met HR-etikette
As u horisontale, skeidingsstyllyne by u webtuistes wil voeg, het u 'n paar opsies. Jy kan die werklike prentlêers van die lyne by jou bladsy voeg, maar dit sal jou blaaier vereis om die lêers te laai en laai, wat 'n negatiewe uitwerking op die prestasie van die werf kan hê.
U kan die CSS- grens eiendom gebruik om grense by te voeg wat as lyne bo of onder van 'n element optree en u skeidingslyn effektief skep.
Uiteindelik kan u die HTML- element vir die horisontale reël gebruik - die
Die Horisontale Reglement Element
As jy ooit 'n element op 'n webblad het, het jy waarskynlik ontdek dat die standaard manier waarop hierdie lyne vertoon word nie ideaal is nie. Dit beteken dat jy moet draai na CSS om die visuele voorkoms van hierdie elemente aan te pas om in lyn te wees met hoe jy wil hê jou werf moet lyk.
'N Basiese HR-tag word vertoon soos die blaaier dit wil vertoon. Moderne blaaiers vertoon tipies ongehoorde HR-etikette met 'n wydte van 100%, 'n hoogte van 2px en 'n 3D-grens in swart om die lyn te skep.
Hier is ' n voorbeeld van 'n standaard HR-element, of jy kan in hierdie prent sien hoe 'n ongestemde HR in moderne blaaiers lyk.
Breedte en hoogte is konsekwent oor blaaiers
Die enigste style wat konsekwent is oor webblaaiers is die breedte en style. Hierdie definieer hoe groot die lyn sal wees. As jy nie die breedte en hoogte definieer nie, is die standaardwydte 100% en die standaard hoogte is 2px.
In hierdie voorbeeld is die wydte 50% van die ouerelement (let op die volgende voorbeelde hieronder bevat inline-style. In 'n produksie-omgewing sal hierdie style eintlik in 'n eksterne stylblad geskryf word vir maklike bestuur deur al u bladsye).
style = "width: 50%;">
En in hierdie voorbeeld is die hoogte 2em:
style = "hoogte: 2em;">
Verandering van die grense kan uitdagend wees
In moderne blaaiers bou die blaaier die lyn deur die grens aan te pas. So as jy die grens met die styl eiendom verwyder, sal die lyn op die bladsy verdwyn. Soos u kan sien (wel, jy sal niks sien nie, aangesien die lyne onsigbaar sal wees) in hierdie voorbeeld:
style = "border: none;">
Deur die grens grootte, kleur en styl aan te pas, sal die lyn anders lyk en dieselfde effek hê in alle moderne blaaiers. Byvoorbeeld, in hierdie demonstrasie is die grens rooi, stippel en 1px breed:
style = "border: 1px dashed # 000;">
Maar as jy die grens en die hoogte verander, lyk die style effens anders in verouderde blaaiers as wat hulle in moderne blaaiers doen. Soos u in hierdie voorbeeld kan sien, as u dit in IE7 en onder sien ('n blaaier wat vervelig verouderd is en nie meer deur Microsoft ondersteun word nie), is daar 'n binnegedrewe lyn wat nie in die ander blaaiers vertoon word nie (insluitende IE8 en hoër) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Daardie antieke blaaiers is eintlik nie baie bekommerd in webontwerp nie, aangesien hulle grootliks vervang word met meer moderne opsies.
Maak 'n dekoratiewe lyn met 'n agtergrond prentjie
In plaas van 'n kleur, kan jy 'n agtergrond prent vir jou HR definieer sodat dit lyk presies soos wat jy dit wil hê, maar steeds semanties vertoon in jou opmaak.
In hierdie voorbeeld gebruik ons 'n beeld wat van drie golwe is. Deur dit as die agtergrond beeld te stel sonder om te herhaal, skep dit 'n breek in die inhoud wat amper lyk soos wat jy in boeke sien:
style = "hoogte: 20px; agtergrond: #fff url (aa010307.gif) nie-herhaal blaai sentrum; grens: geen;">
Omskakeling van MH-elemente
Met CSS3 kan jy jou lyne ook meer interessant maak. Die HR-element is tradisioneel 'n horisontale lyn, maar met die CSS-transformasie-eienskap kan jy verander hoe dit lyk. 'N Gunsteling transformasie op die HR-element is om die rotasie te verander.
Jy kan jou HR-element draai sodat dit net effe diagonaal is:
hr {
-moz-transform: draai (10deg);
-webkit-transform: draai (10deg);
-O-transform: draai (10deg);
-ms-transform: draai (10deg);
transformeer: draai (10deg);
}
Of jy kan dit so draai dat dit heeltemal vertikaal is:
hr {
-moz-transform: draai (90deg);
-webkit-transform: draai (90deg);
-O-transform: draai (90deg);
-ms-transform: draai (90deg);
transformeer: draai (90deg);
}
Onthou dat dit die HR op grond van sy huidige ligging in die dokument draai, sodat jy dalk die posisionering moet aanpas om dit te kry waar jy dit wil hê. Dit word nie aanbeveel om dit te gebruik om vertikale lyne by 'n ontwerp te voeg nie, maar dit is 'n manier om 'n interessante effek te kry.
Nog 'n manier om lyne op jou bladsye te kry
Een ding wat sommige mense doen in plaas van die HR-element, is om op grense van ander elemente staat te maak. Maar soms is 'n HR baie makliker en makliker om te gebruik as om grense op te stel. Die vakmodelkwessies van sommige blaaiers kan die opstel van 'n grens selfs moeiliker maak.