Lisi o le CSS e manaʻomia ai lou mafaufau i lau laupepa i luga o le uepisaite atoa, ona ave lea o fasipepa ma tuʻu faʻatasi. Aoao pe faʻapefea ona fausia se lisi faigofie 3-laina faʻatasi ma CSS.
01 o le 09
Tusi lau Taiala
E mafai ona e tusia lau ata i luga o pepa poʻo se polokalama faʻataʻitaʻi . Afai ua i ai se telefoni feaveaʻi poʻo se mamanu tele i lou mafaufau, faʻafaigofie i pusa autu e faʻapipiʻi ai le saite. O lenei mamanu lea eo mai faatasi ma lenei tusiga e tolu koluma i totonu o le vaega autu autu, faapea foi ma le ulutala ma lalo. Afai e te vaʻaia, e mafai ona e vaʻaia e tolu tutusa koluma e lautele.
A maeʻa ona tuʻuina atu lau faʻataʻitaʻiga, e mafai ona e amata mafaufau ile fua. O lenei mamanu faataitai o le a iai vaega nei:
- Le sili atu ma le 900 pika lautele
- 20 px gutter i le itu tauagavale
- 10 px i le va o koluma ma laina
- Koluma e 250px, 300px, ma le 300px lautele
- O laina pito i luga e 150px le maualuga
- O le laina pito i lalo e 100px le maualuga
02 o le 09
Tusi le ulutala autu / CSS ma fatu se mea e fai ai se koniteina
Talu ai o lenei itulau o le a avea ma pepa aloaia HTML, Amata i se atigipusa HTML avanoa
Faaopopo i le CSS tulaga masani ina ia aua nei aveese itulau tuaoi, tuaoi, ma taua . E ui lava o loʻo i ai isi tulaga faʻavae CSS mo pepa fou, o nei sitaili o le pito maualalo lea e te manaʻomia e maua ai se mamanu mama. Faaopopo i latou i le ulu o lau pepa:
I le amataina o le fausaga, tuʻu i totonu o se fagu. O nisi taimi e tupu ai e mafai ona e faʻaumatia le koneteina i se taimi mulimuli ane, ae mo le tele o laasaga laugatasia, o le i ai o le fagu elemene e faafaigofie ai ona pulea i luga o isi Upega Tafaʻilagi. O lea i totonu o le tino na tuʻu ai lenei mea:
Ma i totonu o le pepa style style CSS, tuu:
#container {}03 o le 09
Sino le Pusa
O le koneteina o loʻo faʻamatalaina ai le lautele o le upega tafaʻilagi, e faʻapea foi i soʻo se itu i fafo ma le paʻu i totonu. Mo lenei pepa, o le pusa e 870px lautele ma le 20 pixel gutter i le tauagavale. O le faʻaputu e faʻatulagaina i se auala pito i lalo, ae o le paʻu i luga o le koneteina e leai se mea e puipuia ai elemene mai le lautele e pei o le fagu.
#container {lautele: 870px; tuaoi: 0 0 0 20px; / * pito i luga taumatau pito i lalo * / puipui: 0; }Afai e te faʻapolopolo lau pepa i le taimi nei, e faigata ona e vaʻai i le koneteina ona e leai se mea oi ai. Afai e te faaopoopo i ai le tusiga, o le a mafai ona e iloa manino le elemene o le pusa.
04 o le 09
Faʻaaogā se Faʻailoga Muamua mo le Ulu Ulu
E faʻapefea ona e filifili e faʻasolo le laina ulutala e faalagolago tele i mea oi ai. Afai o le laina ulutala o le ai ai se pine logo ma le ulutala, ona faʻaaogaina lea o le ulutala ulutala (
) e sili atu le taua nai lo le faʻaaogaina o se . E mafai ona e faʻasolo le ulutala i le auala lava e tasi e te faia ai se vavae, ma e te aloese mai fasi pepa.
O le HTML mo le laina ulutala e alu i le pito i luga o le koneteina ma e pei o lenei:
Laʻu Luga o le Lulu h1>
Ona faatulaga ai lea o laina lanu mumu i le pito i lalo ina ia mafai ai ona e iloa le mea e gata ai, o le tafaala ma le tapunipuni e leai se mea, o le lautele e oo i le 100% ma le maualuga i le 150px:
#container h1 {laina: 0; paʻu: 0; lautele: 100%; maualuga: 150px; fetolofi: tauagavale; tuaoi-lalo: # c00 solid 3px; } Aua neʻi galo le faaseʻeina o lenei elemene i le folau: tauagavale; meatotino. O le ki i le tusiaina o le Lisi o le CSS o le faʻailogaina o mea uma - e oʻo lava i mea e tutusa le lautele e pei o le fagu. I lena auala, e masani ona e iloa le mea o le ai ai elemene ile itulau.
O le CSS o le na filifilia filifilia na o sitaili H1 i totonu o le #container element.
05 o le 09
Ina ia maua ni koluma se tolu, Amata ile fausia o koluma e lua
A e fausia se faʻatulagaga e tolu-laina ma le CSS, e tatau ona e vaevaeina lau laasaga ile vaega lua. O lea mo lenei laulau tolu-koluma, o le ogatotonu ma le taumatau ma faʻapipiʻi ma tuʻu i tafatafa o le agavale tauagavale i se laina lua-laina pe a fai o le koluma agavale e 250px lautele, ma le koluma taumatau e 610px lautele (300 taʻitasi mo koluma e lua , ma le 10px mo le va i le va oi latou).
O le HTML e pei o lenei:
E mafai ona e faʻataunuʻuina le mea e tasi. E mafai ona e faia se mea e fai mo oe, e le o le mea lea. I le faʻataʻitaʻiga i le voluptate quis nostrud exercitation eu fugiat nulla pariatur. E leai se isi mea e mafai ona maua mai i le taimi nei, pe afai foi o le a le mea e tatau ai. P> div>
Mo nisi taimi, O le galuega ma le mea e fai. Velit esse cillum dolor eu fugiat nulla pariatur. P> div>
O faʻamaumauga i luga o le laina i totonu o koluma e sili atu ona iloagofie pe a suʻeina. E foliga le CSS i lenei:
#container # col1 {lautele: 250px; fetolofi: tauagavale; } #container # col2outer {lautele: 610px; fetolofi: saʻo; tuaoi: 0; paʻu: 0; } O le koluma i le itu tauagavale e lele i le itu tauagavale, aʻo le isi o loʻo lele i le itu taumatau. Talu ai o le lautele lautele o koluma uma e 860px, e 10px gutter i le va oi latou.
06 o le 09
Faʻaopoopo Lua Koluma i Totonu o le Koluma Lona Lua Lautele
Ina ia fatuina ni koluma se tolu, ia faaopoopo le lua divas i totonu o le koluma lona lua, e pei lava ona e faaopoopo 2 divs i totonu o le koneteina i le laasaga mulimuli. O le HTML e pei o lenei:
E le gata i lea, ae le o le taimi e fai ai se isi mea fou. O le galuega ma le mea e fai. O le a le mea e tatau ona e faia i le taimi e tasi. P> div>
O le taimi o le ola, o le a avea ai ma se tagata e sili ona lelei. Ullam corporis suscipit laboriosam, ma o le a le mafai ona e maua mai. E le gata i lea, e le gata i lea, o le a le mafai foi ona maua mai i le taimi o le taimi e le mafai ai e le tagata ona galue i le taimi nei. P> div> div>
Ma o le CSS e foliga faapenei:
# col2outer # col2mid {lautele: 300px; fetolofi: tauagavale; } # col2outer # col2side {lautele: 300px; fetolofi: saʻo; } Ona o nei pusa lapoa e 300px i totonu o le pusa lautele 610px, o le a toe iai se 10px gutter i le va oi latou.
07 o le 09
Faʻaopoopo i le pito i lalo
I le taimi nei o le isi itu o le itulau e faʻaigoaina, e mafai ona e faʻaopopo i le pito i lalo. Faʻaaoga se vaevaega mulimuli i se "footer" id, ma faaopoopo mea e te mafai ona e vaʻaia. E mafai foi ona e faaopoopo se tuaoi i le pito i luga, o lea o le ae iloa ai le mea e amata ai.
Le HTML:
O le HTML mo le laina ulutala e alu i le pito i luga o le koneteina ma e pei o lenei:
Laʻu Luga o le Lulu h1>
Ona faatulaga ai lea o laina lanu mumu i le pito i lalo ina ia mafai ai ona e iloa le mea e gata ai, o le tafaala ma le tapunipuni e leai se mea, o le lautele e oo i le 100% ma le maualuga i le 150px:
#container h1 {laina: 0; paʻu: 0; lautele: 100%; maualuga: 150px; fetolofi: tauagavale; tuaoi-lalo: # c00 solid 3px; }Aua neʻi galo le faaseʻeina o lenei elemene i le folau: tauagavale; meatotino. O le ki i le tusiaina o le Lisi o le CSS o le faʻailogaina o mea uma - e oʻo lava i mea e tutusa le lautele e pei o le fagu. I lena auala, e masani ona e iloa le mea o le ai ai elemene ile itulau.
O le CSS o le na filifilia filifilia na o sitaili H1 i totonu o le #container element.
05 o le 09
Ina ia maua ni koluma se tolu, Amata ile fausia o koluma e lua
A e fausia se faʻatulagaga e tolu-laina ma le CSS, e tatau ona e vaevaeina lau laasaga ile vaega lua. O lea mo lenei laulau tolu-koluma, o le ogatotonu ma le taumatau ma faʻapipiʻi ma tuʻu i tafatafa o le agavale tauagavale i se laina lua-laina pe a fai o le koluma agavale e 250px lautele, ma le koluma taumatau e 610px lautele (300 taʻitasi mo koluma e lua , ma le 10px mo le va i le va oi latou).
O le HTML e pei o lenei:
E mafai ona e faʻataunuʻuina le mea e tasi. E mafai ona e faia se mea e fai mo oe, e le o le mea lea. I le faʻataʻitaʻiga i le voluptate quis nostrud exercitation eu fugiat nulla pariatur. E leai se isi mea e mafai ona maua mai i le taimi nei, pe afai foi o le a le mea e tatau ai. P> div>
Mo nisi taimi, O le galuega ma le mea e fai. Velit esse cillum dolor eu fugiat nulla pariatur. P> div>
O faʻamaumauga i luga o le laina i totonu o koluma e sili atu ona iloagofie pe a suʻeina. E foliga le CSS i lenei:
#container # col1 {lautele: 250px; fetolofi: tauagavale; } #container # col2outer {lautele: 610px; fetolofi: saʻo; tuaoi: 0; paʻu: 0; }O le koluma i le itu tauagavale e lele i le itu tauagavale, aʻo le isi o loʻo lele i le itu taumatau. Talu ai o le lautele lautele o koluma uma e 860px, e 10px gutter i le va oi latou.
06 o le 09
Faʻaopoopo Lua Koluma i Totonu o le Koluma Lona Lua Lautele
Ina ia fatuina ni koluma se tolu, ia faaopoopo le lua divas i totonu o le koluma lona lua, e pei lava ona e faaopoopo 2 divs i totonu o le koneteina i le laasaga mulimuli. O le HTML e pei o lenei:
E le gata i lea, ae le o le taimi e fai ai se isi mea fou. O le galuega ma le mea e fai. O le a le mea e tatau ona e faia i le taimi e tasi. P> div>
O le taimi o le ola, o le a avea ai ma se tagata e sili ona lelei. Ullam corporis suscipit laboriosam, ma o le a le mafai ona e maua mai. E le gata i lea, e le gata i lea, o le a le mafai foi ona maua mai i le taimi o le taimi e le mafai ai e le tagata ona galue i le taimi nei. P> div> div>
Ma o le CSS e foliga faapenei:
# col2outer # col2mid {lautele: 300px; fetolofi: tauagavale; } # col2outer # col2side {lautele: 300px; fetolofi: saʻo; }Ona o nei pusa lapoa e 300px i totonu o le pusa lautele 610px, o le a toe iai se 10px gutter i le va oi latou.
07 o le 09
Faʻaopoopo i le pito i lalo
I le taimi nei o le isi itu o le itulau e faʻaigoaina, e mafai ona e faʻaopopo i le pito i lalo. Faʻaaoga se vaevaega mulimuli i se "footer" id, ma faaopoopo mea e te mafai ona e vaʻaia. E mafai foi ona e faaopoopo se tuaoi i le pito i luga, o lea o le ae iloa ai le mea e amata ai.
Le HTML: