Uluhlu lweCSS ludinga ukuba ucinge ngewebsite yakho yendawo yonke, uze uthathe izicande uze uzibeke ndawonye. Funda indlela yokwakha ulungelelwano olulula lwe-3 kunye neCSS.
01 ka 09
Dweba iWindows
Unokwenza isakhiwo sakho kwiphepha okanye kwiprogram yemifanekiso . Ukuba sele usenomgca wocingo okanye ucwangciso olubanzi engqondweni, yenza kube lula kwiibhokisi eziphambili ezenza isayithi. Olu qulunqo oluhambelana nale nqaku liqukethe iikholomu ezintathu kwingingqi esemgangathweni, kunye nenhloko kunye neenyawo. Ukuba ukhangele ngokukhawuleza, uya kubona ukuba iikholomu ezintathu azilingani ngobubanzi.
Emva kokuba uludwe lwakho lubekwe, ungaqala ukucinga ngemilinganiselo. Lo mzekelo uyilo luya kuba neendlela ezilandelayo ezisisiseko:
- Akukho ngaphaya kwama-pixels angama-900
- I-px gutter 20 ekhohlo
- 10 px phakathi kwamakholomu kunye nemiqolo
- Amakholomu anama-250px, 300px, kunye no-300px ububanzi
- Umqolo ophezulu u-150px ubude
- Umgca ongaphantsi ngowama-100px ubude
02 we-09
Bhala i-HTML / CSS eyiSiseko kwaye Yakha i-Container Element
Ekubeni eli phepha liza kuba ngumqulu we HTML, Qala ngesitya se-HTML esingenalutho
Yongeza kwiifayile ezisisiseko ze-CSS ukuya kwiphepha elisezantsi, imida, kunye neepaddings . Nangona kukho ezinye iindlela eziqhelekileyo zeCSS zamaphepha amasha, ezi zintlobo zincinci kufuneka ube nesakhiwo esicocekileyo. Bangeze entloko yombhalo wakho:
Ukuqala ukwakha isakhiwo, faka kwisixhobo sekhonkco. Ngamanye amaxesha kwenzeka ukuba ungayikhupha ingqayi kamva, kodwa kwiindawo ezininzi ezizimeleyo, ukuba isakhi sekhonkco senza kube lula ukulawula kuzo zonke izikhangeli zewebhu. Ngoko emzimbeni beka oku:
Kwaye kwiphepha lesitayela seCSS, faka:
#container {}03 ka 09
Isitayela seContainer
Isithintelo sichaza indlela okubanzi okubhaliweyo kwephepha lewebhu kuza kuba, kunye nawaphi na amanxweme azungeze ngaphandle kunye nokupakisha ngaphakathi ngaphakathi. Kule catshulwa, isitya sinama-870px ububanzi kunye nesitya se-pixel esingu-20 ngakwesobunxele. Umgudu wamanzi uhlelwe ngesitayela semida, kodwa i-padding kwi-container ikhutshwe ukukhusela nayiphi na into ephakamileyo ukuba ibe yinto ephakamileyo njengoko isitya.
#container {ububanzi: 870px; umgama: 0 0 0 20px; / * phezulu ngakwesobunxele ngasekhohlo * ngasekhohlo: 0; }Ukuba ulondoloza idokhumenti yakho ngoku, kuya kuba nzima ukubona isitya kuba akukho nto kuyo. Ukuba ungeze isicatshulwa sendawo, uya kuba nokubona ngokucacileyo icandelo lesitya.
04 we-09
Sebenzisa iTek Tag head for Header
Indlela ogqiba ngayo ukutyikitya umgca weentloko uncike kakhulu kwizinto ezikuyo. Ukuba umgca wokubhaliweyo uya kuba nomfanekiso wesicatshulwa kunye nomxholo ophezulu, ngoko usebenzisa itekisi yentloko (
) yenza ingqiqo kunokuba usebenzisa . Unokwakheka umxholo wendlela efana ngayo nendlela oyikhetha ngayo i-div, kwaye ugwema i-tags ngaphandle.
I-HTML yomgca wenhloko iya kwiphezulu yesitya kwaye ibonakala ngathi:
I-Header Row
Emva koko, ukuseta izitala kuyo, umda obomvu wongezwa ngezantsi ukwenzela ukuba ubone apho uphela khona, iindawo ezisemagqabini kunye ne-padding zikhutshwe ngaphandle, ububanzi bubekwe kwi-100% kwaye ubude buyi-150px:
#container h1 {umgama: 0; ukupakisha: 0; ububanzi: 100%; ubude: 150px; float: ekhohlo; umda wezantsi: # c00 eqinile 3px; } Ungalibali ukuthambisa le nto nge float: ngakwesobunxele; propati. Isihluthulelo sokubhala izakhiwo ze-CSS kukutshiza yonke into - nokuba nezinto ezibubanzi obufanayo njengoko isitya. Ngaloo ndlela, uhlala wazi apho izakhiwo ziza kulala kwiphepha.
Umkhethi wezala weCSS usebenzise izitayela kuphela kwiimpawu ze-H1 eziphakathi kwento engumgca.
05 ka 09
Ukufumana iikholam ezintathu, Qala ngeZakhiwo ezimbini
Xa ukwakhiwa kwekholomu ezintathu kunye neCSS, kufuneka uhlule uluhlu lwakho kumaqela amabini. Ngaloo ndlela ulungelelwano lwimihlathi emithathu, kunye nekhola kunye nekhohlo kwaye ubeke eceleni kwekholam ekhohlo kwimilo emibini yekholomu apho ikholam elincinci lingama-250px ububanzi, kwaye ikholam elungileyo liyi-610px ububanzi (300 nganye kwiikholam ezimbini , kunye ne-10px emgumbini phakathi kwabo).
I-HTML ibonakala ngathi:
U-ali alixhobise ex e commodo consequat. Velit esse cillum dolore i-ad e-adream, i-lorem ipsum dolor sit amet. Ukubuyiselwa kwakhona kwi-voluptate quis nostrud ukusetyenziswa kokusetyenziswa kwefayile. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex e-comodo consequat.
Uze usebenzise umgangatho ophezulu, usebenzise i-tempor incididunt ullamco laboris nisi. Usebenze kunye nenkolo yamarqu. Velit esse cillum dolore eu fugiat nulla pariatur.
Umbhalo wesibambiso kwiikholam wenza ukuba kubonakale xa kuhlolwa. I-CSS ibonakala ngathi:
#container # col1 {ububanzi: 250px; float: ekhohlo; } #container # col2outer {ububanzi: 610px; float: kwesokudla; umgama: 0; ukupakisha: 0; } Ikholomu ngakwesobunxele ifakelwe ngakwesobunxele, ngelixa elinye lijikeleza ngakwesokudla. Ngenxa yokuba ububanzi bebonke zombini iikholomu ngu-860px, kukho umbhobho we-10px phakathi kwabo.
06 ka 09
Yongeza iikholamu ezimbini ngaphakathi kwekholeji yesibini
Ukwakha iikholamu ezintathu, faka ii-divs ngaphakathi kwikholamu yesibini ebanzi, njengokuba ungeze ii-div divs ngaphakathi kwikholamu yenkomo kwisinyathelo sokugqibela. I-HTML ibonakala ngathi:
Yenza i-ad minam adim, uze wenze i-tempor incididunt ullamco laboris nisi. Usebenze kunye nenkolo yamarqu. Velit esse cillum dolore eu fugiat nulla pariatur.
I-temporary libero i-tempore, i-viaptas ihleli njengento ecacileyo. Ullam corporis suscipit laboriosam, i-magm aliquam quaerat voluptatem. Itaque earum i-hic i-tenetur i-sapiente select, i-perspetatis i-unde omnis tempor incidunt usebenza kunye nelolo.
Kwaye iCSS ibonakala ngathi:
# col2outer # col2mid {ububanzi: 300px; float: ekhohlo; } # col2outer # col2side {ububanzi: 300px; float: kwesokudla; } Ekubeni iibhokisi ezi-300px ebanzi ziphakathi kwebhodi ebanzi ye-610px, kuya kuphinda kubekho umbhobho we-10px phakathi kwabo.
07 ka 09
Yongeza kwi-Footer
Kaloku ukuba zonke ezinye iphepha libizwa, ungongeza kwi-footer. Sebenzisa i-div yokugqibela nge-"footer" id, kwaye wongeza umxholo ukuze uyibone. Ungongeza kwakhona umda phezulu, ngoko uyazi apho uqala khona.
I HTML:
Copyright © 2017
CSS:
#container #footer {float: kwesobunxele; ububanzi: 870px; phezulu-umda: # c00 i-3px eqinile; } 08 ka 09
Yongeza kwiiStyles zakho kunye nokuQinisekisa
Ngoku ukuba uluhlu luphelile, ungaqala ukongeza izitayela zakho kunye nomxholo. Khumbula ukuba imida ehlokweni kunye neenyawo zongezwa ukuba zibonise amacandelo omhlathi, ngokuthe ngqo ukuyila.
09 we 09
I-HTML yokugqibela / iCSS
Nantsi yonke ixwebhu, i-HTML kunye ne-CSS:
Umbhalo ongezantsi html, umzimba {umgama: 0px; ukupakisha: 0px; Umda: 0px; } # ukhuseleko {ububanzi: 870px; umgama: 0 0 0 20px; / * phezulu ngakwesobunxele ngasekhohlo * ngasekhohlo: 0; umbala ongasemva: #fff; } # unxibelelwano h1 {umgama: 0; ukupakisha: 0; ububanzi: 100%; ubude: 150px; float: ekhohlo; umda wezantsi: # c00 eqinile 3px; } #container # col1 {ububanzi: 250px; float: ekhohlo; } #container # col2outer {ububanzi: 610px; float: kwesokudla; umgama: 0; ukupakisha: 0; } # col2outer # col2mid {ububanzi: 300px; float: ekhohlo; } # col2outer # col2side {ububanzi: 300px; float: kwesokudla; } #container #footer {float: ngakwesobunxele; ububanzi: 870px; phezulu-umda: # c00 i-3px eqinile; } I-Header Row Ulungelelanise ex e commodo consequat
Yenza umncinci umncinane.
Nam libero tempore.
Copyright © 2008
I-HTML yomgca wenhloko iya kwiphezulu yesitya kwaye ibonakala ngathi:
I-Header Row
Emva koko, ukuseta izitala kuyo, umda obomvu wongezwa ngezantsi ukwenzela ukuba ubone apho uphela khona, iindawo ezisemagqabini kunye ne-padding zikhutshwe ngaphandle, ububanzi bubekwe kwi-100% kwaye ubude buyi-150px:
#container h1 {umgama: 0; ukupakisha: 0; ububanzi: 100%; ubude: 150px; float: ekhohlo; umda wezantsi: # c00 eqinile 3px; }Ungalibali ukuthambisa le nto nge float: ngakwesobunxele; propati. Isihluthulelo sokubhala izakhiwo ze-CSS kukutshiza yonke into - nokuba nezinto ezibubanzi obufanayo njengoko isitya. Ngaloo ndlela, uhlala wazi apho izakhiwo ziza kulala kwiphepha.
Umkhethi wezala weCSS usebenzise izitayela kuphela kwiimpawu ze-H1 eziphakathi kwento engumgca.
05 ka 09
Ukufumana iikholam ezintathu, Qala ngeZakhiwo ezimbini
Xa ukwakhiwa kwekholomu ezintathu kunye neCSS, kufuneka uhlule uluhlu lwakho kumaqela amabini. Ngaloo ndlela ulungelelwano lwimihlathi emithathu, kunye nekhola kunye nekhohlo kwaye ubeke eceleni kwekholam ekhohlo kwimilo emibini yekholomu apho ikholam elincinci lingama-250px ububanzi, kwaye ikholam elungileyo liyi-610px ububanzi (300 nganye kwiikholam ezimbini , kunye ne-10px emgumbini phakathi kwabo).
I-HTML ibonakala ngathi:
U-ali alixhobise ex e commodo consequat. Velit esse cillum dolore i-ad e-adream, i-lorem ipsum dolor sit amet. Ukubuyiselwa kwakhona kwi-voluptate quis nostrud ukusetyenziswa kokusetyenziswa kwefayile. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex e-comodo consequat.
Uze usebenzise umgangatho ophezulu, usebenzise i-tempor incididunt ullamco laboris nisi. Usebenze kunye nenkolo yamarqu. Velit esse cillum dolore eu fugiat nulla pariatur.
Umbhalo wesibambiso kwiikholam wenza ukuba kubonakale xa kuhlolwa. I-CSS ibonakala ngathi:
#container # col1 {ububanzi: 250px; float: ekhohlo; } #container # col2outer {ububanzi: 610px; float: kwesokudla; umgama: 0; ukupakisha: 0; }Ikholomu ngakwesobunxele ifakelwe ngakwesobunxele, ngelixa elinye lijikeleza ngakwesokudla. Ngenxa yokuba ububanzi bebonke zombini iikholomu ngu-860px, kukho umbhobho we-10px phakathi kwabo.
06 ka 09
Yongeza iikholamu ezimbini ngaphakathi kwekholeji yesibini
Ukwakha iikholamu ezintathu, faka ii-divs ngaphakathi kwikholamu yesibini ebanzi, njengokuba ungeze ii-div divs ngaphakathi kwikholamu yenkomo kwisinyathelo sokugqibela. I-HTML ibonakala ngathi:
Yenza i-ad minam adim, uze wenze i-tempor incididunt ullamco laboris nisi. Usebenze kunye nenkolo yamarqu. Velit esse cillum dolore eu fugiat nulla pariatur.
I-temporary libero i-tempore, i-viaptas ihleli njengento ecacileyo. Ullam corporis suscipit laboriosam, i-magm aliquam quaerat voluptatem. Itaque earum i-hic i-tenetur i-sapiente select, i-perspetatis i-unde omnis tempor incidunt usebenza kunye nelolo.
Kwaye iCSS ibonakala ngathi:
# col2outer # col2mid {ububanzi: 300px; float: ekhohlo; } # col2outer # col2side {ububanzi: 300px; float: kwesokudla; }Ekubeni iibhokisi ezi-300px ebanzi ziphakathi kwebhodi ebanzi ye-610px, kuya kuphinda kubekho umbhobho we-10px phakathi kwabo.
07 ka 09
Yongeza kwi-Footer
Kaloku ukuba zonke ezinye iphepha libizwa, ungongeza kwi-footer. Sebenzisa i-div yokugqibela nge-"footer" id, kwaye wongeza umxholo ukuze uyibone. Ungongeza kwakhona umda phezulu, ngoko uyazi apho uqala khona.
I HTML:
Copyright © 2017
CSS:
#container #footer {float: kwesobunxele; ububanzi: 870px; phezulu-umda: # c00 i-3px eqinile; }08 ka 09
Yongeza kwiiStyles zakho kunye nokuQinisekisa
Ngoku ukuba uluhlu luphelile, ungaqala ukongeza izitayela zakho kunye nomxholo. Khumbula ukuba imida ehlokweni kunye neenyawo zongezwa ukuba zibonise amacandelo omhlathi, ngokuthe ngqo ukuyila.
09 we 09
I-HTML yokugqibela / iCSS
Nantsi yonke ixwebhu, i-HTML kunye ne-CSS:
I-Header Row Ulungelelanise ex e commodo consequat
Yenza umncinci umncinane.
Nam libero tempore.
Copyright © 2008
Ulungelelanise ex e commodo consequat
Yenza umncinci umncinane.
Nam libero tempore.
Copyright © 2008