Tableless Layouts Open Open New Design Mitsara
Pane zvikonzero zvizhinji zvekusashandisa tafura yekugadzirisa . Chimwe chezvikonzero zvinowanzopiwa nevanhu kuti varambe vachizvishandisa ndezvokuti zvakaoma kuita sarudzo neCSS. Kunyange zvazvo CSS scripting inosanganisira chidziro chekudzidza, kana iwe unonzwisisa maitiro ekuita CSS kurongwa, unogona kushamisika kuti zviri nyore sei. Uye kana wadzidza, iwe uchave wataura nezvechikonzero chechipiri chinowanzopiwa vanhu kuti vasashandise CSS- "Zviri kukurumidza kunyora matafura." Inokurumidza nokuti iwe unoziva matafura, asi kana wawana CSS, iwe unogona kunge wakakurumidza nazvo.
Browser Support yeCSS Positioning
CSS yakagadzirirwa inonyatsotsigirwa mumavheji ose emazuva ano . Kunze kwekuti iwe uri kuvaka nzvimbo yeNetscape 4 kana Internet Explorer 4, vaverengi vako havafaniri kuva nechinetso chekutarisa mapeji e-CSS-akanzi mapeji.
Kurongedza Maitiro Aunoita Peji
Paunovaka nzvimbo yekushandisa matafura, unofanira kufungisisa mumutauro wepamusoro. Mune mamwe mazwi, iwe uri kufunga maererano nemasero nemirara uye ma column. Mapeji EpaIndaneti anoratidza izvi. Paunotamira kune CSS, iwe unotanga kufunga nezvemavara ako maererano nehuwandu, nokuti zvinyorwa zvinogona kuiswa chero kupi zvako waunoda mu-layout-kunyange rakakoshwa pamusoro pezvimwe zvinhu.
Nzvimbo dzakasiyana dzakasiyana dzine zvivako zvakasiyana. Kuti uite peji rinobudirira, nyatsoongorora zvigadziro zvepeji ipi zvayo usati waisa zvigaro. Peji yemuenzaniso inogona kusanganisira zvikamu zvishanu zvakasiyana:
- Header . Musha kuenda kumabhanhire, chiziviso, zita rekutsvaga, kushambadzira kwekubatanidza, musoro wenyaya uye pamwe nezvimwe zvinhu zvishomanana.
- Right column . Iri ndiro rutivi rworudyi rwepeji nebhokisi rekutsvaga, matangazo, mavhidhiyo mabhokisi, uye nzvimbo dzekutenga.
- Zviripo . Nyaya yenyaya, blog post kana ngoro yekutenga-nyama-uye-mbatata ye peji.
- Inline ads . Zviziviso zvinyorwa mukati mezviri mukati.
- Footer . Iko kunodzika kwepasi, nyori dzevanyori, ruzivo rwekodzero, zvinyorwa zvemashoko ekudzivirira, uye zvakabatana zvine chokuita.
Panzvimbo pokuisa zvinhu zvishanu mufurafura, shandisa HTML5 kugovera zvinhu kuti urondedze zvikamu zvakasiyana zvezvakagadzirwa, uye shandisa CSS kuisa panzvimbo yekuisa zvinhu zviri mukati peji.
Kuziva Zvaunofunga Zvitsva
Mushure mekunge watsanangura zvakasiyana-siyana nzvimbo dzewebsite yako, unofanira kuzvinyorera mu HTML yako. Nepo iwe unogona, kazhinji, isa zvikamu zvako mune chero zvakarongeka, iri pfungwa yakanaka yekuisa zvikamu zvakakosha zvikuru zvejiji rako kutanga. Iyi nzira ichabatsira nekutsvaga-injini kugadzirisa, pamwe chete.
Kuti uratidze kumira, fungisisa peji rine mapuranga matatu asi hapana musoro kana tsoka. Iwe unogona kushandisa nzvimbo yekugadzira chero rudzi rwemhando yaunofarira.
Nokuda kwemavara matatu emakorani, tsanangura zvikamu zvitatu: kuruboshwe rworuboshwe, kurudyi kwendarira, uye zviri mukati.
Izvi zvikamu zvichagadziriswa uchishandisa ARTICLE chikamu chezvinyorwa uye zviviri CHIKAMU chezvinhu zvemashure maviri. Zvose zvichavawo nechiratidzo chekuziva icho. Paunoshandisa chiito che id, unofanira kufanidza zita rakasiyana nedhimwe rega.
Positioning the Content
Kushandisa CSS, tsanangura nzvimbo ye IDID yako yezvinhu. Chengetedza nzvimbo yako yeruzivo mumutauro wakadai seyu:
#content {
}
Zviri mukati mezvikamu izvi zvinotora nzvimbo yakawanda sezvazvinogona, iyo 100 muzana yehupamhi hwenzvimbo ikozvino kana peji. Kuchinja nzvimbo yechikamu pasina kumanikidzira kune yakasara yakafara, shandura padding kana margin properties.
Nokuda kwechimiro ichi, sarudzai miviri miviri yekugadzirisa zvikafu uye ezvo vagoisa nzvimbo yavo yakakwana, kuitira kuti vasazovhiringidzwa nepo inowanika mu HTML.
# kuruboshwe-korivha {
nzvimbo: mhedziso;
Kuruboshwe: 0;
kureba: 150px;
marginal-left: 10px;
marginal-top: 20px;
ruvara: # 000000;
padding: 3px;
}
# kurudyi-korona {
nzvimbo: mhedziso;
Kuruboshwe: 80%;
kumusoro: 20px;
kureba: 140px;
padding-kuruboshwe: 10px;
z-index: 3;
ruvara: # 000000;
padding: 3px;
}
Zvadaro kune nzvimbo yakagadzikana, sarudza maruva kurutivi rworudyi uye kuruboshwe kuitira kuti zvinyorwa zvirege kuwirirana kunze kwemashure maviri.
#content {
kumusoro: 0px;
marginal: 0px 25% 0 165px;
padding: 3px;
ruvara: # 000000;
}
Kutsanangurira peji yako uchishandisa CSS panzvimbo ye HTML mapafura kunoda unyanzvi humwe hwehutano, asi kukanganisa kunotevera kubva kune zvimwe zvinoenderana uye zvinogadzirisa zvirongwa uye nyore nyore mukugadzirisa maitiro pane peji rako gare gare.