Sèvi ak pwopriyete a flote CSS nan Design Web Layouts paj
Pwopriyete CSS la se yon pwopriyete trè enpòtan pou layout. Li pèmèt ou pozisyon desen paj wèb ou egzakteman jan ou vle yo montre-men nan lòd yo sèvi ak li ou gen konprann ki jan li fonksyone.
Nan yon fèy style, pwopriyete a flote CSS sanble sa a:
.right {float: right; }}
Sa a di navigatè a ke tout bagay ak klas la nan "dwa" yo ta dwe flote sou bò dwat la.
Ou ta bay li tankou sa a:
klas = "dwa" />
Ki sa ou ka float ak CSS flote pwopriyete a?
Ou pa ka flote chak eleman nan yon paj entènèt. Ou ka sèlman flote eleman blòk-nivo . Sa yo se eleman ki pran yon blòk nan espas sou paj la, tankou imaj (), paragraf (), divizyon (), ak lis ().
Lòt eleman ki afekte tèks, men pa kreye yon bwat sou paj la yo rele eleman inline epi yo pa ka flote. Sa yo se eleman tankou span (), liy repo (), fò anfaz (), oswa italik ().
Ki kote yo float?
Ou ka flote eleman sou bò dwat la oswa bò gòch la. Nenpòt eleman ki swiv eleman nan flotan pral koule alantou eleman nan flotan sou lòt bò a.
Pou egzanp, si mwen flote yon imaj sou bò gòch la, nenpòt ki tèks oswa lòt eleman apre li pral koule bò kote l 'sou bò dwat la. Men, si mwen flote yon imaj sou bò dwat la, nenpòt ki tèks oswa lòt eleman apre li pral koule bò kote l 'sou bò gòch la. Yon imaj ki mete nan yon blòk tèks san yo pa nenpòt style flote aplike nan li pral montre sepandan se navigatè a mete yo montre imaj.
Sa a se anjeneral ak premye liy lan nan tèks sa yo parèt nan pati anba a nan imaj la.
Ki jan lwen yo pral flote?
Yon eleman ki te flote ap deplase osi lwen bò gòch la oswa dwa nan eleman an veso kòm li kapab. Rezilta sa a nan plizyè sitiyasyon diferan depann sou ki jan kòd ou ekri.
Pou egzanp sa yo, mwen pral k ap flote yon ti eleman DIV sou bò gòch la:
- Si eleman an flotan pa gen yon lajè pre-defini, li pral pran anpil espas orizontal jan sa nesesè ak ki disponib, kèlkeswa flote an. Remak: kèk navigatè eseye mete eleman bò kote eleman flotan lè lajè a pa defini-anjeneral bay eleman ki pa flote a sèlman yon ti kantite espas. Se konsa, ou ta dwe toujou defini yon lajè sou eleman flotan.
- Si eleman an veso se eleman HTML la, DIV nan flote pral chita sou Marge gòch nan paj la.
- Si eleman an veso se pwòp tèt li pa yon lòt bagay, DIV nan flote pral chita sou Marge gòch nan veso a.
- Ou ka nich eleman flotan, e ke sa ka lakòz nan flote a fini nan yon kote ki etone. Pou egzanp, sa a flote se yon DIV gòch floited andedan yon DIV dwa flote.
- Eleman ki flote pral chita bò kote youn ak lòt si gen plas nan veso a. Pou egzanp, veso sa a gen twa 100px eleman DIV ki te flote nan yon veso 400px lajè.
Ou ka menm itilize flote yo kreye yon layout galri foto. Ou mete chak thumbnail (li travay pi byen lè yo tout gwosè a menm) nan yon DIV ak caption la ak flote nan eleman yo DIV nan veso a.
Pa gen pwoblèm ki jan lajè fenèt navigatè a se, thumbnails yo pral liy moute egzakteman menm jan an.
Vire Off Flot la
Yon fwa ou konnen ki jan yo ka resevwa yon eleman nan flote, li enpòtan konnen ki jan yo fèmen flote an. Ou fèmen flote a ak pwopriyete klè CSS la. Ou ka klè flote gòch, flote dwa oswa toude:
klè: kite;
klè: dwa;
klè: tou de;
Nenpòt eleman ke ou mete pwopriyete a klè pou ap parèt anba a yon eleman ki flotan ki direksyon. Pou egzanp, nan egzanp sa a de premye paragraf yo nan tèks yo pa otorize, men twazyèm lan se.
Jwe ak valè a klè nan eleman diferan nan dokiman ou yo ka resevwa efè layout diferan.
Youn nan kouman yo ki pi enteresan flote se yon seri de imaj desann kolòn nan dwa oswa kite akote paragraf nan tèks. Menm si tèks la se pa lontan ase yo woule sot pase imaj la, ou ka itilize klè a sou tout imaj yo asire ke yo parèt nan kolòn nan olye ke pwochen nan imaj la anvan yo.
HTML la (repete paragraf sa a):
Ou pa gen dwa pou w fè yon ti tan pou w fè sa pou w fè sa. Kipidon pa gen okenn prekòs, nan travay ak anpil lòt moun.
CSS la (nan flote imaj yo sou bò gòch la):
img.float {flote: gòch;
klè: kite;
Marge: 5px;
}}
Ak sou bò dwat la:
img.float {flote: dwa;
klè: dwa;
Marge: 5px;
}}
Itilize Flote pou Layout
Yon fwa ou konprann ki jan pwopriyete a flote travay, ou ka kòmanse lè l sèvi avèk li nan mete deyò paj wèb ou. Sa yo se etap sa yo mwen pran yo kreye yon paj entènèt flotan:
- Design Layout la (sou papye oswa nan yon zouti grafik oswa nan tèt mwen).
- Detèmine kote divizyon paj yo pral ye.
- Detèmine lajè yo nan kontenè sa yo divès kalite ak eleman ki nan yo.
- Flote tout bagay. Menm eleman an veso ki eksteryè flotan sou bò gòch la pou ke mwen konnen ki kote li pral nan relasyon ak pò a View navigatè.
Osi lontan ke ou konnen larjer yo (pousantaj yo bon) nan seksyon Layout ou a, ou ka itilize pwopriyete a flote mete yo kote yo fè pati nan paj la. Ak bagay la bon se, ou pa bezwen enkyete kòm anpil sou modèl la bwat yo te diferan pou Internet Explorer oswa Firefox.