Mmene Mungagwiritsire Ntchito CSS Positioning Kuti Pangani Mapulani Osati Ma tebulo

Mipangidwe yopanda mapepala Yatsegula Zopangira Zatsopano

Pali zifukwa zambiri zoti musagwiritse ntchito matebulo kuti mugwirizane . Chimodzi mwa zifukwa zomwe anthu amapereka mobwerezabwereza chifukwa chopitilira kuzigwiritsa ntchito ndi chifukwa ndi zovuta kupanga chigawo ndi CSS. Ngakhale kuti kuwerenga kwa CSS kumaphatikizapo mpikisano wophunzirira, pamene mumvetsetsa momwe mungayendetsere CSS, mungadabwe momwe zingakhalire zosavuta. Ndipo mukangophunzira, mutha kuyankha chifukwa chachiwiri chomwe anthu amapereka chifukwa chosagwiritsa ntchito CSS- "Ndikofulumira kulemba matebulo." Mwamsanga chifukwa mumadziwa magome, koma mutaphunzira CSS, mukhoza kukhala mwamsanga basi ndi zimenezo.

Wofufuzira Thandizo la CSS Positioning

Kuyika kwa CSS kumathandizidwa bwino m'masakono onse amakono . Pokhapokha mutakonza malo a Netscape 4 kapena Internet Explorer 4, owerenga anu sayenera kukhala ndi vuto poyang'ana masamba anu a Webusaiti a CSS.

Kugwiritsira Ntchito Mmene Mungakhalire Tsamba

Mukamanga malo pogwiritsa ntchito matebulo, muyenera kuganiza moyenera . Mwa kuyankhula kwina, mukuganiza mumagulu ndi mizere ndi zigawo. Mawebusaiti anu adzasonyeza njira iyi. Mukasuntha kukonza maonekedwe a CSS, mumayamba kuganizira masamba anu malinga ndi zomwe zilipo, chifukwa zomwe zilipo mukhoza kuziyika kulikonse komwe mungakonde pazomwe muli nazo-ngakhale zotsalira pamwamba pa zina.

Mawebusaiti osiyana ali ndi zosiyana. Pofuna kukhazikitsa tsamba lothandiza, yesani kapangidwe ka tsamba lililonse musanagwiritse ntchito zokhazokha. Tsamba lachitsanzo lingaphatikizepo magawo asanu osiyana:

1. Mutu . Kunyumba kumalo osindikizira, dzina la malo, maulendo oyendetsa, tsamba la mutu komanso zinthu zina zochepa.
2. Gawo lakumanja . Ili ndilo mbali yoyenera ya tsamba ndi bokosi losaka, malonda, masewera a kanema, ndi malo ogula.
3. Zokhutira . Nkhani ya nkhani, blog post kapena ngolo yogula-nyama ndi mbatata za tsamba.
4. Kutsatsa kwapakatikati . Zotsatsa zili mkati mwazomwe zili.
5. Zotsatira . Zomwe zimayenda pansi, zolemba za wolemba, chidziwitso cha chigamulo, malonda otsika a banner, ndi maulumikizano ofanana.

M'malo moyika zinthu zisanuzo patebulo, gwiritsani ntchito zigawo zotsatila HTML5 kuti mudziwe magawo osiyanasiyana a zomwe zilipo, ndiyeno mugwiritse ntchito maonekedwe a CSS kuti muike zinthu zomwe zilipo patsamba.

Kudziwa Zamkati Mwanu Zigawo

Mutatha kufotokoza zosiyana siyana zomwe zili patsamba lanu, muyenera kuzilemba mu HTML yanu. Pamene mungathe, kawirikawiri, ikani magawo anu mu dongosolo lililonse, ndi lingaliro loyenera kuika mbali zofunika kwambiri pa tsamba lanu poyamba. Njirayi idzakuthandizani ndi kukonza injini yolumikiza, komanso.

Pofuna kusonyeza malo, pezani tsamba ndi zipilala zitatu koma palibe mutu kapena phazi. Mukhoza kugwiritsa ntchito kukhazikitsa mtundu uliwonse wa dongosolo lomwe mumakonda.

Kuti mukhale ndi chigawo chachitatu, tchulani magawo atatu: gawo lamanzere, khola lakumanja, ndi zokhutira.

Zigawo izi zidzatsimikiziridwa pogwiritsa ntchito chigawo cha ARTICLE zomwe zilipo ndi ziwiri zigawo za magawo awiriwo. Chilichonse chidzakhalanso ndi chidziwitso chodziwikiratu. Mukamagwiritsa ntchito chidziwitso cha id, muyenera kulemba dzina lapadera la id iliyonse.

Kuyika Zolembazo

Pogwiritsa ntchito CSS, tanthauzani malo a IDID zanu. Sungani mauthenga anu apamwamba mu kuyitana kwa mafashoni monga awa:

#content {

}}

Zokhutira mkati mwa zinthu izi zidzatenga malo ochuluka momwe angathere, zomwe ndi 100 peresenti ya malo omwe alipo kapena tsamba. Kuti muwononge malo a gawo popanda kulikakamiza ku chigawo chokhazikika, sungani padding kapena malire.

Pachifukwa ichi, ikani zipilala ziwiri kuti zikhazikike pazitali ndikuyika malo awo, kuti zisakhudzidwe ndi zomwe zili mu HTML.

Mzere # Wotsalira {
udindo: mtheradi;
kumanzere: 0;
m'lifupi: 150px;
mbali ya kumanzere: 10px;
pamwambakati: 20px;
Mtundu: # 000000;
padding: 3px;
}}
Mphindi # kumanja {
udindo: mtheradi;
kumanzere: 80%;
pamwamba: 20px;
m'lifupi: 140px;
padding-kumanzere: 10px;
Z-index: 3;
Mtundu: # 000000;
padding: 3px;
}}

Kenaka kuderalo, yikani mazenera kumanja ndi kumanzere kuti zinthu zisawonongeke pazitsulo ziwiri za kunja.

#content {
pamwamba: 0px;
malire: 0px 25% 0 165px;
padding: 3px;
Mtundu: # 000000;
}}

Kufotokozera pepala lanu pogwiritsira ntchito CSS mmalo mwa tebulo la HTML kumafuna luso lapadera, koma zopindulitsa zimachokera kuzinthu zowonongeka ndi zomvera komanso zosavuta kupanga kupanga kusintha kwa tsamba lanu pamapeto pake.