Web orrialde interesgarriak bilatzeko HR etiketak erabiliz
Horizontala, bereizi estiloko lerroak zure webguneetara gehitu behar badituzu, aukera batzuk dituzu. Lerro horietako benetako irudi-fitxategiak zure orrialdera gehi ditzakezu, baina zure nabigatzaileak fitxategiak berreskuratu eta kargatu beharko lituzke, horrek eragin negatiboa izan dezake webgunearen errendimenduan.
CSS mugako propietateak erabili ahal izango dituzu lerro gisa jarduten duten mugak gehitzeko, elementu baten goialdean edo behealdean, modu eraginkorrean zure bereizmena lerroan sortuz.
Azkenean, HTML elementua erabil dezakezu arau horizontalerako
Horizontal Rule Element
Web orri batean elementu bat jarri baduzu, litekeena da lerro hauek bistaratzen diren modu lehenetsian ez direla ideala. Horrek esan nahi du CSS-ra joan behar duzula elementu horien itxura bisuala doitzeko, zure webgunea begiratu nahi duzun moduan.
Oinarrizko HR etiketa bat azaltzen da nabigatzaileak nahi duen moduan. Nabigatzaile modernoak normalean erakutsi gabeko HR etiketak% 100eko zabalera dute, 2px-ko altuera eta 3Dko ertza beltzez lerroa sortzeko.
Hona hemen HR elementu estandarraren adibide bat edo irudi honetan ikusi ahal izango duzu nola unstyled HR arakatzaile moderno itxura.
Zabalera eta altuera koherenteak dira nabigatzaile guztietan
Nabigatzaileen artean koherente diren estilo bakarrak zabalera eta estiloak dira. Hauek lerro handiak definituko dituzte. Zabalera eta altuera zehazten ez badituzu, zabalera lehenetsia% 100 da eta altuera lehenetsia 2px da.
Adibide honetan, zabalera elementuaren% 50 da (azpimarratu beheko adibide hauek guztiak barne lerroen artean daude. Produkzio-ezarpenean, estilo horiek kanpoko estilo-orri batean idatziko dira, orrialde guztien kudeaketa errazean):
style = "width: 50%;">
Eta, adibide honetan, altuera 2em da:
style = "height: 2em;">
Mugak aldatzea erronka izan daiteke
Nabigatzaile modernoetan, nabigatzaileak lerroa eraikitzen du mugaren doikuntza. Estiloaren propietatearen muga ezabatzen baduzu, lerroan orrialdean desagertu egingo da. Ikusten duzun bezala (ondo, ez duzu ezer ikusiko, lerroak ikusezin gisa izango dira) adibide honetan:
style = "border: none;">
Mugen tamaina, kolorea eta estiloa doitzea lerro itxura ezberdina izango du eta nabigatzaile moderno guztietan eragina izango du. Esate baterako, manifestazio honetan mugak gorriak, marraskatuak eta 1px zabalak dira:
style = "border: 1px dashed # 000;">
Mugak eta altuera aldatzen badituzu, estiloek nabigatzaile modernoetan baino apur bat arinagoak diren nabigatzaile desberdinak dituzte. Adibide honetan ikus dezakezun bezala, IE7 eta behean ikusten baduzu (nabigatzailea zaharkituta dago eta Microsoftek ez du onartzen), beste arakatzaileek ez dute beveled barruko lerroan (IE8 eta gora barne). :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Antiguatutako arakatzaileek ez dira gaur egun diseinuaren inguruko kezka handirik, neurri handi batean ordeztuagoak izan baitira.
Dekorazio-lerro bat egin Aurrekaldeko irudiarekin
Kolore baten ordez, zure HRko atzeko planoko irudia definitu dezakezu nahi duzun moduan, baina semantikoki bistaratzen du zure markan.
Adibide honetan, hiru lerro ondoko lerroetako irudia erabili dugu. Atzeko planoko irudirik gabe errepikatu gabe, liburuetan ikusten dituzun edukien atsedenaldia sortzen du.
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
HR Elementuak eraldatzen
CSS3-rekin ere, zure lerroak interesgarriagoak izan ditzakezu. HR elementua tradizionalki lerro horizontal bat da, baina CSS transformatutako propietatearekin, itxura nola aldatzen duzun dezakezu. HR elementuko eraldaketa gogokoena biraketa aldatzea da.
Zure HR elementua biratu dezakezu, beraz, pixka bat diagonala da:
hr {
-moz-transform: biratu (10deg);
-webkit-transform: biratu (10deg);
-o-eraldatu: biratu (10deg);
-ms-transformar: biratu (10deg);
eraldatu: biratu (10deg);
}
Edo biratu dezakezu, beraz, erabat bertikala da:
hr {
-moz-transformatu: biratu (90deg);
-webkit-transform: biratu (90deg);
-o-eraldatu: biratu (90deg);
-ms-transform: biratu (90deg);
eraldatu: biratu (90deg);
}
Gogoan izan HR dokumentuaren uneko kokapenean oinarritutako HR biratzen duela, beraz, posizionamendua egokitu beharko duzu nahi duzun lekuan kokatzeko. Ez da gomendagarria hau erabiltzea diseinuaren lerro bertikalak gehitzeko, baina efektu interesgarria lortzeko modua da.
Beste modu bat Lines zure orrialdeetan
Pertsona batzuek HR elementua erabili beharrean, beste elementu batzuen mugetan oinarritzen da. Batzuetan, HR bat askoz erosoa eta errazagoa da mugak konfiguratzen saiatzea baino. Nabigatzaile batzuen kutxako ereduen arazoek mugarik konfiguratu dezakete.