V tem članku je razloženo, kako zgraditi postavitev s 3 stolpci v CSS. Navodila veljajo za CSS3 in starejše.

Narišite svojo postavitev

Postavitev lahko narišete na papirju ali v grafični program. Če že imate v mislih žični okvir ali celo obsežnejši dizajn, ga poenostavite na osnovna polja, ki sestavljajo spletno mesto. Ta zasnova, ki spremlja ta članek, ima tri stolpce v glavnem področju vsebine ter glavo in nogo. Če dobro pogledate, lahko vidite, da trije stolpci niso enaki po širini.

Ko si postavite postavitev, lahko začnete razmišljati o dimenzijah. Ta primer zasnove bo imel naslednje osnovne dimenzije:

• Širok največ 900 pik
• 20 px žleb na levi
• 10 px med stolpci in vrsticami
• Širine stolpcev so 250, 300 in 300 slikovnih pik
• Zgornja vrstica je visoka 150 slikovnih pik
• Spodnja vrstica je visoka 100 slikovnih pik

Napišite osnovni HTML / CSS in ustvarite element vsebnika

Ker bo ta stran veljavna HTML dokument, začnite s praznim vsebnikom HTML.

Dodajte osnovne sloge CSS v izbrišite robove strani, obrobe in obloge strani. Medtem ko obstajajo drugi standardni slogi CSS za nove dokumente so ti slogi najmanjši, kar potrebujete za čisto postavitev. Dodajte jih na glavo dokumenta.

Če želite začeti graditi postavitev, vstavite element vsebnika. Včasih se zgodi, da se lahko vsebnika pozneje znebite, toda za večino postavitev s fiksno širino element vsebnika olajša upravljanje prek različnih spletnih mest. brskalniki.

Oblikujte posodo

Vsebnik določa, kako široka bo vsebina spletne strani, pa tudi morebitni robovi zunaj in oblazinjenje znotraj. Za ta dokument je vsebnik širok 870 slikovnih pik z žlebom 20 slikovnih pik na levi. Žleb je nastavljen s slogom roba, vendar je oblazinjenje na posodi ničelno, da se prepreči, da bi bili elementi tako široki kot posoda.

Če dokument shranite zdaj, bo vsebnik težko videti, ker v njem ni ničesar. Če dodate nadomestno besedilo, boste lahko bolj jasno videli element vsebnika.

Za glavo uporabite oznako naslova

Kako se odločite za oblikovanje vrstice z glavo, je zelo odvisno od tega, kaj je v njej. Če bo vrstica glave imela samo grafiko logotipa in naslov, potem uporabite oznako naslova (

) je bolj smiselno kot uporaba a

. Naslov lahko oblikujete na enak način kot div in se izognete tujim oznakam.

HTML za vrstico z glavo gre na vrh vsebnika in je videti tako:

Nato je bila za nastavitev slogov na dnu dodana rdeča obroba, tako da ste lahko videli, kje se konča, robovi in ​​oblazinjenje so bili ničlirani, širina nastavljena na 100% in višina na 150 slikovnih pik.

Ne pozabite plavati tega elementa s floatom: left; lastnine. Ključno za pisanje postavitev CSS je plavanje vsega, tudi stvari, ki so enake širine kot vsebnik. Tako vedno veste, kje bodo elementi na strani.

A Izbirnik potomcev CSS uporabljeni slogi samo za elemente H1, ki so znotraj elementa #container.

Če želite dobiti tri stolpce, začnite z gradnjo dveh stolpcev

Ko gradite postavitev s tremi stolpci s CSS, morate svojo postavitev razdeliti v dve skupini. Torej, za to postavitev s tremi stolpci, srednji in desni stolpec ter zbrani in postavljeni poleg levega stolpca v postavitvi z dvema stolpcema kjer je levi stolpec širok 250 slikovnih pik, desni pa 610 slikovnih pik (po 300 za oba stolpca plus 10 slikovnih pik za žleb med njim).

Stolpec na levi je lebdeč v levo, drugi pa v levo. Ker je skupna širina obeh stolpcev 860px, je med njimi žleb 10px.

Dodajte dva stolpca znotraj širokega drugega stolpca

Če želite ustvariti tri stolpce, dodajte dva div-ja znotraj širšega drugega stolpca, tako kot ste v zadnjem koraku dodali 2 div-ja znotraj stolpca vsebnika.

Ker sta ti dve škatli širine 300 slikovnih pik znotraj škatle širine 610 slikovnih pik, bo med njima spet žleb z velikostjo 10 slikovnih pik.

Dodajte v nogo

Zdaj, ko je preostala stran oblikovana, lahko dodate nogo. Uporabite zadnji div z ID-jem "noge" in dodajte vsebino, da jo boste lahko videli. Na vrhu lahko dodate tudi obrobo, tako da boste vedeli, kje se začne.

Dodajte svoje osebne sloge in vsebino

Zdaj, ko je postavitev končana, lahko začnete dodajati svoje osebne sloge in vsebino. Ne pozabite, da so bile meje na glavo in nogo dodane za prikaz odsekov postavitve, ne posebej za oblikovanje.