Mipangilio isiyo na mipangilio Fungua mipaka mpya ya Undaji
Kuna sababu nyingi ambazo hazitumii meza kwa mpangilio . Moja ya sababu za mara kwa mara ambazo watu hutoa kwa kuendelea kuzitumia ni kwa sababu ni vigumu kufanya mpangilio na CSS. Ijapokuwa scripting ya CSS inahusisha safu ya kujifunza, unapoelewa jinsi ya kufanya mpangilio wa CSS, unaweza kushangazwa jinsi rahisi iwezekanavyo. Na mara tu unapojifunza, utaelezea sababu ya pili ya kawaida ya watu kutoa kwa kutumia CSS- "Ni haraka kuandika meza." Ni kwa haraka kwa sababu unajua meza, lakini mara tu unapojifunza CSS, huenda ukawa haraka na hivyo.
Msaada wa Browser wa Positioning CSS
Uwezo wa CSS unaungwa mkono vizuri katika vivinjari vyote vya kisasa . Isipokuwa wewe hujenga tovuti ya Netscape 4 au Internet Explorer 4, wasomaji wako hawapaswi kuwa na shida yoyote kutazama kurasa zako za Mtandao za CSS.
Kurekebisha Jinsi Unajenga Ukurasa
Unapojenga tovuti kwa kutumia meza, unafikiri katika muundo wa tabular . Kwa maneno mengine, unafikiri kwa suala la seli na safu na safu. Kurasa zako za Wavuti zitaonyesha njia hii. Unapohamia kwenye muundo wa usimilishaji wa CSS, utaanza kufikiria kurasa zako kwa masharti ya maudhui, kwa sababu maudhui yanaweza kuwekwa mahali popote unayopenda kwenye mpangilio-hata ulipambwa kwenye maudhui mengine.
Nje tofauti zina miundo tofauti. Ili kujenga ukurasa ufanisi, tathmini muundo wa ukurasa wowote uliyotangulia kabla ya kugawa maudhui yake. Ukurasa wa mfano unaweza kuhusisha sehemu tano tofauti:
- Kichwa . Nyumbani kwa matangazo ya bendera, jina la tovuti, viungo vya usafiri, kichwa cha habari na vilevile vitu vingine vichache.
- Safu ya safu . Hii ni upande wa kulia wa ukurasa na sanduku la utafutaji, matangazo, masanduku ya video, na maeneo ya ununuzi.
- Maudhui . Nakala ya makala, chapisho la blogu au gari la ununuzi-nyama na viazi ya ukurasa.
- Matangazo ya ndani . Matangazo ya ndani ndani ya yaliyomo.
- Chini . Utoaji wa chini, habari za mwandishi, habari za hakimiliki, matangazo ya chini ya bendera, na viungo vinavyohusiana.
Badala ya kuweka mambo hayo tano kwenye meza, tumia vipengele vya kutafakari HTML5 ili kufafanua sehemu tofauti za maudhui, halafu utumie nafasi ya CSS kuweka vipengele vya maudhui kwenye ukurasa.
Kutambua Sehemu zako za Maudhui
Baada ya kuelezea maeneo tofauti ya maudhui ya tovuti yako, unahitaji kuandikia kwenye HTML yako. Wakati unaweza, kwa ujumla, kuweka sehemu yako kwa utaratibu wowote, ni wazo nzuri kuweka sehemu muhimu zaidi ya ukurasa wako kwanza. Njia hii itasaidia na kuboresha injini ya utafutaji, pia.
Kuonyesha nafasi, kutazama ukurasa na nguzo tatu lakini hakuna kichwa au mchezaji. Unaweza kutumia nafasi ya kuunda aina yoyote ya mpangilio unayopenda.
Kwa mpangilio wa safu tatu, fanya sehemu tatu: safu ya kushoto, safu ya kulia, na maudhui.
Sehemu hizi zitaanzishwa kwa kutumia kipengele cha ARTICLE kwa maudhui na vipengele viwili vya SECTION kwa nguzo mbili. Kila kitu kitakuwa na sifa ya kutambua. Unapotumia sifa ya id, lazima uwape jina la kipekee kwa kila id.
Kuweka maudhui
Kutumia CSS, fanya msimamo wa vipengele vyako vya IDID. Hifadhi maelezo yako ya msimamo katika wito wa mtindo kama hii:
#content {
}
Maudhui ndani ya mambo haya yatachukua nafasi nyingi kama inawezavyo, yaani asilimia 100 ya upana wa eneo la sasa au ukurasa. Ili kuathiri eneo la sehemu bila kuimarisha kwa upana wa kudumu, mabadiliko ya kipengee au mali ya kiasi.
Kwa mpangilio huu, weka nguzo mbili kwa vipimo vilivyowekwa na kisha kuweka nafasi yao kabisa, ili wasiathiriwa na wapi kwenye HTML.
safu ya kushoto # {
msimamo: kabisa;
kushoto: 0;
upana: 150px;
margin-kushoto: 10px;
juu ya juu: 20px;
rangi: # 000000;
padding: 3px;
}
safu ya kulia #
msimamo: kabisa;
kushoto: 80%;
juu: 20px;
upana: 140px;
padding-kushoto: 10px;
z-index: 3;
rangi: # 000000;
padding: 3px;
}
Kisha kwa eneo la maudhui, kuweka margins upande wa kulia na wa kushoto ili maudhui yasiingie nguzo mbili za nje.
#content {
juu: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
rangi: # 000000;
}
Kufafanua ukurasa wako kwa kutumia CSS badala ya meza ya HTML inahitaji ustadi wa kiufundi zaidi, lakini ufuatiliaji unatoka kwenye miundo zaidi na ya msikivu na urahisi zaidi katika kufanya marekebisho ya miundo kwenye ukurasa wako baadaye.