Rakenna blogi verkkoon ja flexboxilla

Sep 16, 2025
Miten tehdään
Build a blog with Grid and flexbox

Viimeiset kaksi tai kolme vuotta ovat nähneet asettelun eteenpäin harppauksissa ja rajoissa. Nyt kun nämä modernit tekniikat ovat tällainen johdonmukainen tulos nykyaikaisissa selaimissa, voit todella käyttää niitä tuotantokoodi. Jos ihmettelet Miten aloittaa blogin Tämä opas näyttää, miten helppoa on luoda standardi blogi-tyylinen ulkoasu CSS Grid ja joustava Box moduuli, alias flexboxiin. Kuulostaa liian paljon kovaa työtä mitä haluat? Tutustu oppaamme Parhaat ilmaiset blogging-alustat tai valitse alkuun Verkkosivuston rakentaja . Työskentely tiimin kanssa? Asenna paras pilvivarasto pitää prosessin sileä.

Ensin kirjoitamme nopeasti HTML: n perusasiat ja miksi on hyvä yrittää kirjoittaa semanttista koodia.

Enemmän kuin työpöydälle ja matkapuhelimelle

Oletko huomannut Safarin ja Firefoxin lukijatilaa? Se on kuvake, joka näyttää vähän kuin vuorattu paperi. Tämä tekee Verkkosivuston asettelu Häiriöttömällä, paljaaisella luustotilassa, melko samanlaisina laitteita, kuten Apple Watch -käyttöä. Yhä useammat laitteet käyttävät ja näyttävät verkkosisällön - mahdollisesti joulun suuri osuma oli vuorovaikutteisia kaiuttimia, kuten Amazon Echo.

Näiden mielessä ja tietenkin sivustosi tarve työskennellä näytönlukijoilla ja vastaavilla, sivusi rakenne on ratkaiseva. Jos käytät vain & lt; div & gt; Kaikille säiliöille ja jopa painikkeille koodi, joka tekee koodiasi, ei tiedä, mitä asiayhteys on, eikä siis voi käyttää mitään alkuperäistä toimintoa tai ominaisuuksia.

01. Aloita perussivun asettelu

Aiomme rakentaa perussivun sisällyttää otsikko navigoinnilla, sankarilohkolla, tärkeimmillä artikkelilla, esillä artikkeli lohkot ja alatunniste. Ajatus tässä on nähdä monia Vastaava web-suunnittelu Tekniikat, joita voimme toteuttaa ilman mediakyselyjä tai avustavaa JavaScriptia. Voit nähdä, että sivun HTML jaetaan erillisiksi osioiksi HTML5-tunnisteilla. Lisäämme myös luokkia heille, sillä vanhemmat selaimet eivät tiedä, mitä he ovat ja tekevät heille div. Aloitetaan sivun yläreunassa ja työskentelevät matkalla. Kuitenkin perus- tai monimutkainen sivustosi, on myös aika miettiä sivujen ylläpito Palvelu sopii sinulle.

02. Rakenna sivuston otsikko

Build a blog with Grid and flexbox: Site header

Et tarvitse kääreitä tai kontteja tähän otsikkoon

Sivuston otsikko sisältää logon ja järjestäytyneen luettelon navigoinnille. Meidän ei tarvitse lisätä mitään kääreitä tai kontteja asettaa tämä ulos logo vasemmalle ja navigointi oikealle yhdellä rivillä. 

 & lt; otsikkoluokka = "otsikko" & gt;

& lt; img src = "kuvat / logo.png" / & gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li & gt; & lt; a href = "#"
Luokka = "aktiivinen" & gt; koti & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; & lt; / a & gt;
& lt; li & gt; & lt; a href = "#" & gt; Koirat & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; Yhteystiedot & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / otsikko & gt;

03. Käytä FR-yksikköä

Aseta otsikko näyttämään verkkoon ja käytä sitten "Get-template-sarakkeet" Aseta kaksi saraketta otsikkoon. Käytämme fr Yksikkö, joka on murto-yksikkö - 1Fr vastaa säiliön käytettävissä oleva tila. Tässä tapauksessa annamme navigointia hieman pienemmäksi alueeksi. 

 Header {
Näyttö: Grid;
Grid-template-sarakkeet: 1.5fr 1fr;
Kohdista: Keski;
}

04. Lisää sivuston navigointi

Nyt kohdistamme valikkokohteiden luettelon. Jälleen kääntämme & lt; ul & gt; Grid-astiaan ja kerro kohteita sisälle autofit-tilaan sarakkeisiin. Tässä käytämme minmax Sen varmistamiseksi, että sarakkeet eivät voi koskaan olla pienempi kuin 100px, mutta jos tila on suurempi, he voivat jakaa tilan 1fr. 

 .NAV {
Näyttö: Grid;
Grid-template-sarakkeet: Toista (Auto-Fit, Minmax (100px, 1Fr));
GRID-GAP: 10PX;
Kohdista: Keski;
}

05. Luo sankari lohko

Build a blog with Grid and flexbox: Hero block

Hero-tekstin keskittäminen on paljon helpompaa CSS Gridin tai Flexin kanssa

Seuraava osa sivu on tärkein sankarilohko. Perinteisesti pystysuora keskitysteksti säiliössä vaaditaan kaikenlaisia ​​töitä. CSS Gridin tai Flexin avulla tämä on todella yksinkertaista. 

 & lt; artikkeli & gt;
& lt; osioluokka = "sankari" & gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / osa & gt;
& lt; / artikkeli & gt;

06. Kohdista keskustaan

Kahden akselin kohdistaminen on osa CSS-verkkoa leipää ja voita. Tässä voimme kääntää sankarin astian verkkoasentoon ja sitten käyttää Kohdista sisältö (vasemmalle oikealle) ja perustella sisältöä (ylhäältä alas) asentoon keskukseen. Käytämme a vh Yksikkö, joka tekee sankarilohkosta 50% Viewport-korkeudesta. 

 .hero {
Min-korkeus: 50vh;
Näyttö: Grid;
Perustele-tuotteet: keskus;
Kohdista sisältö: keskus;
Perustele-sisältö: keskus;
}

07. Luo pää sisältöosa

Tärkeimmällä artikkelilla on myös lohko oikealle, joka sisältää lisää lukemista. Jotta tämä reagoi voisi käyttää mediakyselyä, voimme siirtyä Flexboxiin hyödyntämään suurimman osan ominaisuuksistaan. 

 & Lt; Artikkeli Class = "Pääasiallinen sisältö" & GT;
& lt; osa / ja gt;
& lt; / osa & gt;
& lt; syrjään / & gt;
& lt; / artikkeli & gt;

08. Lisää kaksi sarakkeen näkymä

Aseta artikkeli Flex-astiaan. Lisää pieni pehmuste vasemmalle ja oikealle varmistaaksesi, että teksti ei ole liian pitkä. Flex-suunta on rivi niin, että osa ja syrjään istuu vieressä toistensa muotoiltuna. Sisältö on perusteltua välilyönnille siten, että teksti ei kosketa syrjään. 

 Pää-sisältö {
Näyttö: Flex;
Flex-Wrap: Kääri;
Flex-Suunta: Rivi;
Perustele-sisältö: välilyönti;
Padding: 0 5VW 0 5VW;}

09. Tee se reagoiva ilman mediakyselyjä

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

Luo reagoiva osa tarvitsematta käyttää mediakyselyjä

Osa käyttää CLAC: n ja vähimmäisleveyden älykkäämpiä yhdistelmää, jotta meille on tehokas mediakysely, mutta säiliötasolla. Kun on tarpeeksi tilaa, osa kestää 70% vanhemmasta, mikä mahdollistaa sen rinnalla. Käyttämällä lasketta leveydelle voimme palauttaa joko valtava tai pieni leveys. 

 Pääasiallinen sisältö osa {
Min-leveys: 70%;
Leveys: Calc ((48EM - 100%) * 1000);
Max-leveys: 100%;
}

10. Määritä taukokohta

48EM vastaa 768PX (48 * Base Fontin koko (16PX)) niin yli 768px jakso on sen vähimmäisleveys, joka on 70% ja alle 768 maksimileveys. Teemme samaa syrjään, joten tässä tapauksessa joko kestää 25% suurista näytöistä tai 100% pienistä. Vaikutus on reagoiva taukopiste, joka vaikuttaa pelkästään säiliöön. 

 .Main-sisältö syrjään {
Min-leveys: 25%;
Leveys: Calc ((48EM - 100%) * 1000);
Max-leveys: 100%;
}

11. Rakenna reagoivia lohkoja

Build a blog with Grid and flexbox: Responsive blocks

Käytä Container Divs rakentaa reagoivat lohkot

Voit luoda sivun yli kulkevat esillä olevat kohteet, käytämme vihdoin ensimmäistä konttialuetta. 

 & lt; osion luokka = "Card-lista" & gt;
& lt; div luokka = "kortti" & gt;
& lt; img / & gt;
& lt; div luokka = "Card-details" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / osa & gt;

12. REPEAT ja AUTOFIT

Korttiluetteloomme haluamme olla neljä peräkkäin, mutta koska emme käytä mediakyselyjä minmax Arvo 300px, joka sopii hienosti pieneen mobiiliin. Käyttämällä Toisto ja AutoFit selain tekee kovaa työtä ja sopii siihen, mitä se voi riviin ja käynnistää sitten toisen, joten voimme mennä neljästä yhden sarakkeen asettelun yhdellä koodilla. 

 .Card-lista {
Näyttö: Grid;
GRID-GAP: 10PX;
Grid-Template-sarakkeet: Toista (Auto-Fit,
Minmax (300px, 1Fr));
}

.card {
 Näyttö: Grid;
 Grid-template-sarakkeet: 1FR;
}

13. Luo kortin layout

Kortin yksityiskohdat kytketään takaisin Flexiin, asettamalla virtauksen sarakkeeseen, joten kohteet virtaa pystysuoraan. Aseta perustella sisältöä Kiinteistö sopivaksi - tässä tapauksessa Space-tasaisesti Toimii hyvin. Koska tässä paneelissa oleva "-merkki näyttää lohkon, se venytti säiliön leveyttä. Asettaa sen jhk flex-start Joten se vie vain sen sisällön tilaa. 

 .Card-Details {
Näyttö: Flex;
Flex-Suunta: sarake;
Perustele-sisältö: tilaa tasaisesti;
}

.Card-Details A {
Kohdista itsestään: Flex-Start;
}

14. Tyyli alatunniste

Olemme alas alatunnisteelle jo, ja palkkaamme vain joitain tyylejä, joita olemme käyttäneet aikaisemmin asettamalla sen. 

 & lt; footer class = "alatunniste" & gt;
& lt; p / & gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul class = "sosiaalinen" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Kohdista lapsi

Tässä alatunnisteessa on kolme aluetta. Aseta ruudukko-sarakkeet toistamaan kolme yhdellä murtoyksikössä. Voisit vain kirjoittaa "Grid-template-sarakkeet: 1fr 1fr 1fr;" jos sinä suosit. Sosiaaliset kuvakkeet tulevat istumaan oikeaan kohtaan - voit tehdä tämän kertomalla, että kohde itse kohtia oikealle käyttämällä perustella itseään . 

 .Footer {
Näyttö: Grid;
Grid-template-sarakkeet: Toista (3, 1Fr);
Grid-auto-virtaus: sarake;
Kohdista: Keski;
}

.social {
Perustele-itse: loppu;
}

16. Harkitse yhteensopivuus

Vaikka tämä opetusohjelma toimii hyvin suurilla kolmella selaimella ja moderneilla laitteilla, sitä ei ole testattu takaisin IE: hen. Riippuen projektistasi, voit käyttää progressiivista parannusta ja palvelee yksinkertaista asettelua. Jos CSS on luotu esikäsittelemällä, kuten Sass, sitten AutoPrefixer-paketti tarjoaa joitain ylimääräisiä etuliitteitä reunan tykkää.

Tämä artikkeli julkaistiin alun perin asiassa 284 Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 284 täältä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

  • Kattava opas CSS Gridin käyttämiseen
  • Käytä CSS-verkkoa ja Flexboxia reagoivan käyttöliittymän rakentamiseen
  • 5 Cool CSS Grid Generators

Miten tehdään - Suosituimmat artikkelit

Pään piirtäminen: täydellinen opas

Miten tehdään Sep 16, 2025

(Kuva luotto: Oliver Sin) Sivu 1/2: Kuinka tehdä päätä eri näkökulmista ..

Luo hiiren ohjattu parallax taustavaikutus

Miten tehdään Sep 16, 2025

(Kuva luotto: Renaud Rohlinger) Parallax-selauspaikat ovat edelleen suosittuja syystä: he luovat miellyttävän ja h..

Kaikki mitä sinun tarvitsee tietää JavaScript-koodin jakamisesta

Miten tehdään Sep 16, 2025

Moderni sivustot yhdistyvät usein kaikki JavaScriptiksi yhteen, suureksi Main.js Käsikirjoitus. Tämä sisältä..

Työskentele älykäs Zbrush UI

Miten tehdään Sep 16, 2025

Kaikki, jotka stimuloivat mieltämme voi vaikuttaa tuottavuuteen, ja on tärkeää tunnistaa tekijöitä, jotka tukevat työmme, olivatpa kyse sitten oikeanlainen taustamusiikki tai jopa vala..

Kuinka luoda digitaalinen öljymaalaus käyttämällä Artrage

Miten tehdään Sep 16, 2025

Maalaus digitaalisesti käyttämällä a Piirustus Tabletti ja piirustus ohjelmisto Artrage. Käyttämällä grafi..

Kuinka luoda animoitu kirjoitusteho

Miten tehdään Sep 16, 2025

Käytettäessä hyvin, CSS-animaatio voi lisätä kiinnostusta ja persoonallisuutta sivustoosi. Tässä artikkelissa kävelemme miten luodaan animoitu ..

Kuinka maalata realistisia aaltoja Photoshopissa

Miten tehdään Sep 16, 2025

Kun maalataan valtameren kohtauksia Photoshop CC , kuten suurin osa maalaushankkeista, aloitan keräämällä joitakin merivalokuvaviitteitä varmistaakseen, että minulla on h..

Kolme vaihetta kuohuviiniä taivas akvarellessa

Miten tehdään Sep 16, 2025

Vesiväri on uskomaton väliaine, jolla on oikea Taidetekniikat voidaan käyttää maagisten ja ainutlaatuisten ku..

Luokat