Cum se construiesc layout-uri complexe utilizând CSS

Amenajarea pentru Web a fost întotdeauna limitată, într-adevăr nu a fost niciodată ceva dedicat cu adevărat pentru a face conținut ușor de afișat într-un format care are sens.

Înapoi în anii '90, când Webul a luat prima dată, designerii care au fost utilizați pentru a stabili conținut pe o rețea, au găsit singura modalitate de a obține același rezultat în browser a fost de a folosi tabelul. Celulele care fuzionează au condus la complex Layout-urile site-ului , dar acest lucru a jucat Havoc cu accesibilitate și SEO. Înainte și astăzi există toate modalitățile de a plasa conținut cu flotoare, cutii flexibile și așa mai departe.

CSS3 a împins cu adevărat capacitățile web înainte și din 2014 a existat CSS Grid Layout. . Acest lucru are în prezent suport de browser de 75%, deci ajunge la punctul în momentul în care este timpul să-i acordați serios. Fundația Zurbului 6 Are la bord și folosește acest lucru pentru a-și putea rețelele.

Acest tutorial se va concentra pe crearea unei caracteristici în stil reviste care vă va arăta cum să perfecționați Designul web receptiv pentru dimensiunile ecranului mediu și mic.

Descărcați fișierele Tutorial aici

01. Începeți

Deschideți fișierul "grilă1.html" din dosarul Start din Fișiere de proiect. . Layout-ul HTML pentru aceasta are cinci etichete div, pur și simplu numit element1-5 ca cursuri CSS. Acestea vor fi conținutul introdus în grilă. Înfășurarea recipientului Aceasta va defini grila, care va avea patru coloane.

 & Lt; div clasa = "container" & gt;
  & lt; div clasa = "item1" & gt; elementul 1 & lt; / div & gt;
  & lt; div Clasa = "item2" & gt; elementul 2 & Lt; / Div & Gt;
  & Lt; Div clasa = "item3" & gt; elementul 3 & lt; / div & gt;
  & lt; div Clasa = "item4" & gt; elementul 4 & lt; / div & gt;
  & lt; div clasa = "item5" & gt; elementul 5 & Lt; / div & gt;
& lt; / div & gt; 

02. Verificați CSS pentru grilă

Privind în secțiunea capului, puteți vedea că "recipientul" a fost spus să fie stabilit ca o rețea, cu înălțime automată pentru rânduri, în timp ce coloanele trebuie să fie setate la patru cu fiecare set la 25% din browser . Verificați acest lucru în browser și veți vedea că fiecare element este atribuit automat următoarea poziție de rețea disponibilă.

 .container {
  Afișaj: grilă;
  Rânduri de șabloane: Auto;
  Grid-șablon-coloane: repetați (4, 25%); } 

03. Definiți pozițiile grilei

Acum aruncați o privire la fișierul "grilă2.html". Este la fel ca primul fișier, cu excepția "item1" și "item2" sunt date specifice. Primul este poziționat în rândul 1 și se termină înainte de rândul 2. Coloana începe la 1 și se termină la 3, așa că se întinde două coloane. Al doilea începe la coloana 3 și ia următoarele două coloane. Elementele rămase completează următoarele sloturi de rețea disponibile.

 .Item1 {
  Grid-Row-Start: 1;
  Grid-Row-end: 2;
  Grid-coloană-pornire: 1;
  Grid-coloană-capăt: 3;
}
.Item2 {
  Grid-Row-Start: 1;
  Grid-Row-end: 2;
  Grid-coloană-Start: 3;
  Grid-coloană-sfârșitul: 5;
} 

04. Utilizați un șablon de grilă

Deschideți "grilă33html" și priviți corpul HTML. Veți vedea că există un aspect cu un antet, bara laterală, secțiunea principală de conținut și un subsol. Puteți adăuga mai mult text în conținut pentru a vedea ce se întâmplă atunci când acesta este introdus. Grila va utiliza o caracteristică a șablonului pentru a face aceste secțiuni într-un aspect.

 & Lt; div clasa = "container" & gt;
  & Lt; Div clasa = "antet" & gt; header & lt; / div & gt;
  & Lt; Div Clasa = "Sidebar" & GT; Sidebar & Lt; / Div & Gt;
  & Lt; Div clasa = "conținut" & gt; conținut & lt; / div & gt;
  & lt; div clasa = "subsol" & gt; sub; / div & gt;
& lt; / div & gt; 

05. Definiți șablonul

Uită-te la CSS pentru container. Este din nou definită ca o rețea. Rândul de sus va fi de 200px mare, mijlocul va fi automat și ultimul rând va fi de 100px mare. Coloanele trebuie să fie de 33% lățime și să-și automatizeze restul. Șablonul afirmă că antetul va umple ambele coloane. Următorul rând va fi bara laterală în prima coloană și conținutul în următorul. Subsolul trece peste ambele.

 .container {
  Afișaj: grilă;
  Grid-șabloane-rânduri: 200px auto 100px;
  Grid-șabloane-coloane: 33% auto;
  Zonele de șablon de grilă:
  "antet antet"
  "Conținut lateral"
  "subsol subsol"; } 

06. Liniați șablonul la clasă

Pentru a conecta clasa la șablon, codul prezentat aici definește acest lucru. Fiecare zonă de rețea este numită și linkul este creat. Conținutul nu este afișat aici, dar este în documentul "Grid3.html". Uită-te la asta în browser pentru a vedea aspectul grilajului. Deoarece sunt definite două coloane, șablonul are nevoie de două zone din fiecare dintre virgulele inversate.

 .Header {
  Zona de grilă: antet;
}
.sidebar {
  Zona grilă: bara laterală;
}
.subsol {
  zona grilă: subsol; } 

07. Faceți-o receptivă

Pentru a face "Grid3.html" receptiv, este introdusă o interogare media, iar rândul de sus este păstrat la 200%, în timp ce rândurile rămase vor fi automat dimensionate. Există o singură coloană, lățimea completă, astfel încât șablonul are un cuvânt în fiecare virgulă inversată pentru a defini aspectul. Acestea pot fi ușor reordonate fără a schimba niciuna dintre HTML.

 ecran @Media și (max-lățime: 699px) {
  .container {
  Afișaj: grilă;
  Grid-șabloane-rânduri: 200px auto;
  Grid-șabloane-coloane: 100%;
  Zonele de șablon de grilă: "Header" "Bara laterală" "Footer";
  }
} 

08. Lucrați pe un aspect real

Acum deschideți "index.html '- toate HTML pentru conținutul a fost deja creat, deoarece are unele dintre CSS pentru elementele de design. Adăugați această rețea la etichetele de stil din secțiunea Head. Acest lucru creează o grilă cu trei coloane cu șablonul pentru fiecare secțiune. Notați oprirea completă a secțiunilor goale.

 .container1 {
  Lățime: 80%;
  Marja: 0 Auto;
  Afișaj: grilă;
  Rânduri de șabloane: Auto;
  Grid-șablon-coloane: 33,3% 33,3% Auto;
  Zonele de șablon de rețea: "Antetul antetului antetului" "StandFirst Standfirst".
} 

09. Conectați șablonul

Ca și în pasul anterior, acest lucru leagă antetul cu șablonul. Antetul i se spune să cuprindă toate cele trei coloane de grilă, atunci statul de așteptare este setat să ia două coloane și să aibă o coloană goală în stânga. Dacă bifați browserul, această coloană este completată deoarece autostrăzile restul de conținut următorul spațiu disponibil - nu va face acest lucru atunci când este stabilit totuși.

 .Header {
  Zona de grilă: antet;
}
.standfirst {
  Zona Grilă: Standfirst;
} 

10. Adăugați următoarele zone

Acum, primul articol, cotația de tragere și imaginea de focalizare sunt plasate în design. Citatul de tragere și imaginea sunt alături de același rând. În acest stadiu, articolul 2 nu a fost plasat, astfel încât să ia primul spațiu disponibil pe grila care se află lângă standf.

 .Articolul1 {
  Zona grilă: Articolul1;
}
.Pullquote {
  Zona grilă: tragequote;
}
.focus {
  Zona grilă: Focus;
  Text-align: centru; } 

11. Finalizați prima grilă

Adăugarea celui de-al doilea articol CSS permite plasarea corectă a primei grila. Privind la acest lucru din browser, va arăta că aspectul funcționează cu imaginea de fundal și creează tipul de aspect văzut în reviste, unde designerul lucrează în jurul unei imagini de fundal mare.

 .Articolul2 {
    zona grilă: articolul 2;
    Coloana-Gap: 65px;
    Numărătoarea coloanei: 2;
} 

12. Adăugați un fundal alb

Înainte de a începe a doua grilă, vă puteți întreba de ce este nevoie de două rețele. Motivul fiind că această rețea va avea un fundal alb de lățime întreagă, astfel încât acest CSS să înfășoare cea de-a doua rețea. Aceasta este de a da această secțiune sentimentul unei a doua pagini în design.

 .whitebg {
    Padding: 100px 0;
    Culoare de fundal: #ddd;
} 

13. Faceți oa doua grilă

A doua grilă este mai simplă decât prima. Există trei coloane, cu o înălțime automată pe rânduri. Conținutul va umple fiecare coloană, astfel încât nu este nevoie să definiți zonele șablonului. Cu toate acestea, atunci când se adaugă designul tabletei, acest lucru trebuie să comute la două coloane, deci este necesar un reflow și numele vor fi importante.

 .Container2 {
    Lățime: 80%;
    Marja: 0 Auto;
    Afișaj: grilă;
    Rânduri de șabloane: Auto;
    Grid-șablon-coloane: 33,3% 33,3% Auto;
    Zonele de șablon de grilă: "img1 img2 articolul 3";
} 

14. Adăugați coloanele

Fiecare dintre clasele CSS din a doua rețea este spus să se conecteze cu coloana relevantă, așa cum este definită în șablonul de grilă. Culoarea textului articolului este schimbată doar pentru ao face să se desprindă de fundalul mai ușor al acestei secțiuni. Cu doar subsolul pentru a finaliza, designul layout-ului în stil reviste este aproape în loc.

 .img1 {
  Zona grilă: IMG1;
}
.img2 {
    zona grilă: IMG2;
}
.Articolul3 {
  Zona grilă: Articolul 3;
  Culoare: # 333;
} 

15. Perfect piciorul paginii

Finalizarea paginii va plasa o lățime întreagă Div pe ecran, care va fi umplută cu o culoare neagră și textul este doar centrat. Aceasta completează versiunea desktop a designului, dar mutați ecranul sub 1200px larg și site-ul începe să se rupă.

 .Footer {
    Culoare de fundal: # 000;
    Culoare: # 999;
    Text-align: centru;
    Padding: 50px 20px 100px;
} 

16. Reglați pentru proiectarea ecranului mediu

O interogare media este introdusă aici pentru a avea grijă de proiectare atunci când lățimea browserului este mai mică de 1200px. Codul pentru pașii 17 și 18 va fi plasat în interiorul parantezelor în care este comentariul. Acesta va fi un caz de schimbare a ambelor structuri de aspect a rețelelor.

 @Media ecran și (max-lățime: 1200px) {
  / * cod aici * /
} 

17. Refluiți prima grilă

Prima grilă este setată pentru a umple acum lățimea completă a browserului cu doar două coloane în loc de trei. Ordinea secțiunilor este plasată în șablon, cu articolele de comutare, deoarece acest lucru se potrivește mai bine cu imaginea de fundal la această dimensiune a ecranului.

 .container1 {
  Lățime: 100%;
  Rânduri de șabloane: Auto;
  Grid-șablon-coloane: 50% 50%;
  Zonele de șablon de grilă: "antetul antetului" "StandFirst StandFirst" Articolul1. " "Pulcquote pullquote" "Articolul2 Focus";
  }
.Articolul2 {
  Numărătoarea coloanei: 1;
  } 

18. Testați-vă aspectul

A doua grilă este, de asemenea, redimensionată pentru a lua toată lățimea browserului și au adăugat două coloane. Imaginile sunt plasate alături pe rândul de deasupra textului, astfel încât acesta să se potrivească perfect pe afișaj. Puteți testa acest aspect în browser, redimensionând browserul sub o lățime de 1200px.

 .Container2 {
  Lățime: 100%;
  Marja: 0 Auto;
  Rânduri de șabloane: Auto;
  Grid-șablon-coloane: 50% 50%;
  Zone de șablon de rețea: "img1 img2" "Articolul 3 Articolul 3";
} 

19. Tweak Design pentru mobil

Orice browser care are o lățime mai mică de 769px va primi codul care este adăugat în pașii finali. Tot ce trebuie să facem aici este să ne asigurăm că fiecare rețea are un aspect unic al coloanei, astfel încât conținutul să poată fi vizualizat corect în spațiul mai mic.

 @Media ecran și (max-lățime: 768px) {
  / * Codul pașilor finali aici * /
} 

20. Verificați grila unică a coloanei

Acum, prima grilă este setată la o singură coloană de 100% din lățimea browserului, iar ordinea secțiunilor se adaugă în zonele șablonului. Verificați pentru a vedea cum prima parte a paginii funcționează pe ecrane mobile.

 .container1 {
  Lățime: 100%;
  Rânduri de șabloane: Auto;
  Grid-șabloane-coloane: 100%;
  Zonele de șablon de grilă: "antetul" "Standfirst" "Articolul1" "Pulquote" "Focus" "Articolul2";
} 

21. Finalizați aspectul

Aici, a doua rețea este făcută și pentru a umple o singură coloană, iar aspectul secțiunilor este definit. Acum salvați designul finit și vizualizați-l pe ecrane diferite pentru a vedea capacitatea completă de aspect a rețelei CSS și cât de ușor a fost să reordonați conținutul pentru diferite lățimi.

 .Container2 {
  Lățime: 100%;
  Marja: 0 Auto;
  Rânduri de șabloane: Auto;
  Grid-șabloane-coloane: 100%;
  Zonele de șablon de rețea: "IMG1" "IMG2" "Articolul 3";
} 

Acest articol a fost inițial publicat în Creative Web Design Magazine Web Designer. Cumpără Problema 271. sau Abonati-va .

Articole similare:

• 5 sfaturi pentru Super-Fast RSS
• Înțelegerea proprietății afișajului CSS
• Cum se creează un aspect piramidă cu forme CSS