Jinsi ya Kujenga Layout 3-Column katika CSS

Mpangilio wa CSS unahitaji kuwa unafikiri ya mpangilio wa tovuti yako kwa ujumla, kisha uchukua vipande na uziweke pamoja. Jifunze jinsi ya kujenga mpangilio rahisi wa safu ya 3 na CSS.

01 ya 09

Chora Layout Yako

Unaweza kuteka mpangilio wako kwenye karatasi au katika mpango wa graphics . Ikiwa tayari una sura ya waya au muundo wa kina zaidi katika akili, uifanye rahisi kwenye masanduku ya msingi yanayoundwa na tovuti. Muundo huu unaoambatana na makala hii ina nguzo tatu katika sehemu kuu ya maudhui, pamoja na kichwa na kichwa. Ikiwa unatazama kwa karibu, unaweza kuona kwamba nguzo tatu hazi sawa kwa upana.

Baada ya kuweka mpangilio wako, unaweza kuanza kufikiria vipimo. Mfano wa mfano huu utakuwa na vipimo vya msingi vyafuatayo:

• Hakuna pixels zaidi ya 900 pana
• Pt gutter 20 upande wa kushoto
• Px 10 kati ya safu na safu
• Nguzo ambazo ni 250px, 300px, na 300px pana
• Mstari wa juu ni 150px mrefu
• Mstari wa chini ni urefu wa 100px

02 ya 09

Andika HTML Msingi / CSS na Unda Element Container

Tangu ukurasa huu utakuwa hati ya halali ya HTML, Anza na chombo cha HTML kisicho na kitu