Ez a cikk elmagyarázza, hogyan lehet háromoszlopos elrendezést létrehozni a CSS-ben. Az utasítások a CSS3-ra és az idősebbekre vonatkoznak.

Rajzolja elrendezését

Az elrendezést papírra vagy a grafikus program. Ha már drótvázra vagy még szélesebb körű kialakításra gondol, egyszerűsítse le a webhelyet alkotó alapdobozokkal. Ennek a cikknek a kíséretében található terv három oszlopot tartalmaz a fő tartalmi területen, valamint egy fejlécet és láblécet. Ha alaposan megnézi, láthatja, hogy a három oszlop szélessége nem egyenlő.

Miután elkészítette az elrendezést, elkezdheti a dimenziók gondolkodását. Ez a példa a következő alapvető dimenziókkal rendelkezik:

• Legfeljebb 900 pixel széles
• 20 px ereszcsatorna a bal oldalon
• 10 px oszlopok és sorok között
instagram viewer
• 250 képpont, 300 képpont és 300 képpont szélességű oszlopok
• A felső sor 150 képpont magas
• Az alsó sor 100 képpont magas

Írjon alapvető HTML / CSS-t és hozzon létre egy tároló elemet

Mivel ez az oldal érvényes lesz HTML dokumentumot, kezdje egy üres HTML-tárolóval.

Adja hozzá az alapvető CSS-stílusokat a nullázza az oldal margóit, szegélyeit és párnázásait. Míg vannak más szabványos CSS stílusok új dokumentumok esetében ezek a stílusok a legkevesebbek, amelyek a tiszta elrendezéshez szükségesek. Adja hozzá őket a dokumentum fejéhez.

Az elrendezés elkészítésének megkezdéséhez tegyen be egy konténer elemet. Néha előfordul, hogy később megszabadulhat a tárolótól, de a legtöbb rögzített szélességű elrendezés esetén a tároló elem megléte megkönnyíti a különböző webes kezeléseket böngészők.

Stílusa a konténernek

A tároló meghatározza, hogy milyen széles lesz a weboldal tartalma, valamint a margók kívül és a párnák a belső részen. Ennél a dokumentumnál a konténer szélessége 870 képpont, bal oldalán 20 pixeles ereszcsatorna található. Az ereszcsatorna margóstílussal van felszerelve, de a tartály párnázása ki van nullázva, hogy megakadályozza az elemek olyan szélességét, mint a tartály.

Ha most elmenti a dokumentumot, akkor nehéz lesz látni a tárolót, mert abban nincs semmi. Helyőrző szöveg hozzáadásával tisztábban láthatja a tároló elemet.

Használjon címsorcímkét a fejléchez

Az, hogy miként dönt a fejléc sorának stílusában, nagyban függ attól, hogy mi van benne. Ha a fejléc sora csak logó grafikát és címsort tartalmaz, akkor használjon címsor címkét (

) értelmesebb, mint az a használata

. A címsort ugyanúgy stílusozhatja, mint egy div-t, és kerülje az idegen címkéket.

A fejléc sorának HTML-je a tároló tetején helyezkedik el, és így néz ki:

Ezután a stílusok beállításához egy piros szegélyt adtak az aljára, hogy láthassa, hol ér véget, a margókat és a párnázást nullázták, a szélességet 100% -ra, a magasságot pedig 150 képpontra állították be.

Ne felejtsd el lebegtetni ezt az elemet az úszóval: balra; ingatlan. A CSS-elrendezések megírásának kulcsa az, hogy mindent lebegjen, még a tárolóval megegyező szélességű dolgokat is. Így mindig tudja, hol helyezkednek el az elemek az oldalon.

A CSS leszármazott választó stílusokat csak azokra a H1 elemekre alkalmazta, amelyek a #container elemen belül vannak.

Három oszlop megszerzéséhez kezdje két oszlop építésével

Ha háromoszlopos elrendezést épít CSS-sel, elosztását két csoportra kell osztania. Tehát ehhez a három oszlopos elrendezéshez a középső és a jobb oldali oszlopot csoportosítsa és helyezze el a bal oszlop mellett két oszlopos elrendezésben ahol a bal oszlop szélessége 250 képpont, a jobb oldali oszlop szélessége pedig 610 képpont (a két oszlop mindegyike 300, plusz 10 képpont a csatorna között őket).

A bal oldali oszlop balra, míg a másik jobbra lebeg. Mivel mindkét oszlop teljes szélessége 860 képpont, ezért 10 képpontos csatorna van közöttük.

Adjon hozzá két oszlopot a széles második oszlop belsejébe

A három oszlop létrehozásához vegyen fel két osztást a második szélesebb oszlop belsejébe, ugyanúgy, mint az utolsó lépésben 2 osztást a tároló oszlopba.

Mivel ez a két 300 képpontos széles doboz egy 610 képpont széles doboz belsejében van, ismét lesz egy 10 képpontos csatorna közöttük.

Adja hozzá a láblécbe

Most, hogy az oldal többi része stílusos, felveheti a láblécbe. Használjon egy utolsó div-et "lábléc" azonosítóval, és adjon hozzá tartalmat, hogy lássa. A tetejére szegélyt is hozzáadhat, így tudni fogja, hol kezdődik.

Adja hozzá személyes stílusait és tartalmát

Miután elkészült az elrendezés, hozzáadhatja saját személyes stílusait és tartalmát. Ne feledje, hogy a fejlécen és a láblécen lévő határokat azért adták hozzá, hogy megjelenítsék az elrendezési szakaszokat, nem kifejezetten a tervezéshez.