Mokhoa oa ho Sebelisa Positioning CSS ho Etsa Litsela ntle le Mathala

Liphetoho tse se nang litlhaku tse hlahisang Meeli e mecha ea ho etsoa

Ho na le mabaka a mangata a sa lokelang ho sebelisa litafole bakeng sa mohaho . E 'ngoe ea mabaka a tloaelehileng ka ho fetisisa ao batho ba fanang ka' ona bakeng sa ho tsoela pele ho e sebelisa ke hobane ho thata ho etsa setšoantšo le CSS. Le hoja mangolo a CSS a kenyelletsa lekhalo la ho ithuta, ha u utloisisa hore na u ka etsa joang CSS, u ka 'na ua makatsoa ke kamoo ho leng bonolo kateng. Hape ha u se u ithutile, u tla be u sebelisitse lebaka la bobeli ka ho fetisisa leo batho ba fanang ka lona bakeng sa ho se sebelise CSS- "Ho potlakile ho ngola litafole." Ho potlakile kahobane u tseba litafole, empa hang ha u ithuta CSS, u ka 'na ua ba kapele feela ka seo.

Ts'ehetso ea Mofetoleli oa CSS Positioning

Sebaka sa CSS se tšehetsoa hantle libukeng tsohle tsa kajeno . Ntle le haeba u haha ​​sebaka sa Netscape 4 kapa Internet Explorer 4, babali ba hao ha baa lokela ho ba le bothata ba ho shebella maqephe a hau a CSS a maqephe a hau.

Ho hlahloba kamoo u hahang leqephe

Ha o haha ​​sethala ho sebelisa litafole, o lokela ho nahana ka mokhoa o hlophisitsoeng. Ka mantsoe a mang, u nahana ka lisele le mela le mela. Liwebsaete tsa hau li tla bontša mokhoa ona. Ha o fallela moqapi oa CSS, o tla qala ho nahana ka maqephe a hau ka litaba, hobane litaba li ka behoa kae kapa kae tseo u ka li ratang ka mohaho-esita le ho roala holim'a tse ling tse ling.

Liwebsaete tse fapaneng li na le mehaho e fapaneng Ho haha ​​leqephe le atlehang, hlahloba sebopeho sa leqephe leha e le lefe pele u beha likhapeho ho lona. Leqephe la mohlala le ka kenyelletsa likarolo tse hlano tse sa tšoaneng:

  1. Sehlooho . Ntlo ho ea ho banner papatso, lebitso la sebaka, li-link links, sehlooho sa sehlooho le lintho tse seng kae.
  2. Ka ho le letona . Ena ke lehlakoreng le letona la leqephe le lebokose la lipatlisiso, lipapatso, li-box bo-video le libaka tsa mabenkele.
  3. Boitsebiso . Taba ea sehlooho, poso ea blog kapa koloi ea mabenkeleng-nama le litapole tsa leqephe.
  4. Liphatlalatso tse ka hare . Liphatlalatso li ka hare ho tse ling.
  5. Leoto la maoto . Boitsebiso bo ka tlaase, boitsebiso ba mongoli, tlhahisoleseding ea litokelo tsa molao, lipapatso tse tlaase tsa banner, le li-link tse amanang

Ho e-na le ho beha likarolo tse hlano tafoleng, sebelisa likarolo tsa ho arola HTML5 ho hlalosa likarolo tse fapaneng tsa dikahare, mme o sebedise boemo ba CSS ho kenya lintlha tsa litaba tse leqepheng lena.

Ho khetholla Lihlooho tsa Boitsebiso ba hau

Ka mor'a hore u hlalose libaka tse fapaneng tsa litaba tsa sebaka sa hau, u lokela ho li ngola ka HTML. Ha u ntse u khona, ka kakaretso, beha likarolo tsa hau ka tatellano leha e le efe, ke khopolo e ntle ho beha likarolo tsa bohlokoa ka ho fetisisa tsa leqephe la hau pele. Mokhoa ona o tla thusa ka ho ntlafatsa lisebelisuoa tsa lipatlisiso, hape.

Ho bonts'a maemo, bonts'a leqephe le lihlopha tse tharo empa ha ho na hlooho kapa maoto. U ka sebelisa boemo ho hlahisa mofuta ofe kapa ofe oa setšoantšo seo u se ratang.

Bakeng sa mohaho oa likarolo tse tharo, hlalosa likarolo tse tharo: mohala o ka letsohong le letšehali, ka ho le letona, le ka litaba.

Likarolo tsena li tla ts'oaroa ho sebelisa karolo ea ARTICLE bakeng sa litaba le tse peli tsa likarolo tsa likarolo tse peli. Ntho e 'ngoe le e' ngoe e tla ba le tšobotsi e khethollang eona. Ha u sebelisa tšobotsi ea id, u tlameha ho ngola lebitso le ikhethang bakeng sa id e 'ngoe le e' ngoe.

Ho beha boemo

U sebelisa CSS, hlalosa boemo ba likarolo tsa hau tsa IDID. Boloka boitsebiso ba boemo ba hau mohala oa mofuta ona:

#content {

}}

Lintho tse ka hare ho likarolo tsena li tla nka sebaka se ngata kamoo se ka khonang, e leng karolo ea 100 lekholong ea bophara ba sebaka sa hona joale kapa leqephe. Ho ama sebaka sa karolo ntle le ho e qobella ho bophara bo tsitsitseng, fetola marang-rang kapa marang-rang a marang-rang.

Bakeng sa mohaho ona, beha mehala e 'meli e behiloeng ka bophara' me u behe boemo ba bona ka ho feletseng, e le hore ba se ke ba ameha ke moo ba fumanoang teng HTML.

# ka ho le letšehali {
boemo: ho feletseng;
ka ho le letšehali: 0;
bophara: 150px;
marginal-left: 10px;
margin-top: 20px;
'mala: # 000000;
ho roala: 3px;
}}
# ho lehlakoreng le ka holimo {
boemo: ho feletseng;
ka ho le letšehali: 80%;
holimo: 20px;
bophara: 140px;
ho pata-ho le letšehali: 10px;
z-index: 3;
'mala: # 000000;
ho roala: 3px;
}}

Ebe sebakeng sa litaba, beha margins ka letsohong le letona le le letšehali e le hore litaba li se ke tsa kopana le lihlopha tse peli tse ka ntle.

#content {
holimo: 0px;
margin: 0px 25% 0 165px;
ho roala: 3px;
'mala: # 000000;
}}

Ho hlalosa leqephe la hau ho sebelisa CSS ho e-na le tafole ea HTML ho hloka tsebo e eketsehileng ea tsebo, empa moputso o latela mekhoa e tsitsitseng le e amohelehang le ho ba le boiketlo bo eketsehileng ho etsa liphetoho tsa moralo leqepheng la hau hamorao.