Zbuduj blog z siatką i flexbox

Sep 14, 2025
Jak
Build a blog with Grid and flexbox

Ostatnie dwa do trzech lat widziały układ ruszyć w skokach i granicach. Teraz, gdy te nowoczesne techniki mają taki spójny wynik w nowoczesnych przeglądarkach, naprawdę możesz używać ich do kodu produkcyjnego. Jeśli się zastanawiasz Jak uruchomić blog , Ten samouczek pokaże Państwu, jak proste jest tworzenie standardowego układu stylu blogu przy użyciu modułu CSS Grid i Elastyczne pudełko, AKA FLEXBOX. Brzmi jak zbyt dużo ciężkiej pracy dla tego, co chcesz? Spójrz na nasz przewodnik po Najlepsze darmowe platformy blogów lub wybierz górę Kreator strony internetowej . Praca z zespołem? Wdrożyć najlepszy magazyn w chmurze Aby sprawić, że proces gładki.

Najpierw szybko podsumowujemy podstawy HTML i dlaczego dobrze jest wypróbować kod semantyczny.

Więcej niż pulpit i telefon komórkowy

Czy zauważyłeś tryb czytelnika na Safari i Firefox? Jest to ikona w pasku adresu, który wygląda trochę jak wyłożony papier. To spowoduje twoje Układ strony internetowej. W trybie bez rozproszenia, nagie kości, raczej jak urządzenia, takie jak używanie oglądania Apple. Coraz więcej urządzeń uzyskuje dostęp do treści WWW - prawdopodobnie duże uderzenie świąteczne były interaktywne głośniki, takie jak Amazon Echo.

Mając na uwadze, i oczywiście potrzebę pracy na temat czytników ekranu i tym podobne, struktura Twojej strony jest kluczowa. Jeśli wystarczy użyć & lt; div & gt; W przypadku wszystkich kontenerów, a nawet przyciski, urządzenia renderujące Twój kod nie będzie wiedzieć, co jest kontekst, a więc nie można użyć żadnej z natywnych funkcjonalności ani funkcji.

01. Uruchom podstawowy układ strony

Zamierzamy zbudować podstawową stronę internetową do włączenia nagłówek z nawigacją, blokiem bohatera, głównym artykułem, wyróżnionym blokami artykułów i stopki. Idea tutaj jest widzieć wielu Responsive Web Design. Techniki możemy zaimplementować bez użycia zapytań multimedialnych lub jakiegokolwiek wspomagającego JavaScript. Widać, że HTML strony jest podzielona na odrębne sekcje za pomocą znaczników HTML5. Dodajemy również zajęcia, ponieważ starsze przeglądarki nie będą wiedzieć, co są i renderują jako div. Zacznijmy na szczycie strony i pracujmy przez naszą drogę. Jednak podstawowa lub złożona Twoja witryna, to także czas, o którym myślę hosting Usługa jest odpowiednia dla Ciebie.

02. Zbuduj nagłówek witryny

Build a blog with Grid and flexbox: Site header

Nie potrzebujesz żadnych opakowań ani pojemników na ten nagłówek

Nagłówek witryny zawiera logo i nieuporządkowaną listę dla nawigacji. Nie musimy dodawać żadnych opakowań lub kontenerów, aby umieścić to z logo po lewej stronie i nawigacji w prawo w jednej linii. 

 & LT; Header Class = "Header" & GT;

& lt; img src = "zdjęcia / logo.png" / & gt;
& LT; NAV & GT;
& lt; ul Class = "NAV" & GT;
& LT; LI & GT; a href = "#"
klasa = "aktywny" & gt; home i / a & gt; & lt; / li & gt;
& lt; a href = "#" & gt; a lt; / a & gt;
& lt; a href = "#" & gt; psów / lt; / a & gt; & lt; / li & gt;
& lt; a href = "#" & gt; contact & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& LT; / NAV & GT;
& LT; / Header & GT;

03. Użyj krzaka

Ustawiamy nagłówek do wyświetlania siatki, a następnie użyj "kolumny get-szablon" Aby ustawić dwie kolumny w nagłówku. Używamy ks Jednostka tutaj, która jest jednostką frakcyjną - 1fr jest równa dostępnej przestrzeni w pojemniku. W tym przypadku dajemy nawigację nieco mniejszy obszar do wypełnienia. 

 Nagłówek {
Wyświetlacz: siatka;
Grid-szablon-kolumny: 1,5fr 1fr;
Wyrównuj przedmioty: Centrum;
}

04. Dodaj nawigację na miejscu

Teraz kierujemy listę elementów menu. Znowu obracamy & lt; Ul & GT; do kontenera siatki i powiedz elementy do autofit do kolumn. Tutaj używamy minimum maksimum Aby zapewnić, że kolumny nigdy nie będą mniejsze niż 100px, ale jeśli przestrzeń jest większa, mogą udostępniać przestrzeń jako 1fr. 

 .nav {
Wyświetlacz: siatka;
Grid-szablon-kolumny: powtórz (automatyczne dopasowanie, minmax (100px, 1fr));
GRID-GAP: 10PX;
Wyrównuj przedmioty: Centrum;
}

05. Utwórz blok bohatera

Build a blog with Grid and flexbox: Hero block

Centrowanie tekstu bohatera jest znacznie łatwiejsza dzięki sieci CSS lub flex

Następną częścią strony jest główny blok bohatera. Tradycyjnie tekstrujący pionowo tekst w pojemniku wymagał wszelkiego rodzaju pracy. Korzystanie z sieci CSS lub Flex, jest to naprawdę proste. 

 Artykuł i GT;
& lt; sekcja CLASS = "HERO" & GT;
& lt; h1 & gt;
& lt; p & p & gt;
& lt; a href = "" & gt;
& LT; / SEKCJA & GT;
& LT; / Article & GT;

06. Wyrównaj do centrum

Wyrównanie na dwóch osiach jest częścią chleba i masła siatki CSS. Tutaj możemy zamienić pojemnik bohatera do kontenera siatki, a następnie użyć wyrównuj zawartość (od lewej do prawej) i uzasadnić-treści (do góry do dołu) do pozycji w centrum. Używamy vh. Jednostka tutaj, która sprawi, że bohater blok 50% wysokości rzutni. 

 .Hero {
Min-wysokość: 50VH;
Wyświetlacz: siatka;
Justify-Element: Center;
Wyrównuj zawartość: Centrum;
Justify-Content: Center;
}

07. Utwórz główną sekcję zawartości

Główny artykuł ma również blok w prawo, który zawiera dalsze czytanie. Aby to sprawić, że responuje bez konieczności korzystania z zapytania multimedialnego, możemy przełączać się na FLEXBOX, aby jak najlepiej wykorzystać jego właściwości.

08. Dodaj widok dwubienny

Ustaw artykuł do kontenera Flex. Dodaj małą wyściółkę w lewo i prawo, aby upewnić się, że miara tekstu nie staje się zbyt długa. Kierunek flex jest wiersz, dzięki czemu sekcja i bok w środku będzie usiąść obok siebie po stylu. Treść jest uzasadniona przestrzenią między tak, że tekst nie dotyknie się na bok. 

 Główna zawartość {
Wyświetlacz: Flex;
Flex-Wrap: Wrap;
Kierunek flex: wiersz;
usprawiedliwiony treści: przestrzeń między;
Wyściółka: 0 5VW 0 5VW;}

09. Utwórz to bez zapytań multimedialnych

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

Utwórz responsywną sekcję bez konieczności korzystania z zapytań multimedialnych

Rozdział wykorzystuje sprytną mieszankę szerokości Calc i minimalnej i maksymalnej, aby dać nam to, co jest efektywnie zapytanie o media, ale na poziomie kontenera. Kiedy wystarczy miejsce, sekcja zajmie 70% rodzica, umożliwiając bok na usiąść obok go. Korzystając z Calc dla szerokości, możemy zwrócić ogromną lub małą szerokość. 

 Sekcja główna zawartości {
Min-szerokość: 70%;
Szerokość: Calc ((48EM - 100%) * 1000);
Max-szerokość: 100%;
}

10. Zdefiniuj punkt przerwy

48EM odpowiada 768px (48 * rozmiar czcionki podstawowej (16px)), tak powyżej 768px sekcja będzie jej minimalna szerokość 70%, a poniżej 768 zostanie użyta maksymalna szerokość. Robimy to samo na bok, więc w tym przypadku zajmuje 25% na dużych ekranach lub 100% na małym. Efektem jest responsywny punkt przerwania wyłącznie wpływającym na pojemnik. 

 .main-treść na bok {
Min-szerokość: 25%;
Szerokość: Calc ((48EM - 100%) * 1000);
Max-szerokość: 100%;
}

11. Buduj responsywne bloki

Build a blog with Grid and flexbox: Responsive blocks

Użyj kontenerów DIB, aby zbudować swoje responsywne bloki

Aby utworzyć funkcjonalne elementy, które biegną na stronie, w końcu używamy naszego pierwszego kontenera div. 

 ° C KLASA = "Lista kart" & GT;
& lt; div Class = "Card" & GT;
& lt; img / & gt;
& lt; div Class = "Szczegóły karty" & GT;
& lt; / div & gt;
& lt; / div & gt;
^ / sekcja

12. Powtórz i Autofit

Na naszą listę kart chcemy mieć cztery z rzędu, ale ponieważ nie używamy żadnych zapytań medialnych, ustawiamy nasze minimum maksimum Wartość do 300px, która ładnie pasuje na małym telefonie komórkowym. Używając powtarzania i AutoFit przeglądarka wykonuje ciężką pracę i będzie pasować do tego, co może w rzędzie, a następnie rozpocząć inny, więc możemy przejść od czterech do jednego układu kolumny z jedną linią kodu. 

 .Card-lista {
Wyświetlacz: siatka;
GRID-GAP: 10px;
Grid-szablon-kolumny: powtórz (automatyczne dopasowanie,
MinMax (300px, 1fr));
}

.karta {
 Wyświetlacz: siatka;
 kolumny szablonów siatki: 1fr;
}

13. Utwórz układ karty

W przypadku danych w karcie przełączamy się z powrotem do flex, ustawiając przepływ do kolumny, aby elementy płyną pionowo. Ustaw uzasadnić-treści Nieruchomość do pomocy - w tym przypadku przestrzeń równomiernie działa dobrze. Ponieważ znacznik "A" w tym panelu wyświetli blok, rozciągnąłoby szerokość pojemnika. Ustaw go start więc zajmuje to tylko przestrzeń swojej zawartości. 

 .Card-szczegóły {
Wyświetlacz: Flex;
Kierunek Flex: Kolumna;
uzasadnić - treść: równomiernie przestrzeni;
}

.Card-szczegóły a {
Wyrównaj: Self: Flex-Start;
}

14. Styl stopera

Jesteśmy już aż do stopki i po prostu zatrudniamy niektóre z stylów, których użyliśmy wcześniej, aby ją położyć. 

 & LT; Class Class = "Stopka" & GT;
& lt; p / & gt;
& LT; NAV & GT;
& lt; ul Class = "NAV" & GT;
& lt; li / & gt;
& lt; / ul & gt;
& LT; / NAV & GT;
& lt; ul Class = "Social" & GT;
& lt; li / & gt;
& lt; / ul & gt;
& LT; / Footer & GT;

15. Wyrównaj element dziecka

W tej stopce są trzy obszary. Ustaw kolumny siatki, aby powtórzyć trzy w jednej jednostce frakcyjnej każda. Możesz po prostu napisać "kolumny szablonów siatki: 1fr 1fr 1fr;" Jeśli wolisz. Ikony społeczne zamierzają usiąść wyrównane w prawo - możesz to zrobić, opowiadając samemu przedmiotowi dostosować się do użycia Justify-self. . 

 .footer {
Wyświetlacz: siatka;
kolumny szablonów siatki: powtórz (3, 1fr);
Grid-Auto-Flow: Kolumna;
Wyrównuj przedmioty: Centrum;
}

.społeczny {
Justify-self: koniec;
}

16. Rozważ zgodność

Chociaż ten samouczek działa dobrze przez duże trzy przeglądarze i nowoczesne urządzenia, nie został przetestowany z powrotem do IE. W zależności od projektu można użyć progresywnego ulepszenia i służyć prostym układzie. Jeśli twoja CSS jest tworzona przy użyciu preprocesora, takiego jak Sass, pakiet AutopRefixer zapewnia niektóre z dodatkowych prefiksów potrzebnych do polubienia krawędzi.

Ten artykuł został pierwotnie opublikowany w wydaniu 284 kreatywnego magazynu projektowania stron internetowych Projektant stron internetowych . Kup problem 284 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

  • Kompleksowy przewodnik do korzystania z siatki CSS
  • Użyj CSS Grid i Flexbox do zbudowania responsywnego interfejsu
  • 5 fajnych generatorów sieci CSS

Jak - Najpopularniejsze artykuły

Jak udoskonalić portfolio projektowe

Jak Sep 14, 2025

Twoje portfolio posiada klucz do uzyskania następnego projektu w torbie, więc zasługuje na wiele uwagi. Ważne jest również, aby pamiętać, że nigdy nie jest to produkt gotowy. Jako kr..

Użyj tabl.js, aby włączyć dane na interaktywne diagramy

Jak Sep 14, 2025

Strona 1 z 2: Używanie tabl.js: Steps 01-10 Używanie tabl.js: Steps 01-..

Jak zrobić i użyć mahlstick do malowania

Jak Sep 14, 2025

Mahlstick (lub Maulstick, jak to jest czasami znane), jest narzędzie wsparcia stabilizującego używane przez malarzy podczas pr..

Utwórz śliskie animacje UI

Jak Sep 14, 2025

Coraz częściej projektanci i deweloperzy uznają znaczenie projektowania ruchu w kontekście doświadczenie użytkownik..

Zachowaj doskonałą kontrolę wersji z abstrakcją

Jak Sep 14, 2025

Kontrola wersji została pierwotnie ukierunkowana na programistów pracujących z kodem, jako sposób, dla wielu programistów do..

Zbuduj witrynę e-commerce od podstaw

Jak Sep 14, 2025

Echmerce stało się tak popularne w ostatnich latach trudno sobie wyobrazić sobie przyszłość bez niego. Moc Internetu udało..

Zrób prototyp Hi-Fidelity w atomowym

Jak Sep 14, 2025

Łatwo jest złapać w próbę opracowania pomysłu w statycznym makiecie lub narzędzia do rysowania plików, ale a prot..

Narysuj dokładne kości i mięśnie

Jak Sep 14, 2025

Anatomia jest ogromnym tematem i wymaga mieszania informacji naukowej i praktyczności artystycznej. Na przykład potrzebny jest ..

Kategorie