Pentru a adăuga linii orizontale în stilul separator pe site-urile dvs. web, o opțiune include adăugarea de fișiere imagine ale acelor linii pagina dvs., dar acest lucru ar necesita ca browserul dvs. să preia și să încarce acele fișiere, ceea ce ar putea avea un efect negativ pe performanța site-ului. Puteți utiliza, de asemenea CSS proprietate de frontieră de adăugat hotarele care acționează ca linii fie în partea de sus, fie în partea de jos a unui element, creându-vă în mod eficient linia separatoare.
Sau - mai bine încă - folosiți HTML element pentru regula orizontală.
Elementul de regulă orizontală
Aspectul implicit al liniilor de regulă orizontale nu este ideal. Pentru a le face să arate mai frumos, adăugați CSS pentru a ajusta aspectul vizual al acestor elemente pentru a fi în conformitate cu modul în care doriți să arate site-ul dvs.
O etichetă HR de bază afișează modul în care browserul dorește să o afișeze. Browserele moderne afișează de obicei etichete HR nestilate cu o lățime de 100%, o înălțime de 2 pixeli și o margine 3D în negru pentru a crea linia.
Lățimea și înălțimea sunt consistente în toate browserele
Singurele stiluri care sunt consistente între browserele web sunt lăţime și stiluri. Acestea definesc cât de mare va fi linia. Dacă nu definiți lățimea și înălțimea, lățimea implicită este de 100%, iar înălțimea implicită este de 2 pixeli.
În acest exemplu, lățimea este de 50% din elementul părinte (rețineți că aceste exemple de mai jos includ toate stilurile în linie. Într-un cadru de producție, aceste stiluri ar fi scrise într-o foaie de stil externă pentru o gestionare ușoară pe toate paginile dvs.):
style = "width: 50%;">
Și în acest exemplu înălțimea este 2em:
style = "height: 2em;">
Schimbarea frontierelor poate fi o provocare
În browserele moderne, browserul construiește linia ajustând marginea. Deci, dacă eliminați marginea cu proprietatea de stil, linia va dispărea pe pagină. După cum puteți vedea (bine, nu veți vedea nimic, deoarece liniile vor fi invizibile) în acest exemplu:
style = "border: none;">
Ajustarea dimensiunii, culorii și stilului chenarului face ca linia să arate diferit și are același efect în toate browserele moderne. De exemplu, în această demonstrație, marginea este roșie, întreruptă și are o lățime de 1 px:
style = "border: 1px dashed # 000;">
Faceți o linie decorativă cu o imagine de fundal
În loc de culoare, definiți o imagine de fundal pentru regula dvs. orizontală, astfel încât să arate exact așa cum doriți, dar să se afișeze în continuare semantic în marcajul dvs. În acest exemplu am folosit o imagine care are trei linii ondulate. Prin setarea acestuia ca imagine de fundal fără repetare, creează o pauză în conținutul care arată aproape așa cum vedeți în cărți:
style = "height: 20px; fundal: #fff url (aa010307.gif) centru de derulare fără repetare; border: none; ">
Transformarea elementelor HR
Cu CSS3, puteți, de asemenea, să vă faceți liniile mai interesante. Elementul HR este în mod tradițional un orizontală line, dar cu proprietatea de transformare CSS, puteți schimba modul în care arată. O transformare preferată a elementului HR este schimbarea rotației.
Rotiți elementul HR astfel încât să fie doar ușor diagonal:
HR {
-moz-transformare: rotire (10deg);
-webkit-transform: rotire (10deg);
-o-transformare: rotire (10deg);
-ms-transform: rotire (10deg);
transforma: roti (10deg);
}
Sau îl puteți roti astfel încât să fie complet vertical:
HR {
-moz-transform: rotire (90deg);
-webkit-transform: rotire (90deg);
-o-transformare: rotire (90deg);
-ms-transform: rotire (90deg);
transformare: rotire (90deg);
}
Această tehnică rotește HR-ul pe baza locației sale actuale în document, deci este posibil să fie necesar să reglați poziționarea pentru a o ajunge acolo unde doriți. Nu este recomandat să utilizați acest lucru pentru a adăuga linii verticale la un design, dar este un efect interesant.
O altă modalitate de a obține linii pe paginile dvs.
Un lucru pe care îl fac unii oameni în loc să folosească elementul HR este să se bazeze pe frontierele altor elemente. Dar, uneori, un HR este mult mai convenabil și mai ușor de utilizat decât încercarea de a seta granițe. Problemele legate de modelul casetei ale unor browsere pot face ca configurarea unui chenar să fie și mai dificilă.