Introducere în CSS Grid Layout. CSS Grid și Flexbox: comparație în practică. Proprietăți de plasare în grilă

De la autor: Atunci când creați site-uri web complexe, grilele fac o diferență enormă. Importanța lor în design web modern devine clar, trebuie doar să te uiți la numărul de cadre în care a fost implementată această tehnologie pentru a accelera dezvoltarea.

Odată ce vă familiarizați cu specificația CSS Grid Layout, nu veți mai avea nevoie fişiere separate stiluri dacă doriți să lucrați cu un sistem grilă. Un beneficiu la fel de important este că nu vă veți mai baza pe proprietățile inline și float pentru a poziționa elementele pe pagină. În acest tutorial vom învăța elementele de bază ale sistemelor de grilă și, de asemenea, vom crea un aspect simplu de blog.

Suport pentru browser

Pe acest moment numai IE 10+ și Edge acceptă specificația Grid Layout - pe site-urile comerciale această tehnologie nu poate fi folosit încă.

ÎN Chrome asta Opțiunea poate fi activată prin marcajul „Funcțiile platformei web experimentale” din chrome://flags. În Firefox – steag layout.css.grid.enabled.

O altă opțiune este să utilizați un polyfill și da, CSS Grid Polyfill există! Puteți utiliza oricare dintre cele trei opțiuni descrise și puteți studia Aspectul grilei în timp ce acesta este încă într-un stadiu incipient de dezvoltare.

Vă rugăm să rețineți: în IE funcționează în prezent versiune veche specificația, ceea ce înseamnă că browserul nu acceptă pe deplin noua specificație. Când ajungem la exemple, vă recomand să folosiți Chrome sau Firefox.

Terminologia sistemului de grilă

În ceea ce privește poziționarea elementelor, sistemele CSS Grid sunt aceleași tabele. in orice caz acest instrument mult mai puternică și diversă. ÎN aceasta sectiune Voi vorbi despre câțiva termeni de care va trebui să-ți amintești atunci când lucrezi cu grile:

Unități de măsură fr: Folosiți-le pentru a seta cantitatea de spațiu liber. Folosit împreună cu rânduri-grilă și coloane-grilă. Din specificație: „Alocarea spațiului are loc numai după ce toate „lungimile” sau dimensiunile rândurilor și coloanelor de conținut au fost atinse dimensiuni maxime»

Linii: liniile marchează limitele altor elemente. Sunt atât orizontale, cât și verticale. În imaginea de mai jos sunt 4 linii verticale și 4 orizontale.

Tracks: Tracks – spațiul dintre linii paralele. În imaginea de mai jos sunt 3 piste verticale și 3 orizontale.

Celulele: Celulele sunt elementele de bază ale unei rețele. Există doar 9 celule în imaginea de mai jos.

Arii: o zonă este un dreptunghi dintr-un număr arbitrar de celule. Acestea. o pistă este atât o zonă, cât și o celulă.

Poziționarea elementelor într-o grilă

Să începem cu elementele de bază. În această secțiune, vă voi arăta cum să utilizați o grilă pentru a plasa elemente în anumite locuri. Pentru a lucra cu CSS Grid Layout, trebuie să creați element părinteși unul sau mai mulți copii. De exemplu, voi lua marcajul de mai jos:

< div class = "grid-container" > < div class = "grid-element item-a" >A< / div > < div class = "grid-element item-b" >B< / div > < div class = "grid-element item-c" >C< / div > < div class = "grid-element item-d" >D< / div > < div class = "grid-element item-e" >E< / div > < div class = "grid-element item-f" >F< / div > < / div >

Pentru a crea o grilă, containerul trebuie să specifice proprietățile display:grid sau display:inline-grid, precum și alte stiluri:

Container-grilă ( afișare: grilă; șablon-grilă-coloane: 200px 10px 0,3fr 10px 0,7fr; grid-șablon-rânduri: automat 20px automat; )

Grilă - container ( display:grilă; grilă - șablon - coloane : 200px 10px 0.3fr 10px 0.7fr ; grid - template - rows : auto 20px auto ;

Proprietățile grid-template-columns și grid-template-rows stabilesc lățimea rândurilor și coloanelor. În exemplul de mai sus am creat 5 coloane. O coloană lată de 10 pixeli este folosită ca separator între elemente. Prima coloană are o lățime de 200px. A treia coloană ocupă 0,3 din spațiul rămas. Și a cincea coloană ocupă 0,7 din spațiul rămas.

Deoarece primul rând este setat la grid-template-rows: auto, acest lucru permite extinderea rândului pe măsură ce se adaugă conținut. Linia de 20px funcționează ca un separator. În demonstrația de mai jos puteți vedea că elementele sunt presate strâns unul împotriva celuilalt.

Atenție la elementul B - este situat în a doua coloană, pe care o folosim ca separator. Dacă poziționarea elementelor nu este setată manual, browserul va plasa elemente în celule de la stânga la dreapta, iar dacă acestea nu se potrivesc într-un rând, atunci cele rămase vor sări pe al doilea rând. De aceea am lăsat 4 coloane de rezervă pe a doua linie.

Pentru a muta un element în celulă dată grid, trebuie să setați poziționarea acestui element prin CSS. Înainte de a explica cum să mutați elementele de plasă, aruncați o privire la imaginea de mai jos.

În acest exemplu vom folosi un sistem de plasare a elementelor liniare. Sistem liniarînseamnă că liniile din grilă vor juca un rol dominant în plasarea elementelor. Să luăm ca exemplu elementul B. Pe orizontală acest blocîncepe pe a treia linie și se termină pe a patra linie de coloane. Pe lângă liniile verticale, acest element este situat între liniile de pe primul și al doilea rând.

Pentru a seta pornirea linie verticala element vom folosi proprietatea grid-coloana-start. În cazul nostru, valoarea va fi 3. Proprietatea grid-column-end indică linia verticală de sfârșit a elementului. În cazul nostru este 4. Valori pentru linii orizontale sunt afișate în același mod.

Pe baza celor de mai sus, concluzionăm că pentru a muta elementul B în a doua celulă, trebuie să utilizați codul:

Element-b ( grid-coloană-start: 3; grid-coloană-sfârșit: 4; grid-row-start: 1; grid-row-end: 2; )

Element - b ( grilă - coloană - început : 3 ; grilă - coloană - capăt : 4 ; grilă - rând - început : 1 ; grilă - rând - capăt : 2 ;

În mod similar, pentru a muta elementul F în a șasea celulă:

Element-f ( grid-coloană-start: 5; grid-coloană-sfârșit: 6; grid-row-start: 3; grid-row-end: 4; )

Element - f ( grilă - coloană - început : 5 ; grilă - coloană - capăt : 6 ; grilă - rând - început : 3 ; grilă - rând - capăt : 4 ;

Crearea unui aspect de bază

Acum vom crea un aspect de bază pentru blog, care va avea un antet, un subsol, o bară laterală și două secțiuni pentru conținut. Mai întâi marcajele:

< div class = "grid-container" > < div class = "grid-element header" >Antet< / div > < div class = "grid-element sidebar" >Bara laterală< / div > < div class = "grid-element main" >Conținut principal< / div > < div class = "grid-element extra" >Informații suplimentare< / div > < div class = "grid-element footer" >Subsol< / div > < / div >

Rețineți că ordinea în care sunt plasate etichetele în marcaj nu afectează poziționarea elementelor pe pagina web. Fără a schimba CSS-ul, puteți pune subsolul în marcajul de deasupra antetului, dar poziționarea elementelor va rămâne în continuare aceeași. Dar nu recomand să faci asta. Ideea principală aici este că marcajul nu vă mai spune unde va fi localizat elementul.

Tot ce trebuie să facem este să definim valorile proprietăților precum grid-row-end pentru toate elementele. Ca și în exemplul anterior, vom folosi o diagramă grilă pentru a determina valorile proprietăților.

Vă vom spune cum CSS Grid vă permite să creați markup receptiv de înaltă calitate, fără a recurge la cadre terțe precum Bootstrap.

Grila nativă oferă numeroase avantaje față de cadre, mai ales în comparație cu cea mai populară dintre toate: Bootstrap. Deoarece CSS modern vă permite să creați markup complexe fără a fi nevoie de JavaScript, codul dvs. este mai curat și mai ușor de întreținut.

Markup ar putea fi mai simplu

Înlocuirea Bootstrap cu CSS Grid va funcționa HTML este mai curat. De exemplu, luați în considerare o mică bucată din pagină pe care trebuie să o aranjam, arată astfel:

Bootstrap

Mai întâi, să ne uităm la exemplul de cod pentru această pagină în Bootstrap.

Există câteva lucruri la care să acordați atenție:

— Fiecare rând ar trebui să fie situat în propria sa div.
- Trebuie să utilizați nume de clasă pentru a crea markup (col-xs-2).
— Pe măsură ce șablonul crește și devine mai complex, același lucru se va întâmpla cu codul HTML.

Dacă vorbim despre receptivitate, marcajul va arăta și mai rău:

Grilă CSS

Acum să ne uităm la același exemplu de marcare în CSS pur:

Acest marcaj este mult mai ușor de citit. Aglomerația de cursuri a dispărut și numărul de div-uri a fost redus.

Desigur, spre deosebire de exemplul cu Bootstrap conectat la pagină, aici trebuie să descrii singur stilurile:

Mai multă flexibilitate

Să lucrăm la adaptabilitate. De exemplu, să eliminăm MENU din rândul de sus Pentru ecrane mobile. Cu alte cuvinte, să schimbăm asta:

Grilă CSS

Reconstruirea grilei CSS este foarte ușoară. Tot ce trebuie să faceți este să adăugați pur și simplu o interogare media și să descrieți ce ar trebui să se întâmple cu elementele paginii.

În acest fel, nici măcar nu trebuie să deschideți codul HTML pentru a reproiecta pagina.

Bootstrap

Dacă un dezvoltator trebuie să schimbe ceva într-un șablon Bootstrap, va trebui să înceapă prin a schimba HTML-ul în sine. De fapt, trebuie să mutați MENIU astfel încât să fie deasupra antetului.

În acest caz, simpla schimbare a comportamentului stilurilor în interogarea media nu va funcționa. Pentru a rezolva acest lucru trebuie să recurgeți la JavaScript.

Nu mai este limita de 12 coloane

Nu că aceasta este o limitare serioasă, dar în unele cazuri provoacă inconveniente. Deoarece Grilă de bootstrap este împărțit practic în 12 coloane, pot apărea probleme cu împărțirea, de exemplu, în 5, 7 sau 9 coloane.

CSS Grid vă permite să creați câte coloane într-un rând aveți nevoie.

Acest lucru se face prin setarea valorii proprietății grid-template-columns:

Apropo, folosește flexbox, care facilitează și gestionarea markupului prin CSS, dar în acest moment nici măcar nu a ieșit încă din versiunea beta.

Suport pentru browser

În momentul în care scriem acest articol, 75% din browsere acceptă CSS Grid.

Nimic nu îi împiedică pe mulți dezvoltatori să înceapă să folosească CSS Grid chiar acum, dar, din păcate, nu toate proiectele sunt gata să funcționeze cu această metodă de aspect. Cu toate acestea, mulți dezvoltatori cunoscuți, precum Morten Rand-Eriksen de la LinkedIn și Jen Simmons de la Mozilla, sunt convinși că această abordare a creării de pagini este viitorul: reprezentare vizuala ar trebui să fie separat de logica JavaScript și să se adapteze independent de aceasta.

Am observat tehnica Grids acum aproximativ un an. Apoi această tehnică, după un studiu foarte superficial, mi s-a părut inutilă și foarte experimentală; am fost respins de faptul că pentru implementări era necesar să se creeze un marcaj suplimentar. Dar acum devine dificil să nu observi numărul de site-uri web construite pe grilă, precum și numărul de articole și tutoriale despre acesta. Datorită acestora din urmă, a devenit mult mai ușor să studiezi și să înțelegi principiile și conceptele și să tragi concluzii mai mult sau mai puțin reale. Concluzia mea un an mai târziu este: „Este simplu și solutie utila care a fost creat vreodată pentru aspectul paginilor web, fiecare web designer care se respectă ar trebui să știe.”

Oricine a lucrat vreodată cu o grilă știe ce este o grilă. editori grafici (Photoshop, Fireworks, Gimp etc.)și, desigur, a apreciat necesitatea acestuia atunci când a creat orice design. Dar cum se implementează o Grilă pe web? De fapt Tabular aspectul a fost un design real de pagină web cu o Grilă, fără îndoială foarte convenabil. Dar nu și utilizarea intenționată a elementelor masa a fost îngrozitor.
Din fericire, popularitatea enormă a standardelor web a crescut și continuă să crească anul trecut, precum și suportul lor în browserele moderne, ne-au oferit posibilitatea de a crea pagini multifuncționale cu foarte puține markupuri logice. Acest aspect a fost numit bloc. Dar de asemenea bloc aspectul s-a dovedit a fi partea slabă. Atunci când creați pagini cu un set imens de elemente de diferite dimensiuni și semnificații, marcarea unor astfel de pagini a devenit o sarcină foarte dificilă și, dacă mai multe persoane lucrează la marcaj, o astfel de muncă poate deveni un coșmar.
Și apoi tehnica folosind Grid a venit în ajutor. Această tehnică este un hibrid între blocȘi Tabular aspect. Folosind-o, ne oferă:

• viteza și ușurința dezvoltării
• libertatea de poziționare
• proporționalitatea elementelor paginii și plasarea acestora

Prețul pentru toate acestea este doar un mic markup suplimentar. Cred că în zilele noastre, când costul ceasului unei persoane este mult mai scump decât hardware-ul și productivitatea, nu este greu de ghicit în ce direcție se înclină cântarul.

Ce este aspectul cu Grid? În primul rând, este un concept. Un concept care include multe aspecte de design și foarte puține reguli pentru implementarea lui. Acest lucru oferă libertate deplină și nicio standardizare în execuția sa. Voi spune și mai multe - aceeași Grid poate fi implementată de cei mai mulți căi diferite. Dacă ați citit deja despre Grilă, poate ați observat că fiecare autor pleacă dintr-un unghi nou, intrând adânc în detalii, aceasta este, ca să spunem ușor, confuz. Din fericire, au început să apară Sisteme Grid - biblioteci CSSși pentru lucrul cu Grid. Și folosind exemplul lor, poți stăpâni foarte repede principii de baza această tehnică.

Cred că nu are sens să scrieți despre toate aspectele Grid-ului; puteți găsi cu ușurință informații despre aceasta pe Internet. Vă sugerez să vă creați propriul simplu Sistem grilă.

Mai întâi trebuie să înțelegeți că grila constă din coloane și spații între ele. Există trei valori principale - lățimea grilei, lățimea coloanei și lățimea spațiului dintre coloane. Lățimea coloanelor depinde de numărul lor.

Să încercăm să facem o grilă de 950 de pixeli lățime cu 16 coloane cu spațiere de 10 pixeli, deci o coloană ar trebui să aibă o lățime de 50 de pixeli. După ce am înțeles toate valorile, deschidem orice editor grafic cunoscut de noi și creăm un layout. De asemenea, puteți adăuga padding la Grid din stânga și din dreapta, să zicem 20 de pixeli fiecare, iar acest lucru va avea ca rezultat un aspect cu o lățime de 990 de pixeli. Puteți vedea exemplul meu.

Acum putem începe să ne creăm biblioteca. La fel ca majoritatea bibliotecilor CSS, a noastră are nevoie de o resetare globală, sugerez Resetarea CSS a lui Eric Mayer, păstrând resetare.css hai sa cream grid.css la care putem adăuga imediat o metodă de curățare a containerelor care conțin blocuri plutitoare – Clear Fix. Primul lucru de care avem nevoie este o regulă pentru un container care va conține toate coloanele noastre. Lățimea fiecărui container este egală cu lățimea grilei noastre.

.container(
marja: 0 auto;
latime: 950px;
}

Acum putem adăuga o regulă pentru coloanele noastre, care conține lățimea și umplutura. Indentarea acționează ca un gol (jgheab)între coloane.

.coloană(
plutește la stânga;
margine-dreapta: 10px;
preaplin: ascuns;
latime: 50px;
}

Ultima coloană nu are nevoie de indentare; pentru a face acest lucru, să adăugăm și o regulă pentru ea:

Containerele noastre conțin coloane, coloanele sunt blocuri plutitoare, așa că trebuie curățate. Pentru a evita .clearfix inutil în markup, puteți aplica această regulă containerelor:

.clearfix:după, .container:dupa{
continut: ".";
afisare: bloc;
inaltime: 0;
clar: ambele;
vizibilitate: ascuns;
}

clearfix, .container(afisare: inline-block; )

/* Se ascunde din IE-mac \*/
*html.clearfix, *html.container(înălțime: 1%;)
.clearfix, .container(afisare: bloc;)
/* Încheiați ascunderea din IE-mac */

Acum putem începe cu coloanele noastre. Coloanele pot avea două sau trei lățime și așa mai departe. Pentru a face acest lucru, le putem aplica următoarele reguli:

.span-1 ( lățime: 50px; )
.span-2 (lățime: 110px; )
.span-3 (lățime: 170px; )
.span-4 (lățime: 230px; )
.span-5 (lățime: 290px; )
.span-6 (lățime: 350px; )
.span-7 (lățime: 410px; )
.span-8 (lățime: 470px; )
.span-9 (lățime: 530px; )
.span-10 (lățime: 590px; )
.span-11 (lățime: 650px; )
.span-12 (lățime: 710px; )
.span-13 (lățime: 770px; )
.span-14 (lățime: 830px; )
.span-15 (lățime: 890px; )
.span-16 ( lățime: 950 px; margine-dreapta: 0; )

În principiu, acesta este tot ceea ce este necesar pentru implementările Grid; puteți adăuga, de asemenea, un wrapper și o clasă pentru vizualizarea Grid-ului cu un aspect. Să creăm main.css si adauga la el:

.wrapper(
marja: 0 auto;
latime: 990px;
}
.acoperire(
fundal: url transparent(overlay.png) repetare-y derulare sus, stânga;
}

Iată cum ar putea arăta aspectul:

Cred că este suficient pentru început.
Puteți vedea exemplul meu

Salutare tuturor! Astăzi vom vorbi despre ce sunt sistemele grid? sau pur și simplu grile flexibile în aspect adaptiv.

Mai întâi să definim ce este Sistem grilă.

Sistem grilă- o colecție de stiluri bazate pe clasă care permit utilizatorului să controleze aspectul paginii folosind un sistem de rânduri și coloane.

Să ne imaginăm că avem o pagină de blog. Este împărțit în 2 coloane: partea principală din stânga și bara laterală din dreapta. Să încercăm să creăm o grilă flexibilă pentru o astfel de pagină.

Ei bine, mai întâi trebuie să facem ceva de bază, dar... html marcajele

Aici avem un bloc care conține întreaga pagină, conține un bloc cu blog, care conține 2 blocuri: partea principală a paginii și bara laterală.

Deci întreaga noastră pagină va avea dimensiunea 960px. Întreaga grilă este împărțită în 12 coloane 69px. fiecare. Partea de blog va fi largă 900px. Partea principală a paginii va fi 566 px, bară laterală - 331px.

Asta obținem până la urmă

#pagina (
marja: 36px automat;
latime: 960px;
}

Blog (
marjă: 0 auto 53px;
latime: 900px;
}

Blog.main (
plutește la stânga;
lățime: 566px;
}

Blog .sidebar (
plutire: dreapta;
latime: 331px;
}

Totul ar fi bine, dar, după cum puteți vedea, toate acestea sunt statice, specificate în pixeli. Dorim ca grila noastră să își schimbe dimensiunea în funcție de ecranul pe care este vizualizată pagina, prin urmare, trebuie să setăm totul în la sută. Să o facem.

Pentru aceasta există aceeași formulă ca și pentru fonturi

scop / context = rezultat

Să convertim un bloc din întreaga pagină din pixeli în procente.

#pagina (
marja: 36px automat;
latime: 90%;
}

90% ales pentru că în acest caz vom avea și indentări de-a lungul marginilor de-a lungul 5% . Cu toate acestea, puteți alege o altă valoare.

Folosim formula noastră: 900 / 960 = 0.9357

Să înmulțim rezultatul cu 100 pentru a primi dobândă și o vom înregistra în contul nostru css.

Blog (
marjă: 0 auto 53px;
latime: 93,75%;
}

Același lucru trebuie făcut cu coloanele, dar observați că contextul s-a schimbat. Deoarece coloanele sunt în interiorul unui bloc cu o clasă .blog, atunci va fi contextul. Hai să facem calculul.

566 ÷ 900 = .628888889

331 ÷ 900 = .367777778

Convertim totul în procente și îl scriem în foaia de stil.

Blog.main (
plutește la stânga;
lățime: 62,8888889%;
}

Blog .sidebar (
plutire: dreapta;
lățime: 36,7777778%;
}

Asta e tot! Acum avem o grilă flexibilă și o putem folosi pentru aspect.

După cum puteți vedea, totul este foarte simplu. In nucleu plasă flexibilă, ca un font flexibil, există încă aceeași formulă, amintindu-ne pe care, puteți crea cu ușurință site-uri web receptive.

Nota! După cum puteți vedea, am ajuns cu valori procentuale destul de lungi. Unii vă pot sfătui să le rotunjiți, dar nu ar trebui să faceți niciodată asta! Tine minte!

Și asta este tot pentru mine, vă mulțumesc pentru atenție și aspect adaptativ de succes!

În special pentru utilizatorii site-ului, oferim o lecție practică despre utilizarea sistemului 960 Grid. Imaginați-vă că ni s-a dat un design pentru aspect. În primul rând, trebuie să schițăm un plan pentru implementarea structurii site-ului și abia apoi să trecem direct la cod. După ce ați studiat acest articol, veți putea gestiona orice aspect clasic în cel mai scurt timp posibil și culoarea naturală a părului timp de mulți ani (fără păr gri). Deci, iată designul nostru:

1. Creați o plasă

După cum știți deja, sistemul 960 Grid utilizează o gamă întreagă de clase și este disponibil în mai multe variante (versiuni cu 12 coloane și 16 coloane). Containerul principal, indiferent de numărul de coloane, va avea întotdeauna o lățime de 960 px. Pentru acest design vom alege un sistem cu 12 coloane. Fiecare bloc din sistemul 960 Grid are marginea(marja) 0 10px. Acest lucru ne garantează o umplutură uniformă, proporțională de 20px. Pentru cei care sunt confuzi de dimensiunea de 960px, vă sfătuiesc să aruncați o privire la această diagramă. Această dimensiune este optim pentru marea majoritate a rezoluțiilor monitorului. Deci, avem capacitatea de a crea blocuri de această lățime:

• 140px
• 220px
• 300px
• 380px
• 460px
• 540px
• 620px
• 700px
• 780px
• 860px
• 940px

Fiecare dimensiune are propria sa clasă, al cărei nume se bazează pe schema grid_X, unde X este numărul de coloane. Dacă aveți nevoie de un bloc de 960 px, atunci ar trebui să selectați clasa grid_12. Pentru a activa sistemul 960 Grid, trebuie container părinte setați clasa container_12 sau container 16. Mai jos este mic exemplu pagina formata din 3 blocuri. Lățimea primului este egală cu lățimea de 960 px, restul de 2 sunt la jumătate mai mari:

Amintiți-vă că atunci când umpleți un rând cu blocuri cu clasa grid_X, asigurați-vă că în total acestea însumează nu mai mult de 12. De exemplu, așa cum avem - două blocuri grid_6 + grid_6 = 12. Mai puțin este posibil: 6, 4 , 2 etc. d. Acum că am trecut peste principiile de bază, putem începe exercițiul practic:

2. Creați o machetă

Să încercăm să construim o diagramă cu ceea ce trebuie să inventăm. În primul rând, avem nevoie de 2 blocuri de 960px. Unul pentru logo, celălalt pentru navigare. Urmează 2 blocuri (pe o linie), pentru o prezentare de poster și site, un bloc separator (pe toată lățimea), 4 coloane (pe o linie), din nou un bloc separator și un subsol. Ceva de genul:

Cred că după ce ai văzut imaginea știi deja de ce curs avem nevoie. Încercați-le singur, apoi aruncați o privire la codul de mai jos pentru a vedea dacă gândiți corect:

Amintiți-vă că la sfârșitul fiecărei linii trebuie să introducem

pentru afișare normală în toate browserele. Nu uitați să includeți și 960 Grid CSS pe pagina dvs. în secțiunea de cap.

Deci, scheletul este gata, așa că este timpul să începem decorarea. Setați înălțimea și culoare de fundal separatoare de blocuri. Înălțimea blocului de meniu va depinde de meniul în sine. De asemenea, nu uitați să adăugați sigla dvs.:

Div.spacer (culoare fundal: #8FC73E; înălțime: 1em; ) div#navbar (culoare fundal: #8FC73E; umplutură: 10px 0; )

Iată ce ar trebui să obținem:

Nu ne interesează deloc informații în acest moment, așa că puteți introduce conținut de aici în coloanele centrale această pagină. Înainte de a începe top parte, hai să avem grijă de cel de jos. În designul nostru, fundalul subsolului este colorat culoare gri. Momentan nu putem implementa acest lucru deoarece, dacă vă amintiți, există o indentație între blocuri care nu ne va permite să pictăm complet peste această zonă. Pentru a rezolva această problemă, să mutăm 3 blocuri legate de subsol în blocuri separate cu id = footer. Încă un detaliu: atunci când folosim clase în cadrul claselor, ar fi bine să setăm valorile alfa (pentru a indica care bloc va fi primul și omega - pentru ultimul):

Div#footer (culoare de fundal: #e5e5e6; )

Perfect! Subsolul nostru are acum o culoare de fundal. Adăugați ceva text și să trecem la blocul de navigare. Conform tuturor legilor principii moderne layout, navigarea este o listă nenumerotată. Adăugați următorul cod și stil:

• Articole
• Subiecte
• Despre
• Editori
• a lua legatura