Indlela yokusebenzisa i-CSS Positioning ukudala izakhiwo ngaphandle kweedables

Iimpawu zeTableless zivule iMida entsha yoMdawulo

Kukho izizathu ezininzi zokungazisebenzisi iitheyibhile zokuhlela . Esinye sezizathu eziqhelekileyo abantu abanikezelayo ngokuqhubekayo ukuzisebenzisa kukuba kunzima ukwenza u-CSS. Nangona i-CSS yeskripthi ifaka i-curve yokufunda, xa uqonda indlela yokwenza i-CSS layout, unokumangaliswa ukuba kulula kangakanani. Kwaye xa ufunda, uza kuba nesicatshulwa sesibini esivakalayo isizathu sokuba abantu banganiki ukusebenzisa i-CSS- "Kukhawuleza ukubhala amatafula." Kukhawuleza kuba uyazi iitafile, kodwa xa ufunda i-CSS, unokukhawuleza nanjalo.

Inkxaso ye-Browser ye-CSS Positioning

Ukubeka indawo yeCSS kuxhaswa kakuhle kuzo zonke iziphequluli zanamhlanje . Ngaphandle kokuba uyakha isayithi ye-Netscape 4 okanye i-Internet Explorer 4, abafundi bakho akufanele babe neyinkathazo yokujonga iiWebhsayithi zeWebhsayithi ezimiweyo zeCSS.

Ukuhlaziya indlela owakha ngayo iphepha

Xa ukha isayithi usebenzisa ietafile, kufuneka ucinge ngefomati yefayile. Ngamanye amagama, ucinga ngokwemisele yeseli kunye nemigqa kunye neikholomu. Amaphepha akho ewebhu aza kubonisa le ndlela. Xa uhamba kwi-design ye-CSS yokuyila, uya kuqala ukucinga ngamaphepha akho ngokwemxholo, kuba umxholo unokufakwa kuyo nawuphi na onokuyithanda kwimihlaba-mhlawumbi ikhethiwe ngaphezulu komxholo.

Iiwebhusayithi ezahlukeneyo zinezakhiwo ezahlukeneyo. Ukwakha iphepha elisebenzayo, ukuvavanya isakhiwo sawo nawaphina iphepha elinikiweyo ngaphambi kokuba ubeke umxholo kuwo. Umzekelo wamaphepha ungabandakanya amacandelo amahlanu ahlukeneyo:

  1. Inhloko . Ikhasi ukuya kwibhanki, isayithi, indawo yokuhamba, umxholo wecatshulwa kunye nezinye izinto ezimbalwa.
  2. Ikholam yekunene . Leli likunene lephepha kunye nebhokisi lokukhangela, iintengiso, ibhokisi yevidiyo kunye neendawo zokuthenga.
  3. Umxholo . Umbhalo wendaba, ibhulogi yokuposa okanye inqwelo yokuthenga-inyama namazambane kwiphepha.
  4. Intengiso . Izibhengezo ezisemgangathweni ngaphakathi komxholo.
  5. Ngeenyawo . Uthotho oluphezulu, ulwazi lomlobi, ulwazi lobunikazi, ii-adner banner, kunye nezixhumanisi ezihambelanayo.

Esikhundleni sokubeka ezo zinto zintlanu etafileni, sebenzisa izinto ze-HTML5 zokucwangcisa ukuchaza iziqendu ezahlukeneyo zomxholo, uze usebenzise ukubeka i-CSS ukubeka izinto ezikulo phepha.

Ukuchonga iziGaba zakho zoQhagamshelwano

Emva kokuba uchaze iinkalo ezahlukeneyo zomxholo wesiza sakho, kufuneka uzibhale kwi-HTML yakho. Nangona unako, ngokuqhelekileyo, ubeke amacandelo akho kunoma yimuphi umyalelo, yinto efanelekileyo yokubeka iindawo ezibalulekileyo zephepha lakho kuqala. Le ndlela izokukunceda ekuphuculeni injini ye-injini, ngokunjalo.

Ukubonisa ukubeka indawo, jonga iphepha ngeentsika ezintathu kodwa akukho nhlokweni okanye unyawo. Ungasebenzisa ukubeka indawo ukudala nayiphi na uhlobo yohlobo oluthandayo.

Kwimihlathi emithathu yekholomu, ichaza amacandelo amathathu: ikholomu yesobunxele, ikholam ekunene, kunye nomxholo.

Ezi ziqendu ziya kuqinisekiswa kusetyenziswa i-ARTICLE element malunga nomxholo kunye neenxalenye ezimbini zeCandelo kwiikholamu ezimbini. Yonke into iya kuba nekhankaso yokuyibala. Xa usebenzisa i-id ye-id, kufuneka ubhale igama elilodwa kwi-id nganye.

Ukubeka i-Content

Ukusebenzisa i-CSS, cacisa isikhundla sezinto zakho ze-ID. Gcina ulwazi lwakho lwesithuba kwifowuni yesitayela njengale:

#intetho {

}

Isiqulatho phakathi kwezi zinto siya kuthatha indawo enokuba nayo, i-100 ekhulwini lobubanzi bendawo ekhoyo okanye iphepha. Ukuchaphazela indawo yecandelo ngaphandle kokuliphoqa kwindawo ebanzi, utshintshe i-padding okanye i-margin properties.

Kule layout, setha iikholomu ezimbini ukuya kubanzi obude kwaye ubeke indawo yazo ngokupheleleyo, ukwenzela ukuba abayi kuchatshazelwa apho bafumaneka kwi-HTML.

# ikholomu yekhohlo {
isikhundla: ngokupheleleyo;
sekhohlo: 0;
ububanzi: 150px;
ekhohlo ngakwesokunxele: 10px;
phezulu: 20px;
umbala: # 000000;
ukupakisha: 3px;
}
# ikholamu yekunene {
isikhundla: ngokupheleleyo;
sekhohlo: 80%;
phezulu: 20px;
ububanzi: 140px;
i-padding-left: 10px;
z-index: 3;
umbala: # 000000;
ukupakisha: 3px;
}

Emva koko kwimixholo yomxholo, setha iigcawu ngasekunene nakwesobunxele ukwenzela ukuba umxholo ungayi kubakho iikholam ezimbini zangaphandle.

#intetho {
phezulu: 0px;
umgama: 0px 25% 0 165px;
ukupakisha: 3px;
umbala: # 000000;
}

Ukucacisa iphepha lakho usebenzisa i-CSS esikhundleni setafile ye-HTML kudinga ubuchule obuthile obuchwephesha, kodwa impembelo ivela kwiinkqubo eziguquguqukayo neziziphendulelayo ngakumbi kunye nokwenza lula ukulungisa utshintsho kwiphepha lakho emva koko.