Ilana CSS nilo pe o ronu ti oju-iwe aaye ayelujara rẹ bi odidi, lẹhinna ya awọn ege naa ki o si fi wọn papọ. Kọ bi o ṣe le ṣe agbekalẹ ila-mẹta 3 pẹlu CSS.
01 ti 09
Fa Aayo rẹ
O le fa ifilelẹ rẹ lori iwe tabi ni eto eto eya kan . Ti o ba ni fọọmu waya tabi paapaa apẹrẹ ti o tobi julo lokan, ṣe itumọ rẹ si awọn apoti ipilẹ ti o ṣe aaye naa. Oniru yii ti o tẹle akọọlẹ yii ni awọn ọwọn mẹta ni aaye agbegbe akọkọ, bii akọle ati ẹlẹsẹ. Ti o ba wo ni pẹkipẹki, o le ri pe awọn ọwọn mẹta ko dogba ni iwọn.
Lẹhin ti o ni ifilelẹ ti o wa jade, o le bẹrẹ ero ti awọn mefa. Àpẹẹrẹ apẹẹrẹ yii yoo ni awọn ọna ipilẹ wọnyi:
- Ko si ju 900 awọn piksẹli lọpọlọpọ
- 20 px gutter lori osi
- 10 px laarin awọn ọwọn ati awọn ori ila
- Awọn ọwọn ti o jẹ 250px, 300px, ati 300px jakejado
- Iwọn oke ni 150px ga
- Iwọn isalẹ jẹ 100px ga
02 ti 09
Kọ Akọbẹrẹ HTML / CSS ki o si Ṣẹda Ẹrọ Apoti kan
Niwon oju ewe yii yoo jẹ iwe HTML ti o wulo, Bẹrẹ pẹlu ohun elo HTML ti o ṣofo
Fi kun ni awọn ipilẹ CSS ti o ni ipilẹ si odo jade ni awọn iwe ti agbegbe, awọn aala, ati awọn fifẹ . Lakoko ti o wa awọn ilana miiran CSS fun awọn iwe titun, awọn aza wọnyi jẹ o kere julọ ti o nilo lati gba ifilelẹ ti o mọ. Fi wọn kun ori akọsilẹ rẹ:
Lati bẹrẹ si kọ ifilelẹ naa, fi si nkan ti o gba eiyan kan. Nigba miiran o ma ṣẹlẹ pe o le yọ kuro ninu eiyan naa nigbamii, ṣugbọn fun awọn ipilẹ ti o wa titi ti o wa titi, nini iṣiro agbederu jẹ ki o rọrun lati ṣakoso ni ori awọn aṣàwákiri ayelujara miiran. Nitorina ninu ara fi eyi ṣe:
Ati ninu iwe-ara CSS, fi:
#container {}03 ti 09
Pa Apoti naa
Ẹja naa ṣe apejuwe bi awọn oju-iwe ayelujara oju-iwe naa yoo ṣe jakejado, bakannaa eyikeyi awọn agbegbe ti o wa ni ayika ita ati padding inu. Fun iwe yii, egungun naa jẹ 870px jakejado pẹlu iwọn gilasi 20 kan si apa osi. A ti ṣeto gutter pẹlu ọna ita kan, ṣugbọn awọn padding lori apo eiyan ni a yọ kuro lati dènà eyikeyi awọn eroja lati wa ni ibẹrẹ bi apo.
#container {iwọn: 870px; ala: 0 0 0 20px; / * apa oke apa ọtun isalẹ * / padding: 0; }Ti o ba fi iwe rẹ pamọ nisisiyi, o yoo jẹra lati ri apo eiyan nitori pe ko ni nkan ninu rẹ. Ti o ba fikun ọrọ onigbowo, iwọ yoo ni anfani lati wo iṣiro nkan diẹ sii kedere.
04 ti 09
Lo Akọle Akọle fun Akọsori
Bawo ni o ṣe pinnu lati ṣe igbasilẹ ori akọsori ti darale ọpọlọpọ ohun ti o wa ninu rẹ. Ti o ba jẹ pe akọle akọle nikan yoo ni ifihan ati aami akọle, lẹhinna lilo akọle akọle (
) ṣe oye diẹ sii ju lilo . O le ṣe agbekalẹ akọle naa ni ọna kanna ti o ṣe apejuwe ipin, ati pe o yẹra fun awọn afihan afikun.
Awọn HTML fun ọna akọsori lọ ni oke ti eiyan ati ki o dabi iru eyi:
Ori akọsori mi
Lẹhinna, lati ṣeto awọn aza lori rẹ, a ti fi ipin apa pupa kan kun ni isalẹ ki o le rii ibi ti o ti pari, awọn agbegbe ati awọn padding ni a ti jade, iwọn ti a ṣeto si 100% ati giga si 150px:
#container h1 {ala: 0; padding: 0; iwọn: 100%; iga: 150px; float: osi; aala-isalẹ: # c00 solid 3px; } Maṣe gbagbe lati ṣa omiye yii pẹlu fifun omi: osi; ohun ini. Bọtini lati kọ awọn CSS ipa ni lati ṣafo gbogbo ohun - paapaa awọn ohun ti o wa ni iwọn kanna bi apo eiyan. Iyẹn ọna, o nigbagbogbo mọ ibi ti awọn eroja yoo dubulẹ lori iwe.
Awọn ọmọ-ẹgbẹ CSS kan ti a lo awọn awọ nikan si awọn eroja H1 ti o wa ninu ibudo #container.
05 ti 09
Lati Gba Awọn ọwọn mẹta, Bẹrẹ nipasẹ Ilé Awọn ọwọn meji
Nigbati o ba kọ oju-iwe mẹta-iwe pẹlu CSS, o nilo lati pin ifilelẹ rẹ ni ẹgbẹ ẹgbẹ meji. Nitorina fun ifilelẹ mẹta-iwe yii, apa oke ati apa ọtun ki o si ṣe akojọpọ ati ki o gbe lẹyin si apa osi ni igun-meji iwe-ni ibi ti apa osi jẹ 250px jakejado, ati apa ọtun jẹ 610px jakejado (300 kọọkan fun awọn ọwọn meji , plus 10px fun gutter laarin wọn).
Awọn HTML wulẹ bi eyi:
Fun alaye diẹ ẹ sii. Ti o ba ti wa ni kan ti o nilo lati wa ni diẹ ninu awọn ti wa ni diẹ ninu awọn ile-iṣẹ, awọn ile-iṣẹ iṣowo agbegbe. Ni ipilẹṣẹ ti o wa ni okeerẹ awọn igbesẹ ti wa ni idaraya ni fọọmu ti wa ni pipade. Ti o ba wa ni eyikeyi awọn iṣẹ ti o ti wa ni niyanju lati ṣe awọn alaye diẹ sii.
Fun alaye diẹ ẹ sii, ṣugbọn diẹ ninu awọn akoko diẹ ẹ sii ni diẹ ẹ sii. Ṣiṣẹ ati ki o ṣe diẹ ẹ sii. Ti o ba wa ni aṣeyọri ti o ni imọran ni ayọkẹlẹ.
Ọrọ akọsilẹ ninu awọn ọwọn mu ki wọn han diẹ nigba idanwo. Awọn CSS wulẹ bi eyi:
#container # col1 {iwọn: 250px; float: osi; } #container # col2outer {iwọn: 610px; float: ọtun; ala: 0; padding: 0; } Awọn iwe ti o wa ni osi ti wa ni ṣiṣan si apa osi, nigba ti ẹlomiran ti n lọ si apa ọtun. Nitoripe iwọn lapapọ gbogbo awọn ọwọn mejeji jẹ 860px, nibẹ ni 10px gutter laarin wọn.
06 ti 09
Fi awọn ọwọn meji sinu inu iwe keji
Lati ṣẹda awọn ọwọn mẹta, fi awọn ami meji sinu inu ẹgbẹ keji, gẹgẹbi o ṣe fi kun 2 divs inu iwe ẹda ni igbese to kẹhin. Awọn HTML wulẹ bi eyi:
Fun alaye diẹ ẹ sii, ṣugbọn diẹ ninu awọn akoko diẹ ẹ sii ni diẹ ninu awọn iṣẹ. Ṣiṣẹ ati ki o ṣe diẹ ẹ sii. Ti o ba wa ni aṣeyọri ti o ti wa ni awọn ayọkẹlẹ ti o ti wa ni aṣeyọri.
Ọjọ akoko ti o fẹ, ti o ba wa ni awọn alaye ti wa ni explicabo. Ti o ba ti wa ni awọn alakoso ile-iṣẹ ti awọn ile-iṣẹ, ti o ti wa ni fẹlẹfẹlẹ ti o ti wa ni pipade. Ti o ba wa ni ọkan ninu awọn ti o dara ju ti o fẹ lati ṣe iyipada, ṣugbọn bi o ba wa ni gbogbo awọn akoko ti o nilo lati ṣiṣẹ ati ki o ṣiṣẹ.
Ati awọn CSS wulẹ bi eleyi:
# col2outer # col2mid {iwọn: 300px; float: osi; } # col2outer # col2side {iwọn: 300px; float: ọtun; } Niwon awọn apoti wọnyi ti o wa ni iwọn 300px ni inu apoti afẹfẹ 610px, nibẹ yoo tun jẹ idinku 10px laarin wọn.
07 ti 09
Fi kun ni Ẹsẹ
Nisisiyi pe awọn iyokù oju-iwe naa ti wa ni apẹrẹ, o le fi kun ni ẹlẹsẹ naa. Lo ọgbẹ ikẹhin pẹlu idẹda "ẹlẹsẹ", ki o fi akoonu kun ki o le rii. O tun le fi abala kan kun ni oke, nitorina o yoo mọ ibi ti o bẹrẹ.
Awọn HTML:
Aṣẹ © 2017
CSS:
#container #footer {float: osi; iwọn: 870px; aala-oke: # c00 solid 3px; } 08 ti 09
Fikun-un ninu Awọn Ikọja Ti ara ẹni ati akoonu rẹ
Nisisiyi pe o ni ifilelẹ ti pari, o le bẹrẹ si fi awọn ara rẹ ati akoonu rẹ kun. Ranti pe awọn aala lori akọsori ati ẹlẹsẹ ni a fi kun lati fi awọn apakan ifilelẹ han, kii ṣe pataki fun apẹrẹ.
09 ti 09
Awọn ipari HTML / CSS
Eyi ni gbogbo iwe-ipamọ, HTML ati CSS:
Iwe-aṣẹ Untitled html, ara {ala: 0px; padding: 0px; aala: 0px; } #container {iwọn: 870px; ala: 0 0 0 20px; / * apa oke apa ọtun isalẹ * / padding: 0; lẹhin-awọ: #fff; } #container h1 {ala: 0; padding: 0; iwọn: 100%; iga: 150px; float: osi; aala-isalẹ: # c00 solid 3px; } #container # col1 {iwọn: 250px; float: osi; } #container # col2outer {iwọn: 610px; float: ọtun; ala: 0; padding: 0; } # col2outer # col2mid {iwọn: 300px; float: osi; } # col2outer # col2side {iwọn: 300px; float: ọtun; } #container #footer {float: osi; iwọn: 870px; aala-oke: # c00 solid 3px; } Ori Agbọrọsọ mi p>
Fun alaye diẹ ẹ sii.
Akoko akoko olubori
Awọn HTML fun ọna akọsori lọ ni oke ti eiyan ati ki o dabi iru eyi:
Ori akọsori mi
Lẹhinna, lati ṣeto awọn aza lori rẹ, a ti fi ipin apa pupa kan kun ni isalẹ ki o le rii ibi ti o ti pari, awọn agbegbe ati awọn padding ni a ti jade, iwọn ti a ṣeto si 100% ati giga si 150px:
#container h1 {ala: 0; padding: 0; iwọn: 100%; iga: 150px; float: osi; aala-isalẹ: # c00 solid 3px; }Maṣe gbagbe lati ṣa omiye yii pẹlu fifun omi: osi; ohun ini. Bọtini lati kọ awọn CSS ipa ni lati ṣafo gbogbo ohun - paapaa awọn ohun ti o wa ni iwọn kanna bi apo eiyan. Iyẹn ọna, o nigbagbogbo mọ ibi ti awọn eroja yoo dubulẹ lori iwe.
Awọn ọmọ-ẹgbẹ CSS kan ti a lo awọn awọ nikan si awọn eroja H1 ti o wa ninu ibudo #container.
05 ti 09
Lati Gba Awọn ọwọn mẹta, Bẹrẹ nipasẹ Ilé Awọn ọwọn meji
Nigbati o ba kọ oju-iwe mẹta-iwe pẹlu CSS, o nilo lati pin ifilelẹ rẹ ni ẹgbẹ ẹgbẹ meji. Nitorina fun ifilelẹ mẹta-iwe yii, apa oke ati apa ọtun ki o si ṣe akojọpọ ati ki o gbe lẹyin si apa osi ni igun-meji iwe-ni ibi ti apa osi jẹ 250px jakejado, ati apa ọtun jẹ 610px jakejado (300 kọọkan fun awọn ọwọn meji , plus 10px fun gutter laarin wọn).
Awọn HTML wulẹ bi eyi:
Fun alaye diẹ ẹ sii. Ti o ba ti wa ni kan ti o nilo lati wa ni diẹ ninu awọn ti wa ni diẹ ninu awọn ile-iṣẹ, awọn ile-iṣẹ iṣowo agbegbe. Ni ipilẹṣẹ ti o wa ni okeerẹ awọn igbesẹ ti wa ni idaraya ni fọọmu ti wa ni pipade. Ti o ba wa ni eyikeyi awọn iṣẹ ti o ti wa ni niyanju lati ṣe awọn alaye diẹ sii.
Fun alaye diẹ ẹ sii, ṣugbọn diẹ ninu awọn akoko diẹ ẹ sii ni diẹ ẹ sii. Ṣiṣẹ ati ki o ṣe diẹ ẹ sii. Ti o ba wa ni aṣeyọri ti o ni imọran ni ayọkẹlẹ.
Ọrọ akọsilẹ ninu awọn ọwọn mu ki wọn han diẹ nigba idanwo. Awọn CSS wulẹ bi eyi:
#container # col1 {iwọn: 250px; float: osi; } #container # col2outer {iwọn: 610px; float: ọtun; ala: 0; padding: 0; }Awọn iwe ti o wa ni osi ti wa ni ṣiṣan si apa osi, nigba ti ẹlomiran ti n lọ si apa ọtun. Nitoripe iwọn lapapọ gbogbo awọn ọwọn mejeji jẹ 860px, nibẹ ni 10px gutter laarin wọn.
06 ti 09
Fi awọn ọwọn meji sinu inu iwe keji
Lati ṣẹda awọn ọwọn mẹta, fi awọn ami meji sinu inu ẹgbẹ keji, gẹgẹbi o ṣe fi kun 2 divs inu iwe ẹda ni igbese to kẹhin. Awọn HTML wulẹ bi eyi:
Fun alaye diẹ ẹ sii, ṣugbọn diẹ ninu awọn akoko diẹ ẹ sii ni diẹ ninu awọn iṣẹ. Ṣiṣẹ ati ki o ṣe diẹ ẹ sii. Ti o ba wa ni aṣeyọri ti o ti wa ni awọn ayọkẹlẹ ti o ti wa ni aṣeyọri.
Ọjọ akoko ti o fẹ, ti o ba wa ni awọn alaye ti wa ni explicabo. Ti o ba ti wa ni awọn alakoso ile-iṣẹ ti awọn ile-iṣẹ, ti o ti wa ni fẹlẹfẹlẹ ti o ti wa ni pipade. Ti o ba wa ni ọkan ninu awọn ti o dara ju ti o fẹ lati ṣe iyipada, ṣugbọn bi o ba wa ni gbogbo awọn akoko ti o nilo lati ṣiṣẹ ati ki o ṣiṣẹ.
Ati awọn CSS wulẹ bi eleyi:
# col2outer # col2mid {iwọn: 300px; float: osi; } # col2outer # col2side {iwọn: 300px; float: ọtun; }Niwon awọn apoti wọnyi ti o wa ni iwọn 300px ni inu apoti afẹfẹ 610px, nibẹ yoo tun jẹ idinku 10px laarin wọn.
07 ti 09
Fi kun ni Ẹsẹ
Nisisiyi pe awọn iyokù oju-iwe naa ti wa ni apẹrẹ, o le fi kun ni ẹlẹsẹ naa. Lo ọgbẹ ikẹhin pẹlu idẹda "ẹlẹsẹ", ki o fi akoonu kun ki o le rii. O tun le fi abala kan kun ni oke, nitorina o yoo mọ ibi ti o bẹrẹ.
Awọn HTML:
Aṣẹ © 2017
CSS:
#container #footer {float: osi; iwọn: 870px; aala-oke: # c00 solid 3px; }08 ti 09
Fikun-un ninu Awọn Ikọja Ti ara ẹni ati akoonu rẹ
Nisisiyi pe o ni ifilelẹ ti pari, o le bẹrẹ si fi awọn ara rẹ ati akoonu rẹ kun. Ranti pe awọn aala lori akọsori ati ẹlẹsẹ ni a fi kun lati fi awọn apakan ifilelẹ han, kii ṣe pataki fun apẹrẹ.
09 ti 09
Awọn ipari HTML / CSS
Eyi ni gbogbo iwe-ipamọ, HTML ati CSS:
Ori Agbọrọsọ mi p>
Fun alaye diẹ ẹ sii.
Akoko akoko olubori
p>
Fun alaye diẹ ẹ sii.
Akoko akoko olubori