Acest articol explică cum să creați un aspect cu 3 coloane în CSS. Instrucțiunile se aplică CSS3 și versiuni mai vechi.

Desenați aspectul

Puteți desena aspectul pe hârtie sau într-un fișier program grafic. Dacă aveți deja în vedere un cadru de sârmă sau un design chiar mai extins, simplificați-l în casetele de bază care alcătuiesc site-ul. Acest design care însoțește acest articol are trei coloane în zona principală de conținut, precum și un antet și un subsol. Dacă priviți cu atenție, puteți vedea că cele trei coloane nu au o lățime egală.

După ce ați trasat aspectul, puteți începe să vă gândiți la dimensiuni. Acest exemplu de proiectare va avea următoarele dimensiuni de bază:

• Nu mai mult de 900 de pixeli lățime
• Jgheab de 20 px în stânga
• 10 px între coloane și rânduri
instagram viewer
• Coloane cu lățimea de 250 px, 300 px și 300 px
• Rândul de sus are o înălțime de 150 px
• Rândul de jos are o înălțime de 100 px

Scrieți HTML / CSS de bază și creați un element de container

Deoarece această pagină va fi validă HTML document, începeți cu un container HTML gol.

Adăugați stilurile CSS de bază la puneți la zero marginile paginii, marginile și căptușelile. În timp ce există altele stiluri CSS standard pentru documentele noi, aceste stiluri sunt minimul de care aveți nevoie pentru a obține un aspect curat. Adăugați-le în capul documentului.

Pentru a începe construirea aspectului, introduceți un element container. Uneori se întâmplă să puteți scăpa de container mai târziu, dar pentru majoritatea aspectelor cu lățime fixă, dacă elementul container este mai ușor de gestionat pe diferite site-uri web browsere.

Stilizați containerul

Containerul definește cât de larg va fi conținutul paginii web, precum și orice margini din exterior și căptușeală în interior. Pentru acest document, containerul are o lățime de 870 px, cu un jgheab de 20 de pixeli în stânga. Jgheabul este configurat cu un stil de margine, dar căptușeala containerului este redusă la zero pentru a împiedica orice elemente să fie la fel de largi ca containerul.

Dacă salvați documentul acum, va fi dificil să vedeți containerul, deoarece nu are nimic în el. Dacă adăugați text substituent, veți putea vedea elementul container mai clar.

Utilizați o etichetă de titlu pentru antet

Modul în care decideți să stilizați rândul de antet depinde foarte mult de ceea ce conține. Dacă rândul de antet va avea doar un logo grafic și un titlu, atunci folosind o etichetă de titlu (

) are mai mult sens decât utilizarea unui

. Puteți stiliza titlul în același mod în care stilizați un div și puteți evita etichetele străine.

Codul HTML pentru rândul de antet merge în partea de sus a containerului și arată astfel:

Apoi, pentru a seta stilurile pe el, a fost adăugată o margine roșie în partea de jos, astfel încât să puteți vedea unde se termină, marginile și căptușeala au fost reduse la zero, lățimea setată la 100% și înălțimea la 150 px.

Nu uitați să plutiți acest element cu float: left; proprietate. Cheia scrierii machetelor CSS este să plutească totul, chiar și lucrurile care au aceeași lățime ca containerul. În acest fel, știi întotdeauna unde vor sta elementele pe pagină.

A Selector descendent CSS a aplicat stiluri numai elementelor H1 care se află în interiorul elementului #container.

Pentru a obține trei coloane, începeți prin construirea a două coloane

Când creați un aspect cu trei coloane cu CSS, trebuie să vă împărțiți aspectul în grupuri de două. Deci, pentru acest aspect cu trei coloane, coloana din mijloc și dreapta și grupate și plasate lângă coloana din stânga într-un aspect cu două coloane unde coloana din stânga are o lățime de 250 px, iar coloana din dreapta are o lățime de 610 px (câte 300 pentru cele două coloane, plus 10 px pentru jgheabul dintre lor).

Coloana din stânga este plutită spre stânga, în timp ce cealaltă este plutită spre dreapta. Deoarece lățimea totală a ambelor coloane este de 860 px, există un jgheab de 10 px între ele.

Adăugați două coloane în interiorul celei de-a doua coloane

Pentru a crea cele trei coloane, adăugați două divs în interiorul celei de-a doua coloane mai largi, la fel cum ați adăugat 2 divs în coloana container în ultimul pas.

Deoarece aceste două cutii cu lățimea de 300 px se află într-o cutie lată de 610 px, va exista din nou un jgheab de 10 px între ele.

Adăugați în subsol

Acum că restul paginii are stil, puteți adăuga în subsol. Utilizați un ultim div cu un „subsol” id și adăugați conținut, astfel încât să îl puteți vedea. De asemenea, puteți adăuga un chenar în partea de sus, astfel încât să știți de unde începe.

Adăugați stiluri personale și conținut

Acum că ați finalizat aspectul, puteți începe să adăugați propriile stiluri și conținut personal. Amintiți-vă că marginile de pe antet și subsol au fost adăugate pentru a afișa secțiunile de aspect, nu special pentru proiectare.