Modulul CSS necesită să vă gândiți la aspectul site-ului dvs. în ansamblu, apoi să luați piesele și să le puneți împreună. Aflați cum să construiți o schemă simplă în 3 coloane cu CSS.
01 din 09Desenați aspectul
Puteți să vă desenați aspectul pe hârtie sau într-un program grafic. Dacă aveți deja un cadru de sârmă sau un design mai extins în minte, simplificați-l la casetele de bază care alcătuiesc site-ul. Acest design care însoțește acest articol are trei coloane în zona de conținut principal, precum și un antet și subsol. Dacă te uiți atent, poți vedea că cele trei coloane nu sunt egale în lățime.
După ce ați desenat planul, puteți începe să vă gândiți la dimensiuni. Acest exemplu de design va avea următoarele dimensiuni de bază:
- Nu mai mult de 900 de pixeli lățime
- 20 px jgheab în stânga
- 10 px între coloane și rânduri
- Coloane care sunt de 250px, 300px și 300px lățime
- Rândul superior este de 150 de pixeli înălțime
- Rândul inferior este de 100 de pixeli înălțime
Scrieți cod HTML / CSS de bază și creați un element container
Deoarece această pagină va fi un document HTML valid, începeți cu un container HTML gol
Adăugați în stilurile CSS de bază pentru a zero marginile paginii, marginile și paddings. În timp ce există alte stiluri CSS standard pentru documente noi, aceste stiluri reprezintă minimul necesar pentru a obține un aspect curat. Adăugați-le în capul documentului:
Pentru a începe construirea layout-ului, puneți un element container. Se întâmplă uneori să puteți scăpa mai târziu de container, dar pentru majoritatea planurilor cu lățime fixă, având elementul de container face mai ușor să gestionați din diferite browsere Web. Deci, în organism, puneți acest lucru: Și în foaia de stil CSS puneți: Containerul definește cât de largă va fi conținutul paginii web, precum și orice margini din exterior și umplutură din interior. Pentru acest document, containerul are o lățime de 870 de pixeli, cu jgheab de 20 de pixeli în stânga. Jgheabul este configurat cu un stil de marjă, dar căptușeala de pe container este zeroată pentru a împiedica ca elementele să fie la fel de largi ca și containerul. #container { lățime: 870px; margine: 0 0 0 20px; / * sus dreapta jos stânga * / umplutura: 0; } Dacă salvați acum documentul, va fi dificil să vedeți recipientul, deoarece nu are nimic în el. Dacă adăugați un text de înlocuire, veți putea vedea elementul container mai clar. Modul în care decideți să stilul rândul antetului depinde foarte mult de ceea ce este în el. Dacă rândul cu antet va avea doar un logo grafic și un titlu, apoi folosind o etichetă de titlu ( HTML pentru rândul antetului se află în partea de sus a containerului și arată astfel: Apoi, pentru a seta stilurile pe ea, a fost adăugată o margine roșie în partea inferioară, pentru a putea vedea unde se termină, margini și umplutură au fost eliminate, lățimea setată la 100% și înălțimea la 150px: #container h1 { marja: 0; umplutura: 0; lățime: 100%; înălțime: 150px; plutește la stânga; frontieră-jos: # c00 solid 3px; } Nu uitați să plutiți acest element cu flotorul: stânga; proprietate. Cheia pentru a scrie machete CSS este să plutească totul - chiar și lucruri care au aceeași lățime ca și containerul. Astfel, stii mereu unde vor fi elementele pe pagina. Un selector CSS descendent a aplicat stiluri numai elementelor H1 care se află în interiorul elementului #container. Când construiți o structură cu trei coloane cu CSS, trebuie să împărțiți aspectul în două grupuri. Deci, pentru această structură cu trei coloane, coloana din mijloc și din dreapta și grupată și plasată lângă coloana din stânga într-un aspect cu două coloane, în cazul în care coloana din stânga este de 250px lățime, iar coloana din dreapta este lățimea de 610px (300 fiecare pentru cele două coloane , plus 10px pentru jgheabul dintre ele). HTML-ul arată astfel: Ut aliquip ex commodo consequat. Închideți fereastra de mai jos și faceți clic pe butonul din stânga sus. În repetare în voluptate quis exercițiu eu eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex commodo consequat. Vă rugăm să vă anunți la minimum, vă rugăm să luați în considerare temporar incididente ultima muncă. Ut labore și dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Textul de substituire în coloane face ca acestea să fie mai vizibile la testare. CSS arată astfel: #container # col1 { lățime: 250px; plutește la stânga; } #container # col2outer { lățime: 610px; float: dreapta; marja: 0; umplutura: 0; } Coloana din stânga este plutind spre stânga, în timp ce cealaltă este flotată spre dreapta. Deoarece lățimea totală a ambelor coloane este de 860 de pixeli, există un jgheab de 10 pixeli între ele. Pentru a crea cele trei coloane, adăugați două divuri în interiorul celei de-a doua coloane, așa cum ați adăugat 2 divi în interiorul coloanei containerului în ultimul pas. HTML-ul arată astfel: Vă rugăm să vă anunți la minimum, vă rugăm să luați în considerare temporar incididente ultima muncă. Ut labore și dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde toate temporis incidenta la munca si dolore. Și CSS arată astfel: # col2outer # col2mid { lățime: 300px; plutește la stânga; } # col2outer # col2side { lățime: 300px; float: dreapta; } Din moment ce aceste două cutii de lățimea de 300px se află într-o cutie largă de 610px, va exista din nou un jgheab de 10px între ele. Acum că restul paginii este stilizat, puteți adăuga în subsolul paginii. 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 o margine în partea de sus, astfel încât să știți de unde începe. HTML: CSS: #container #footer {
plutește la stânga;
lățime: 870px;
frontală-sus: # c00 solid 3px;
} 08 din 09 Acum că ați terminat aspectul, puteți începe să adăugați propriile stiluri personale și conținut. Rețineți că frontierele de pe antet și subsol au fost adăugate pentru a afișa secțiunile layout-ului, nu pentru proiectare. Aici este întregul document, HTML și CSS: Stilul containerului
Utilizați o etichetă de titlu pentru Antet
) are mai multă sens decât să folosească a
Rândul meu de cap
Pentru a obține trei coloane, începeți prin construirea a două coloane
Adăugați două coloane în interiorul celei de-a doua coloane
Adăugați în subsol
Adăugați stilul personal și conținutul
HTML / CSS finale
