Indlela yokusebenzisa i-CSS Positioning ukwakha izakhiwo ngaphandle kwamathebula

Izakhiwo ezingenayo i-Tableless zivula iMingcele Emisha Yomklamo

Kunezizathu eziningi zokungazisebenzisi amatafula we-layout . Esinye sezizathu ezivame kakhulu abantu abanikezayo ngokuqhubeka nokuzisebenzisa ngoba kunzima ukwenza isakhiwo nge-CSS. Nakuba umbhalo we-CSS uhlanganisa ijika lokufunda, uma uqonda indlela yokwenza i-CSS layout, ungase umangale ukuthi kulula kanjani. Futhi uma ufunda, uzobe ukhuluma ngesizathu sesibili esivame kakhulu abantu abanikeza ngokungazisebenzisi i-CSS- "Kuyashesha ukubhala amatafula." Kuyashesha ngoba wazi amatafula, kodwa uma ufunda i-CSS, ungase ube ngokushesha nalokho.

Ukusekelwa kwesiphequluli se-CSS Positioning

Ukuma kwe-CSS kusekelwa kahle kuzo zonke iziphequluli zanamuhla . Ngaphandle kokuba wakhe isayithi le-Netscape 4 noma i-Internet Explorer 4, abafundi bakho akufanele babe nenkinga ekubukeni amakhasi akho eWebs ase-CSS.

Ukucubungula indlela owakha ngayo ikhasi

Uma wakhe isayithi usebenzisa amathebula, kufanele ucabange ngesakhiwo se- tabular . Ngamanye amazwi, ucabanga ngokwamaseli nemigqa namakholomu. Amakhasi akho ewebhu azobonisa le ndlela. Lapho uhambisa ekwakhiweni kokubeka kwe-CSS, uzoqala ukucabanga ngamakhasi akho ngokwemibandela, ngoba okuqukethwe kungabekwa noma kuphi ongayithanda ku-layout-ngisho nekhasi phezulu kokunye okuqukethwe.

Amawebhusayithi ahlukene anezakhiwo ezahlukene. Ukuze wakhe ikhasi eliphumelelayo, hlola isakhiwo sanoma yiliphi ikhasi elinikeziwe ngaphambi kokunika okuqukethwe kuyo. Ikhasi lesibonelo lingase lihlanganise izigaba ezinhlanu ezihlukene:

  1. Isihloko . Ikhasi ukuya kumabonakude, igama lesayithi, izixhumanisi zokuhamba, isihloko sesihloko kanye nezinye izinto ezimbalwa.
  2. Ikholomu lesokudla . Leli yihlangothi elifanele lekhasi nebhokisi lokusesha, izikhangiso, amabhokisi wevidiyo, nezindawo zokuthenga.
  3. Okuqukethwe . Umbhalo we-athikili, okuthunyelwe kwebhulogi noma inqola yokuthenga-inyama namazambane wekhasi.
  4. Izikhangiso ezifakiwe . Izikhangiso zifakwe ngaphakathi ngaphakathi kokuqukethwe.
  5. Ngemuva . Ukuhamba okuphansi, ulwazi lomlobi, ulwazi lwe-copyright, izikhangiso eziphansi ze-banner, nezixhumanisi ezihlobene.

Esikhundleni sokubeka lezo zakhi ezinhlanu etafuleni, sebenzisa izakhi zokuhlukanisa i-HTML5 ukuchaza izingxenye ezihlukene zalokho okuqukethwe, bese usebenzisa ukubeka kwe-CSS ukubeka izakhi zokuqukethwe ekhasini.

Ukukhomba izigaba zakho zokuqukethwe

Ngemuva kokuba uchaze izindawo ezihlukahlukene zokuqukethwe zesayithi lakho, udinga ukubhala ku-HTML yakho. Ngenkathi ungakwazi, ngokuvamile, faka izingxenye zakho kunoma iyiphi i-order, kungumqondo omuhle ukubeka izingxenye ezibaluleke kakhulu kwekhasi lakho kuqala. Le ndlela izokusiza ekuthuthukiseni injini yokusesha, futhi.

Ukuze ubonise ukuma, cabanga ikhasi elinamakholomu amathathu kodwa akukho isihloko noma unyawo. Ungasebenzisa ukubeka ukudala noma yiluphi uhlobo lwesakhiwo oyithandayo.

Ngendlela yokubeka ikholomu ezintathu, chaza izingxenye ezintathu: ikholomu yesobunxele, ikholomu elungile, nokuqukethwe.

Lezi zigaba zizofakwa ngokusebentisa isici se-ARTICLE ngokuqukethwe nezigaba ezimbili ze-SECTION zezinsika ezimbili. Konke kuzoba nombono owukhomba. Uma usebenzisa isici se-id, kufanele unikeze igama elihlukile le-id ngayinye.

Ukubeka okuqukethwe

Ukusebenzisa i-CSS, chaza isikhundla sezinto zakho ze-IDID. Gcina ulwazi lwakho lwesikhundla ngocingo lwesitayela kanje:

#intent {

}}

Okuqukethwe ngaphakathi kwalezi zakhi kuzothatha isikhala esiningi ngangokunokwenzeka, okungukuthi amaphesenti angu-100 ububanzi bendawo yamanje noma ikhasi. Ukuphazamisa indawo yesigaba ngaphandle kokuyiphoqelela ububanzi obuhleliwe, shintsha i-padding noma izimpahla zomkhawulo.

Kule layout, setha amakholomu amabili kumakamelo ahleliwe bese usetha isikhundla sabo ngokuphelele, ukuze bangathinteki lapho batholakala khona ku-HTML.

# ikholomu yesokunxele {
isikhundla: ngokuphelele;
kwesokunxele: 0;
ububanzi: 150px;
umkhawulo-kwesokunxele: 10px;
umkhawulo-phezulu: 20px;
umbala: # 000000;
i-padding: 3px;
}}
# ikholomu kwesokudla {
isikhundla: ngokuphelele;
kwesokunxele: 80%;
phezulu: 20px;
ububanzi: 140px;
i-padding-kwesokunxele: 10px;
z-index: 3;
umbala: # 000000;
i-padding: 3px;
}}

Khona-ke endaweni yendawo yokuqukethwe, setha ama-margins ngakwesokudla nangakwesobunxele ukuze okuqukethwe kungabikho ngaphezulu kwamakholomu amabili angaphandle.

#intent {
phezulu: 0px;
umkhawulo: 0px 25% 0 165px;
i-padding: 3px;
umbala: # 000000;
}}

Ukuchaza ikhasi lakho usebenzisa i-CSS esikhundleni setafula le-HTML kudinga ikhono elithile lobuchwephesha, kodwa impumelelo ilandela imiklamo eguquguqukayo futhi ephendulayo futhi kulula kakhulu ukwenza izinguquko zesakhiwo ekhasini lakho kamuva.