It meitsjen fan nijsgjirrige syllines op websiden mei HR-tags
As jo horizontale, siderator-styllinen oan jo websiden tafoegje moatte, hawwe jo in pear mooglikheden. Jo kinne aktuele ôfbyldingsbestannen fan dy rigels oan jo side taheakje, mar dat jo jo blêder nedich hawwe om dizze bestannen te laden en te laden, dy't in negative ynfloed hawwe op 'e prestaasjes fan' e side.
Jo kinne it CSS- rânske eigendom brûke om rânen te meitsjen dy't as linen oantsjutte oan 'e boppeste of op' e ûnderkant fan in elemint, effektyf meitsje jo skiedingstreur.
Uteinlik kinne jo it HTML- elemint brûke foar de horizontale regel - de
It horizontale rjochte elemint
As jo ien elemint op in webside set hawwe, jo wierskynlik ûntdutsen dat de standert wize wêrop dizze rigels werjûn wurde net ideaal. Dit betsjut dat jo moatte nei CSS werjaan om de fisuele oansjen fan dizze eleminten oan te passen om yn te rjochtsjen mei hoe't jo jo side wolle sykje.
In basis HR-tag lit de wize wêrop de browser it sjen wol. Moderne browsers lûke normaal unstyle HR-tags mei in breedte fan 100%, in hichte fan 2px, en in 3D-grins yn swart om de line te meitsjen.
Hjir is in foarbyld fan in standert HR-elemint of jo kinne yn dit byld sjogge hoe't in unstyled HR yn moderne browsers sjocht.
Breedte en hichte binne konsistinte fia browsers
De iennichste stilen dy't konsistent binne oer webbrowsers binne de breedte en stilen. Dizze bepale hoe grut de line sil wêze. As jo de breedte en hichte net definiearje, is de standertbreedte 100% en de standerthichte is 2px.
Yn dit foarbyld is de breedte 50% fan it heule elemint (tinke dat dizze foarbylden hjirûnder alle binne ynline-stilen. Yn in produksje-ynstellings soe dizze stilen eins yn in ekstern stylblêd skreaun wurde foar behear fan management yn al jo siden):
style = "width: 50%;">
En yn dit foarbyld is de hichte 2em:
style = "height: 2em;">
It feroarjen fan 'e grinzen kin spannend wurde
Yn moderne browsers boud de browser de line troch it oanpassen fan de grins. As jo de grins mei it styl eigenskip fuortsmite, ferdwine jo de rigel op 'e side. As jo sjogge (goed, sille jo neat sjogge, lykas de linen binne net te sjen) yn dit foarbyld:
style = "border: none;">
It oanpassen fan de grinsgrutte, kleur en styl sil de linen ferskille meitsje en hat deselde effekt yn alle moderne browsers. Bygelyks by dizze demonstraasje is de grins read, stapte, en 1px breed:
style = "border: 1px dashed # 000;">
Mar as jo de grins en de hichte feroarje, sjogge de stilen wat ferskillend yn hiel âlde browsers as se yn moderne browsers dwaan. As jo yn dit foarbyld sjen kinne as jo it yn IE7 en ûnderwerp sjen (in browser dy 't wierskyn ferâldere is en net langer stipe troch Microsoft) is in skofte ynderline dy't net yn' e oare browsers (mei IE8 of opheft) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Dizze âldere browsers binne echt net in soad fan in soart yn web-ûntwerp hjoed, omdat se foar in grut part ferfongen binne mei mear moderne mooglikheden.
Meitsje in dekorative rigel mei in eftergrûnôfbylding
Yn stee fan in kleur kinne jo in efterôfbylding foar jo HR soargje foar dat it krekt liket as jo wolle, mar dochs semantysk yn jo markearring sjen litte.
Yn dit foarbyld hawwe wy in byld brûkt dat trije welle rigels is. Troch it ynstelle as eftergrûnôfbylding mei gjin werhelling, skeakelt se in brek yn 'e ynhâld dy't sawat as jo yn boeken sjen:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
Transformearjen fan HR-eleminten
Mei CSS3 kinne jo jo linen ek nijsgjirrich meitsje. It HR-elemint is tradisjoneel in horizontale line, mar mei it CSS-ferfanger-eigenskip kinne jo wizigje hoe't se sjen. In favoriete transformaasje op it HR-elemint is om de rotaasje te feroarjen.
Jo kinne jo HR-elemint rotearje, sadat it mar gewoan lyts diagonal is:
hr {
-moz-transform: rotearje (10deg);
-webkit-transform: rotearje (10deg);
-o-transform: rotearje (10deg);
-ms-transform: rotearje (10deg);
transformaasje: rotearje (10deg);
}
Of jo kinne it rotearje sadat it folslein fertikaal is:
hr {
-moz-transform: rotearje (90deg);
-webkit-transform: rotearje (90deg);
-o-transform: rotearje (90deg);
-ms-transform: rotearje (90deg);
transformaat: rotearje (90deg);
}
Tink derom dat dit it HR hinget basearre op har hjoeddeistige lokaasje yn it dokumint, dus jo moatte it posysje oanpasse moatte om it te krijen wêr't jo it wolle. It is net oan te rieden om dit te brûken om fertikale rigels ta te ûntstean oan in ûntwerp, mar it is in manier om in interessant effekt te krijen.
In oare manier om jo linen te krijen
Ien ding dat guon minsken ynstelle foar it brûken fan it HR-elemint is te berikken op grinzen fan oare eleminten. Mar somtiden is in HR in soad handiger en makliker te brûken as besykje grinzen op te stellen. De kastelmodelproblemen fan guon browsers kinne it meitsjen fan in grins noch swierder meitsje.