Construiți un blog cu grilă și Flexbox

Sep 17, 2025
să
Build a blog with Grid and flexbox

Ultimii doi până la trei ani au văzut aspectul avansează în salturi și limite. Acum că aceste tehnici moderne au un astfel de consecvent consecvent în browserele moderne, cu adevărat le puteți folosi pentru codul de producție. Dacă vă întrebați Cum să începeți un blog , acest tutorial vă va arăta cât de simplu este să creați un aspect standard al blogului utilizând grila CSS și modulul cutiei flexibile, AKA Flexbox. Sună ca o muncă prea mare pentru ceea ce vrei? Aruncați o privire la ghidul nostru pentru Cele mai bune platforme gratuite de blogging sau alegeți un top Builder de site-uri web . Lucrul cu o echipă? Implementați cele mai bune Stocare in cloud pentru a menține procesul neted.

În primul rând, să recapăț rapid peste elementele de bază ale HTML și de ce este bine să încercați să scrieți codul semantic.

Mai mult decât desktop și mobil

Ați observat modul cititor pe Safari și Firefox? Este o pictogramă în bara de adrese care arată un pic ca hârtia căptușită. Acest lucru vă va face Layout-ul site-ului Într-un mod fără distracție, fără oase goale, mai degrabă ca niște dispozitive, cum ar fi utilizarea ceasului Apple. Din ce în ce mai multe dispozitive accesează și afișează conținutul web - posibil că marele lovit de Crăciun a fost vorbitori interactivi precum Amazon Echo.

Cu aceste lucruri în minte și, desigur, nevoia de a lucra pe cititoare de ecran și altele asemenea, structura paginii dvs. este crucială. Dacă utilizați doar & Lt; div & gt; Pentru toate butoanele dvs. și chiar butoanele dvs., dispozitivele care fac codul dvs. nu vor ști ce este contextul și astfel nu pot folosi niciuna dintre funcționalitățile sau caracteristicile native.

01. Porniți aspectul paginii de bază

Vom construi o pagină web de bază pentru a include un antet cu navigație, un bloc de eroi, articol principal, blocuri de articole prezentate și un subsol. Ideea aici este de a vedea mulți Designul web receptiv Tehnici pe care le putem implementa fără a utiliza interogări media sau javascript de asistență. Puteți vedea că HTML a paginii este împărțită în secțiuni distincte utilizând tag-uri HTML5. De asemenea, adăugăm clase pentru ei, deoarece browserele mai vechi nu vor ști ce sunt și le fac ca un div. Să începem în partea de sus a paginii și să mergem prin drum. Cu toate acestea, de bază sau complex, este, de asemenea, timpul să ne gândim la care web hosting Serviciul este potrivit pentru dvs.

02. Construiți un antet de site

Build a blog with Grid and flexbox: Site header

Nu veți avea nevoie de împachetări sau containere pentru acest antet

Antetul site-ului conține un logo și o listă neordonată pentru navigație. Nu avem nevoie să adăugăm ambalaje sau recipiente pentru a pune acest lucru cu logo-ul spre stânga și navigarea spre dreapta într-o singură linie. 

 & lt; antet clasa = "antet" & gt;

& lt; img src = "imagini / logo.png" / & gt;
& lt; nav & gt;
& lt; ul clasa = "nav" & gt;
& Li & gt; & lt; un href = "#"
CLASS = "Activ" & GT; Home & Lt; / Li & Gt;
"Li & gt; un href =" "/ gt; / lt; / li & gt;
"Li & gt; și lt; câinii

03. Folosiți unitatea FR

Am setat antetul pentru a afișa grila, apoi utilizați "Get-șabloane-coloane" Pentru a seta două coloane în antet. Noi folosim fr. Unitatea aici, care este o unitate fracționată - 1fr ar echivala spațiul disponibil în recipient. În acest caz, oferim navigarea o zonă puțin mai mică pentru a umple. 

 antet {
Afișaj: grilă;
Grid-șabloane-coloane: 1,5fr 1fr;
Align-elemente: centru;
}

04. Adăugați navigarea pe site

Acum vizăm lista elementelor de meniu. Din nou, întoarcem & lt; ul & gt; într-un recipient de rețea și spuneți elementele din interior pentru autofit în coloane. Aici folosim minim maxim Pentru a vă asigura că coloanele nu pot fi niciodată mai mici de 100px, dar dacă spațiul este mai mare, atunci pot împărtăși spațiul ca 1fr fiecare. 

 .Nav {
Afișaj: grilă;
Grid-șabloane-coloane: repetați (auto-fit, minmax (100px, 1fr));
Grid-gol: 10px;
Align-elemente: centru;
}

05. Creați blocul de erou

Build a blog with Grid and flexbox: Hero block

Centrarea textului eroului este mult mai ușoară cu grila CSS sau Flex

Următoarea parte a paginii este principalul bloc erou. În mod tradițional, textul de centrare verticală într-un container necesită tot felul de lucruri de lucru. Folosind grila css sau flex, acest lucru este foarte simplu. 

 & articole & gt;
& lt; secțiunea de clasă = "erou" & gt;
& lt; h1 & gt; / lt; / h1 & gt;
& lt; p & gt; / lt; / p & gt;
& lt; un href = "/ a & gt;
& lt; / secțiune & gt;
& lt; / articol & gt;

06. Aliniați la centru

Alinierea pe două axe este o parte a pâinii și a untului de grilă CSS. Aici, putem transforma recipientul de erou într-un recipient de rețea și apoi să folosim Aliniere-conținutul. (stânga la dreapta) și justificați-conținutul (de sus în jos) la poziția în centru. Folosim a vh. Unitate aici, care va face ca eroul să blocheze 50% din înălțimea de vizualizare. 

 .hero {
Min-înălțime: 50VH;
Afișaj: grilă;
Justiune-articole: centru;
Aliniere-conținut: centru;
Justificare-Conținut: Centrul;
}

07. Creați secțiunea de conținut principal

Articolul principal are, de asemenea, un bloc în dreptul care conține o lectură suplimentară. Pentru a face acest lucru receptiv fără a fi nevoie să utilizați o interogare media, putem trece la Flexbox pentru a profita la maximum de proprietățile sale. 

 & lt; articol de clasă = "Conținut principal" & GT;
& lt; secțiunea / & gt;
& lt; / secțiune & gt;
& lt; deoparte / & gt;
& lt; / articol & gt;

08. Adăugați o vedere în două coloane

Setați articolul la un recipient Flex. Adăugați o căptușeală mică spre stânga și spre dreapta pentru a vă asigura că măsura textului nu este prea lungă. Direcția Flex este rândul, astfel încât secțiunea și de o parte în interiorul să se așeze unul lângă celălalt atunci când sunt stilate. Conținutul este justificat spațiului între astfel încât textul să nu atingă peste partea deoparte. 

 Conținutul principal {
Afișaj: Flex;
Flex-Wrap: Înfășurați;
Direcția Flex: rând;
justificați-conținut: spațiu-între;
Padding: 0 5VW 0 5VW;}

09. Faceți-l să răspundă fără interogări media

Build a blog with Grid and flexbox: Responsive without media queries

Creați o secțiune receptivă fără a trebui să utilizați interogări media

Secțiunea utilizează un amestec inteligent de lățimi minime și minime și maxime pentru a ne oferi ceea ce este efectiv o interogare media, dar la un nivel de container. Când există suficientă cameră, secțiunea va dura 70% din părinte, permițând deoparte să stea alături de el. Prin utilizarea calcului pentru lățime, putem reveni fie o lățime imensă, fie mică. 

 Secțiunea principală de conținut {
min-lățime: 70%;
Lățime: Calc ((48em - 100%) * 1000);
Max-lățime: 100%;
}

10. Definiți un punct de întrerupere

48EM echivalează cu 768px (48 * dimensiunea fontului de bază (16px)) Deci, peste 768px, secțiunea va fi lățimea minimă de 70% și sub 768 va fi utilizată lățimea maximă. Facem același lucru pentru o parte, astfel încât, în acest caz, va dura 25% pe ecrane mari, fie 100% pe mici. Efectul este un punct de pauză receptiv care afectează pur și simplu recipientul. 

 .Mai-conținut deoparte {
min-lățime: 25%;
Lățime: Calc ((48em - 100%) * 1000);
Max-lățime: 100%;
}

11. Construiți blocuri receptive

Build a blog with Grid and flexbox: Responsive blocks

Utilizați Conteiner Divs pentru a vă construi blocurile responsabile

Pentru a crea elementele recomandate care rulează pe pagină, folosim în cele din urmă primul nostru container Divs. 

 & lt; secțiunea Clasa = "lista cardului" & GT;
& lt; div clasa = "card" & gt;
& IMG / & GT;
& lt; div clasa = "detalii card" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / secțiune & gt;

12. Repetați și autofit

Pentru lista noastră de carduri, vrem să avem patru la rând, dar pentru că nu folosim niciun fel de interogări media, ne-am stabilit minim maxim Valoare la 300px, care se va potrivi frumos pe un mic mobil. Utilizând repetarea și autofit browserul face munca grea și se va potrivi ceea ce poate intra într-un rând și apoi începe altul, astfel încât să putem merge de la patru până la un aspect unic cu o singură linie de cod. 

.
Afișaj: grilă;
Grid-gol: 10px;
Grid-șabloane-coloane: Repetare (Auto-Fit,
minmax (300px, 1fr));
}

.Card {
 Afișaj: grilă;
 Grid-șabloane-coloane: 1fr;
}

13. Creați un aspect al cardului

Pentru detaliile din card, reluăm înapoi la Flex, setând fluxul în coloană, astfel încât elementele curg vertical. Seteaza justificați-conținutul Proprietate pentru a se potrivi - în acest caz spațiu-uniform lucrează bine. Deoarece eticheta "A" din acest panou va afișa blocul, acesta ar întinde lățimea recipientului. Setați-l Flex-start. astfel încât să ia doar spațiul conținutului său. 

 .Card-detalii {
Afișaj: Flex;
Flex-direcție: coloană;
justificați-conținutul: spațiu-uniform;
}

.Card-detalii a {
Align-Sine: Flex-Start;
}

14. Stilul subsolului

Suntem deja la subsol și vom folosi doar câteva stiluri pe care le-am folosit mai devreme pentru a ieși. 

 & lt; footer clasa = "subsol" & gt;
& lt; p / & gt;
& lt; nav & gt;
& lt; ul clasa = "nav" & gt;
& Lt; Li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul clasa = "social" & gt;
& Lt; Li / & gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Aliniați articolul copilului

Există trei zone în acest subsol. Setați coloanele de rețea pentru a repeta câte trei la o unitate fracționată fiecare. Puteți scrie doar "coloane de șabloane de rețea: 1fr 1fr 1fr; daca preferi. Icoanele sociale vor să stea aliniate la dreapta - puteți face acest lucru spunând elementului în sine să alinieze dreptul Justify-Sell. . 

 .Footer {
Afișaj: grilă;
Grid-șablon-coloane: repetați (3, 1fr);
Grid-Auto-Flow: coloană;
Align-elemente: centru;
}

.Social {
justificare-sine: sfârșitul;
}

16. Luați în considerare compatibilitatea

Deși acest tutorial funcționează cu mult peste trei browsere și dispozitive moderne, nu a fost testat înapoi la IE. În funcție de proiectul dvs., ați putea utiliza îmbunătățirea progresivă și servi un aspect simplu. Dacă CSS-ul dvs. este creat utilizând un preprocesor cum ar fi SASS, atunci pachetul de autoprefixer oferă unele dintre prefixele suplimentare necesare pentru cum ar fi marginea.

Acest articol a fost publicat inițial în numărul 284 din revista Creative Web Design Web designer . Cumpărați problema 284 aici sau Aboneaza-te la designerul web aici .

Articole similare:

  • Un ghid cuprinzător pentru utilizarea gridului CSS
  • Utilizați grila CSS și Flexbox pentru a construi o interfață receptivă
  • 5 Generatoare de grilă CSS cool

să - Cele mai populare articole

Cum se adaugă fonturi în Photoshop

să Sep 17, 2025

(Credit de imagine: Adobe) Fonturi în Photoshop: Link-uri rapide - Adăugați fon..

Cum să evitați o Ziua Amazonului 2020 eșuați

să Sep 17, 2025

(Credit Imagine: Amazon) Deși nu știm încă data exactă a Amazon Prime Ziua 2020 Cu toate acestea,..

10 moduri de a construi medii mai bune 3D

să Sep 17, 2025

[Imagine: Albert Valls Punsh] Dacă doriți să rămâneți în partea de sus a jocului dvs. ca artist 3D, este impor..

Cum să vă ascundeți codul JavaScript din sursa de vizualizare

să Sep 17, 2025

Dacă nu luați măsuri de precauție cu codul JavaScript, faceți viața ușor pentru oricine dorește să o cloneze. Dar dacă ..

Rotiți fotografii în animații 3D cu Photoshop

să Sep 17, 2025

Toți avem un magazin mare de amintiri luate ca fotografii și este minunat să fie capabil să reamintească. Dar dacă ați put..

Adăugați vibrații la picturile dvs. de ulei cu aceste sfaturi de top

să Sep 17, 2025

Materialele Marjolein utilizează ulei de inserare ca mediu, care are beneficiul de uscare în câteva zil..

Cum de a picta o viață florală vibrantă încă

să Sep 17, 2025

Culoarea și textura oferă o modalitate perfectă de a da vibrații unei vieți florale în continuare. Această demonstrație a..

Modelarea unei nave spațiale pentru designul gameplay

să Sep 17, 2025

Cu Spațiul fracturat Fiind ceea ce este - un joc de luptă gratuită de luptă - navele și abilitățile lor sun..

Categorii