Fè enteresan liy kap sou paj entènèt ak Tags HR
Si ou bezwen ajoute liy orizontal, séparation-style sou sit entènèt ou, ou gen yon opsyon kèk. Ou ta ka ajoute dosye imaj aktyèl nan liy sa yo nan paj ou a, men sa ki ta mande pou navigatè ou a rekipere ak chaje dosye sa yo, ki ta ka gen yon enpak negatif sou pèfòmans sit.
Ou ta ka itilize pwopriyete fwontyè CSS pou ajoute sou fwontyè ki aji kòm liy swa nan tèt ou oswa nan pati anba yon eleman, efektivman kreye liy séparation ou a.
Finalman, ou ka itilize eleman HTML la pou règ orizontal la - a
Eleman nan Règ orizontal
Si ou te janm mete yon eleman sou yon paj entènèt, ou gen anpil chans dekouvri ke fason an default ke liy sa yo ap parèt yo pa ideyal. Sa vle di ke ou bezwen ale nan CSS ajiste aparans la vizyèl nan eleman sa yo yo dwe nan liy ak ki jan ou vle sit ou a gade.
Yon tag debaz HR parèt fason navigatè a vle montre li. Navigatè modèn tipikman montre unstyled HR Tags ak yon lajè 100%, yon wotè 2px, ak yon fwontyè 3D nan nwa yo kreye liy lan.
Isit la se yon egzanp nan yon eleman HR estanda oswa ou ka wè nan imaj sa a ki jan yon HR unstyled sanble nan navigatè modèn.
Lajè ak Wotè yo konsistan atravè navigatè yo
Styles yo sèlman ki konsistan atravè navigatè entènèt yo se lajè a ak Styles. Sa yo defini ki jan gwo liy lan pral. Si ou pa defini lajè a ak wotè lajè a default se 100% ak wotè a default se 2px.
Nan egzanp sa a lajè a se 50% nan eleman paran an (note egzanp sa yo anba a tout gen ladan estil alimèt. Nan yon anviwònman pwodiksyon, estil sa yo ta aktyèlman ekri nan yon fèy style ekstèn pou fasilite nan jesyon nan tout paj ou yo):
style = "lajè: 50%;">
Ak nan egzanp sa a wotè a se 2em:
style = "wotè: 2em;">
Chanje Borders yo ka difisil
Nan navigatè modèn, navigatè a bati liy lan pa ajiste fwontyè a. Se konsa, si ou retire fwontyè a ak pwopriyete a style, liy lan pral disparèt nan paj la. Kòm ou ka wè (byen, ou pa pral wè anyen, menm jan liy yo pral envizib) nan egzanp sa a:
style = "fontyè: okenn;">
Ajiste gwosè fwontyè, koulè, ak style ap fè liy lan gade diferan e li gen efè a menm nan tout navigatè modèn. Pou egzanp, nan demonstrasyon sa a fwontyè a se wouj, tirè, ak 1px lajè:
style = "fwontyè: 1px te tire # 000;">
Men, si ou chanje fwontyè a ak wotè a, estil yo gade yon ti kras diferan nan navigatè trè demode pase yo fè nan navigatè modèn. Kòm ou ka wè nan egzanp sa a, si ou wè li nan IE7 ak pi ba a (yon navigatè ki se tèribleman demode ak pa sipòte pa Microsoft) gen yon liy enteryè bizote ki pa montre nan lòt navigatè yo (ki gen ladan IE8 ak moute) :
style = "wotè: 1.5em; lajè: 25em; fwontyè: 1px solid # 000;">
Moun sa yo navigatè antiqued yo se reyèlman pa anpil nan yon enkyetid nan konsepsyon sit entènèt jodi a, depi yo te lajman ranplase ak plis opsyon modèn.
Fè yon liy dekoratif ak yon Imaj Istorik
Olye pou yon koulè, ou ka defini yon imaj background pou HR ou konsa ke li sanble egzakteman jan ou vle li a, men yo toujou montre semantically nan markeup ou a.
Nan egzanp sa a nou itilize yon imaj ki nan twa liy tranble. Pa mete li kòm imaj la background ki pa gen okenn repete, li kreye yon repo nan kontni an ki sanble prèske tankou ou wè nan liv:
style = "wotè: 20px; background: #fff URL (aa010307.gif) pa gen okenn-repete scroll sant; fontyè: okenn;">
Transfòme HR Eleman
Avèk CSS3, ou ka tou fè liy ou plis enteresan. Eleman nan HR se tradisyonèlman yon liy orizontal , men ak CSS transfòme pwopriyete a, ou ka chanje ki jan yo gade. Yon transfòmasyon pi renmen sou eleman HR se chanje wotasyon an.
Ou ka Thorne eleman HR ou pou ke li nan jis yon ti kras dyagonal:
hr {
-moz-transfòme: Thorne (10deg);
-webkit-transfòme: Thorne (10deg);
-o-transfòme: Thorne (10deg);
-ms-transfòme: Thorne (10deg);
transfòme: Thorne (10deg);
}}
Oswa ou ka Thorne li konsa ke li nan konplètman vètikal:
hr {
-moz-transfòme: Thorne (90deg);
-webkit-transfòme: Thorne (90deg);
-o-transfòme: Thorne (90deg);
-ms-transfòme: Thorne (90deg);
transfòme: vire (90deg);
}}
Sonje ke sa a wotasyon HR la ki baze sou kote li ye kounye a nan dokiman an, kidonk, ou ka bezwen ajiste pwezante a jwenn li kote ou vle li. Li pa rekòmande yo sèvi ak sa a yo ajoute liy vètikal nan yon konsepsyon, men li se yon fason yo ka resevwa yon efè enteresan.
Yon lòt fason pou jwenn liy sou paj ou
Youn nan bagay ke gen kèk moun ki olye pou yo itilize eleman HR se pou konte sou fwontyè lòt eleman yo. Men pafwa yon HR se yon anpil plis pratik ak pi fasil yo itilize pase ap eseye mete kanpe sou fwontyè yo. Pwoblèm nan modèl bwat nan kèk navigatè ka fè mete kanpe yon fwontyè menm trickier.