CSS mohaho o hloka hore u nahane ka sebaka sa hau sa marang-rang, mme u nke likaroloana ebe u li beha hammoho. Ithute kamoo u ka kenyang molumo o bonolo oa 3-kholumo ka CSS.
01 ea 09
Etsa Letoto la Hao
O ka fumana setšoantšo sa hau pampiring kapa lenaneong la litšoantšo . Haeba u se u ntse u e-na le feretere kapa moqapi o tsotehang ka kelellong, e nolofalletse mabokose a mantlha a etsang setša. Tlhahiso ena e tsamaeang le sehlooho sena e na le mela e meraro sebakeng se ka sehloohong sa litaba, hammoho le hlooho le maoto. Haeba u sheba ka hloko, u ka bona hore lihlopha tse tharo ha lia lekana ka bophara.
Ka mor'a hore u be le mohaho oa hau o hlahang, u ka qala ho nahana ka litekanyo. Mohlala ona oa moralo o tla ba le litekanyo tse latelang tsa motheo:
- Ha ho na li-pixels tse fetang 900 bophara
- Setsi sa 20 sa px ka letsohong le letšehali
- 10 px pakeng tsa litšiea le mela
- Lipolomo tse 250px, 300px, le 300px bophara
- Moleng o ka holimo o 150px o molelele
- Mokha o ka tlaase ke 100px bolelele
02 ea 09
Ngola Basic HTML / CSS 'me u bōpe Khomotso ea Container
Kaha leqephe lena e tla ba tokomane e nepahetseng ea HTML, Qala ka sejana sa HTML se se nang thuso
Kenya litlhakisong tsa motheo tsa CSS ho ea fihla ka mahlakoreng a marang-rang, meeli le li-paddings . Ha ho ntse ho na le mekhoa e meng ea CSS ea litokomane tse ncha, mekhoa ena ke bonyane o hloka ho fumana mohlopho o hloekileng. Li kenye hloohong ea tokomane ea hau:
Ho qala ho haha mohaho, kenngoa karolong ea setshelo. Ka linako tse ling ho etsahala hore o ka tlosa setshelo hamorao, empa bakeng sa mekhoa e mengata e tsitsitseng, ho ba le setho sa boleng ho etsa hore ho be bonolo ho laola mefuta e fapaneng ea liwebsaete tsa marang-rang. Kahoo 'mele o beha sena:
'Me ka pampiri ea CSS, beha:
#container {}03 ea 09
Etsa mokhoa oa ho boloka mochine
Sebaka sena se hlalosa hore na ho na le lintho tse kae tse ka hare ho leqephe la websaete, hammoho le margins leha e le afe a pota-pota ka ntle le ho pata ka hare. Bakeng sa tokomane ena, setshelo sena se 870px ka bophara ba pixel 20 ka letsohong le letšehali. Motopo o thehiloe ka mokhoa oa margin, empa ho koahela setsing ho nkoa e le ho thibela likarolo leha e le life hore li se ke tsa lekana joaloka sejana.
#container {bophara: 870px; marge: 0 0 0 20px; / * hodimo ho le letona ho le letšehali * / ho pata: 0; }}Haeba u boloka tokomane ea hau hona joale, ho tla ba thata ho bona setshelo hobane ha se letho ho eona. Haeba o kenyelletsa mongolo oa libaka, u tla khona ho bona karolo e nang le litšila ka mokhoa o hlakileng haholoanyane.
04 ea 09
Sebelisa Tag ea Sehlooho-hlooho bakeng sa Sehlooho
Tsela eo u etsang qeto ea ho ngola molaetsa oa hlooho e itšetlehile haholo ka eona e leng ho eona. Haeba mohlooho oa sehlooho o tla ba le letšoao la moqapi le sehlooho, joale ho sebelisa lebokose la sehlooho (
) le utloahala haholo ho feta . U ka beha sehlooho se hlahang ka tsela e tšoanang le eo u bitsang div, 'me u qoba li-tag tse ling.
HTML ea mohlooho oa sehlooho e ea ka holim'a setshelo mme e shebahala tjena:
Sehlooho sa ka sa Sehlooho h1>
Joale, ho beha mekhoa ho eona, moeli o mofubelu o ne o kenngoa ka tlase e le hore o ka bona moo o felang teng, marang-rang le marang-rang a ne a lefshoa, bophara bo behiloeng ho 100% le bophahamo ho 150px:
#container h1 {margin: 0; ho robala: 0; bophara: 100%; bolelele: 150px; float: ho le letšehali; moeli-ka tlase: # c00 e tiileng 3px; }} U se ke ua lebala ho phaphamala ntho ena ka floateng: ka ho le letšehali; thepa. Senotlolo sa ho ngola lits'ebetso tsa CSS ke ho phahamisa ntho e 'ngoe le e' ngoe - esita le lintho tse lekanang le bophara joaloka sejana. Ka tsela eo, kamehla o tseba moo likarolo li tla robala leqepheng.
Mokhetho oa CSS oa setloholo o sebelisitse mekhoa feela ho lihlahisoa tsa H1 tse ka hare ho ntho e "#container".
05 ea 09
Ho fumana Li-Columns Tse Tharo, Qala ka ho haha Li-Columns tse peli
Ha o haha mohaho oa melaho e meraro ka CSS, o lokela ho arola sebaka sa hau ka lihlopha tse peli. Ka hona, mohahong ona o mekato e meraro, o le bohareng le ka ho le letona 'me o behiloe ka lehlakoreng le letšehali ka mohala oa melaho e' meli moo ho le letšehali le bophara ba 250px, 'me karolo e ka ho le letona ke 610px bophara (300 ka' ngoe bakeng sa lihlopha tse peli , hammoho le 10px bakeng sa matloana a pakeng tsa bona).
HTML e shebahala tjena:
U lokise tlhahiso ea ex ea commodo. Ha u batla ho etsa joalo, u lokela ho etsa joalo. Ka ho tsosolosa ha ho e-na le mokhoa o mong oa ho sebelisa mokhoa oa ho sebelisa li-nostrud eu fugiat nulla pariatur. E le hore ho be le lisebelisuoa tse ling tse ka sehloohong, u se ke ua etsa joalo. P> div>
E le hore u se ke ua ba le nako ea ho etsa joalo, u lokela ho etsa qeto ea hore na u tla etsa'ng. U sebetsa hantle le hore na u ka etsa'ng. E le hore u se ke ua khona ho etsa joalo. P> div>
Mongolo oa ba nang le moemeli litulong o etsa hore ba bonahale ha ba lekoa. CSS e shebahala tjena:
#container # col1 {width: 250px; float: ho le letšehali; } #container # col2outer {bophara: 610px; float: ho le letona; marge: 0; ho robala: 0; }} Karolo e ka ho le letšehali e phaphametse ka ho le letšehali, ha e 'ngoe e phaphametse ka ho le letona. Hobane bokahohle ba lihlopha tseo ka bobeli ke 860px, ho na le mokoti oa 10px pakeng tsa bona.
06 ea 09
Kenya Lipolomo tse peli ka hare ho Moqho oa Bobeli oa Bobeli
E le hore u thehe melamu e meraro, eketsa likarolo tse peli ka hare ho khoeli e kholo ea bobeli, feela joalokaha u kentse li-div div 2 ka hare ho sethaleng sa mokelikeli mohato oa ho qetela. HTML e shebahala tjena:
U se ke ua tseba hore na ke eng eo u ka e sebelisang ha u e-na le eona. U sebetsa hantle le hore na u ka etsa'ng. E le hore u se ke ua hlola u e-ba teng. P> div>
Nako ea ho fana ka nako e nepahetseng, e tla ba e hlalosang maikutlo. E le hore ho ka etsahala hore ho be le lisebelisoa tse ngata, makhasi a joalo a tla ba teng. Taba ea hore na ho tla etsahala'ng ka nako e telele, ho ka etsahala hore ebe ho na le nako e ngata eo u ka e sebelisang. P> div> div>
'Me CSS e shebahala tjena:
# col2outer # col2mid {bophara: 300px; float: ho le letšehali; } # col2outer # col2side {bophara: 300px; float: ho le letona; }} Kaha mabokose ana a mabeli a 300px a le ka hare ho lebokose le leholo la 610px, ho tla boela ho e-ba le sepakapaka sa 10px pakeng tsa bona.
07 ea 09
Kenya kampong ea maoto
Hona joale karolo e setseng ea leqephe e ngotsoe, u ka eketsa ka maoto. Sebelisa div ea ho qetela ka id, "'me u kenye lihlooho e le hore u li bone. U ka boela ua eketsa moeli ka holimo, kahoo o tla tseba moo o qalang teng.
HTML:
Copyright © 2017 p> div>
CSS:
#container #footer {float: ka ho le letšehali; bophara: 870px; border-top: # c00 e tiileng 3px; }} 08 ea 09
Kenya melaong ea hau ea botho le Content
Hona joale kaha u na le mohaho o phethiloeng, o ka qala ho eketsa mekhoa ea hau le lintho tsa hau. Hopola hore meeli ea hlooho le maoto e ne e kenngoa ho bontša likarolo tsa mohaho, eseng ka ho khetheha bakeng sa moqapi.
09 ea 09
HTML ea ho qetela / CSS
Tlhaloso eohle ke ena, HTML le CSS:
http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> Tlaleho e sa nang le tokelo sehlooho>
HTML ea mohlooho oa sehlooho e ea ka holim'a setshelo mme e shebahala tjena:
Sehlooho sa ka sa Sehlooho h1>
Joale, ho beha mekhoa ho eona, moeli o mofubelu o ne o kenngoa ka tlase e le hore o ka bona moo o felang teng, marang-rang le marang-rang a ne a lefshoa, bophara bo behiloeng ho 100% le bophahamo ho 150px:
#container h1 {margin: 0; ho robala: 0; bophara: 100%; bolelele: 150px; float: ho le letšehali; moeli-ka tlase: # c00 e tiileng 3px; }}U se ke ua lebala ho phaphamala ntho ena ka floateng: ka ho le letšehali; thepa. Senotlolo sa ho ngola lits'ebetso tsa CSS ke ho phahamisa ntho e 'ngoe le e' ngoe - esita le lintho tse lekanang le bophara joaloka sejana. Ka tsela eo, kamehla o tseba moo likarolo li tla robala leqepheng.
Mokhetho oa CSS oa setloholo o sebelisitse mekhoa feela ho lihlahisoa tsa H1 tse ka hare ho ntho e "#container".
05 ea 09
Ho fumana Li-Columns Tse Tharo, Qala ka ho haha Li-Columns tse peli
Ha o haha mohaho oa melaho e meraro ka CSS, o lokela ho arola sebaka sa hau ka lihlopha tse peli. Ka hona, mohahong ona o mekato e meraro, o le bohareng le ka ho le letona 'me o behiloe ka lehlakoreng le letšehali ka mohala oa melaho e' meli moo ho le letšehali le bophara ba 250px, 'me karolo e ka ho le letona ke 610px bophara (300 ka' ngoe bakeng sa lihlopha tse peli , hammoho le 10px bakeng sa matloana a pakeng tsa bona).
HTML e shebahala tjena:
U lokise tlhahiso ea ex ea commodo. Ha u batla ho etsa joalo, u lokela ho etsa joalo. Ka ho tsosolosa ha ho e-na le mokhoa o mong oa ho sebelisa mokhoa oa ho sebelisa li-nostrud eu fugiat nulla pariatur. E le hore ho be le lisebelisuoa tse ling tse ka sehloohong, u se ke ua etsa joalo. P> div>
E le hore u se ke ua ba le nako ea ho etsa joalo, u lokela ho etsa qeto ea hore na u tla etsa'ng. U sebetsa hantle le hore na u ka etsa'ng. E le hore u se ke ua khona ho etsa joalo. P> div>
Mongolo oa ba nang le moemeli litulong o etsa hore ba bonahale ha ba lekoa. CSS e shebahala tjena:
#container # col1 {width: 250px; float: ho le letšehali; } #container # col2outer {bophara: 610px; float: ho le letona; marge: 0; ho robala: 0; }}Karolo e ka ho le letšehali e phaphametse ka ho le letšehali, ha e 'ngoe e phaphametse ka ho le letona. Hobane bokahohle ba lihlopha tseo ka bobeli ke 860px, ho na le mokoti oa 10px pakeng tsa bona.
06 ea 09
Kenya Lipolomo tse peli ka hare ho Moqho oa Bobeli oa Bobeli
E le hore u thehe melamu e meraro, eketsa likarolo tse peli ka hare ho khoeli e kholo ea bobeli, feela joalokaha u kentse li-div div 2 ka hare ho sethaleng sa mokelikeli mohato oa ho qetela. HTML e shebahala tjena:
U se ke ua tseba hore na ke eng eo u ka e sebelisang ha u e-na le eona. U sebetsa hantle le hore na u ka etsa'ng. E le hore u se ke ua hlola u e-ba teng. P> div>
Nako ea ho fana ka nako e nepahetseng, e tla ba e hlalosang maikutlo. E le hore ho ka etsahala hore ho be le lisebelisoa tse ngata, makhasi a joalo a tla ba teng. Taba ea hore na ho tla etsahala'ng ka nako e telele, ho ka etsahala hore ebe ho na le nako e ngata eo u ka e sebelisang. P> div> div>
'Me CSS e shebahala tjena:
# col2outer # col2mid {bophara: 300px; float: ho le letšehali; } # col2outer # col2side {bophara: 300px; float: ho le letona; }}Kaha mabokose ana a mabeli a 300px a le ka hare ho lebokose le leholo la 610px, ho tla boela ho e-ba le sepakapaka sa 10px pakeng tsa bona.
07 ea 09
Kenya kampong ea maoto
Hona joale karolo e setseng ea leqephe e ngotsoe, u ka eketsa ka maoto. Sebelisa div ea ho qetela ka id, "'me u kenye lihlooho e le hore u li bone. U ka boela ua eketsa moeli ka holimo, kahoo o tla tseba moo o qalang teng.
HTML:
Copyright © 2017 p> div>
CSS:
#container #footer {float: ka ho le letšehali; bophara: 870px; border-top: # c00 e tiileng 3px; }}08 ea 09
Kenya melaong ea hau ea botho le Content
Hona joale kaha u na le mohaho o phethiloeng, o ka qala ho eketsa mekhoa ea hau le lintho tsa hau. Hopola hore meeli ea hlooho le maoto e ne e kenngoa ho bontša likarolo tsa mohaho, eseng ka ho khetheha bakeng sa moqapi.
09 ea 09
HTML ea ho qetela / CSS
Tlhaloso eohle ke ena, HTML le CSS: