Šiame straipsnyje paaiškinta, kaip sukurti 3 stulpelių išdėstymą CSS. Instrukcijos taikomos CSS3 ir vyresniems.

Nubraižykite maketą

Savo maketą galite piešti ant popieriaus arba a grafikos programa. Jei jau turite galvoje vielinį rėmą ar dar platesnį dizainą, supaprastinkite jį iki pagrindinių langelių, sudarančių svetainę. Šis dizainas, pridedamas prie šio straipsnio, turi tris stulpelius pagrindinėje turinio srityje, taip pat antraštę ir poraštę. Atidžiai apžiūrėję galite pastebėti, kad trys stulpeliai nėra vienodo pločio.

Parengę maketą, galite pradėti galvoti apie matmenis. Šis dizaino pavyzdys turės šiuos pagrindinius matmenis:

• Ne daugiau kaip 900 pikselių pločio
• 20 px latakas kairėje
• 10 pikselių tarp stulpelių ir eilučių
instagram viewer
• Stulpeliai, kurių plotis yra 250 taškų, 300 taškų ir 300 taškų
• Viršutinė eilutė yra 150 taškų aukščio
• Apatinė eilutė yra 100 taškų aukščio

Parašykite pagrindinį HTML / CSS ir sukurkite konteinerio elementą

Kadangi šis puslapis bus galiojantis HTML dokumentą, pradėkite nuo tuščio HTML konteinerio.

Įtraukite pagrindinius CSS stilius į nulio puslapių paraštės, kraštinės ir užpildai. Nors yra ir kitų standartiniai CSS stiliai naujiems dokumentams šie stiliai yra minimalūs reikalavimai, reikalingi švariam išdėstymui. Pridėkite juos prie savo dokumento galvos.

Norėdami pradėti kurti maketą, įdėkite konteinerio elementą. Kartais nutinka, kad vėliau galite atsikratyti sudėtinio rodinio, tačiau daugumai fiksuoto pločio išdėstymų turint sudėtinio rodinio elementą lengviau valdyti skirtingame žiniatinklyje naršyklės.

Sukurkite konteinerio stilių

Sudėtiniame rodinyje nurodoma, koks platus bus tinklalapio turinys, taip pat visos paraštės aplink išorę ir užpildai viduje. Šio dokumento talpykla yra 870 taškų pločio, o kairėje - 20 pikselių latakas. Latakas nustatytas su paraštės stiliumi, tačiau konteinerio paminkštinimas yra nulis, kad bet kokie elementai nebūtų tokie platūs, kaip konteineris.

Jei išsaugosite dokumentą dabar, bus sunku pamatyti sudėtinį rodinį, nes jame nėra nieko. Jei pridėsite vietos rezervavimo ženklo tekstą, galėsite aiškiau pamatyti sudėtinio rodinio elementą.

Antraštei naudokite antraštės žymą

Tai, kaip nuspręsite kurti antraštės eilutę, labai priklauso nuo to, kas joje yra. Jei antraštės eilutėje bus tik logotipo grafika ir antraštė, tada naudokite antraštės žymą (

) yra prasmingiau nei naudoti a

. Antraštę galite suformuoti taip pat, kaip ir „div“, ir išvengsite pašalinių žymų.

Antraštės eilutės HTML eina konteinerio viršuje ir atrodo taip:

Tada, norėdami nustatyti stilius, apačioje buvo pridėta raudona kraštinė, kad galėtumėte pamatyti, kur ji baigiasi, paraštės ir paminkštinimas buvo nulis, plotis nustatytas kaip 100%, o aukštis - 150 taškų.

Nepamirškite plūduriuoti šio elemento su plūde: kairė; nuosavybė. Svarbiausia rašant CSS maketus yra praplaukti viską, net ir daiktus, kurių plotis yra toks pat kaip konteinerio. Tokiu būdu jūs visada žinote, kur puslapyje bus elementai.

A CSS palikuonių selektorius stilius pritaikė tik H1 elementams, esantiems elemente #container.

Norėdami gauti tris stulpelius, pirmiausia pastatykite du stulpelius

Kai kuriate trijų stulpelių išdėstymą naudodami CSS, turite padalyti išdėstymą į dviejų grupes. Taigi šiam trijų stulpelių išdėstymui vidurinis ir dešinysis stulpeliai sugrupuoti ir išdėstyti šalia kairiojo stulpelio dviejų stulpelių išdėstyme kai kairysis stulpelis yra 250 taškų pločio, o dešinysis - 610 taškų pločio (po 300 kiekvienam stulpeliui, plius 10 taškų latakui tarp juos).

Stulpelis kairėje yra plūduriuojamas į kairę, o kitas - dešinėje. Kadangi bendras abiejų kolonų plotis yra 860 taškų, tarp jų yra 10 taškų latakas.

Pridėkite du stulpelius plačiajame antrame stulpelyje

Norėdami sukurti tris stulpelius, pridėkite du divus platesnio antrojo stulpelio viduje, lygiai taip pat, kaip paskutiniame etape pridėjote 2 divus konteinerio stulpelyje.

Kadangi šios dvi 300 taškų pločio dėžės yra 610 taškų pločio dėžutės viduje, tarp jų vėl bus 10 taškų latakas.

Pridėti poraštėje

Dabar, kai likusi puslapio dalis yra stiliaus, galite pridėti poraštėje. Naudokite paskutinįjį div su „poraštės“ ID ir pridėkite turinį, kad galėtumėte jį pamatyti. Viršuje taip pat galite pridėti kraštinę, kad žinotumėte, kur ji prasideda.

Pridėkite savo asmeninius stilius ir turinį

Baigę maketą, galite pradėti pridėti savo asmeninius stilius ir turinį. Atminkite, kad antraštės ir poraštės kraštinės buvo pridėtos, kad būtų rodomos maketo sekcijos, o ne specialiai skirtas dizainui.