Šioje pamokoje sužinosite, kaip sukurti patrauklų galerijos išdėstymą naudojant "Flexbox" CSS ir HTML. Flexbox modelis suteikia lanksčių galimybių išdėstyti elementus svetainėje , ypač tokiuose maketuose kaip galerijos, kur labai svarbu elegantiškas ir reaguojantis pateikimas. Aptarsime HTML kodo struktūrą bei atitinkamus CSS stilius ir žingsnis po žingsnio juos sukursime.
Pagrindinės žinios
- Šioje pamokoje sužinosite, kaip naudoti "Flexbox" vaizdų išdėstymui sukurti, įskaitant konteinerio elementų naudojimą ir CSS savybių, tokių kaip display: flex, position: absolute ir justify-content: space-between, taikymą.
Žingsnis po žingsnio
1 žingsnis: sukurkite pagrindinę HTML kodo struktūrą
Pradėkite nuo pagrindinės HTML dokumento struktūros. Sukurkite konteinerio divą, pavadintą main, ir pridėkite kitą divą su klase images, kuriame yra visi paveikslėlių žymų elementai (IMG). Šiuos paveikslėlius galite gauti iš svetainės, kurioje yra viešai prieinamų paveikslėlių. Atkreipkite dėmesį, kad išdėstymas sutelkia dėmesį į tris paveikslėlius, todėl ketvirtasis nerodomas.
2 veiksmas: apibrėžkite CSS pagrindiniam konteineriui
Pagrindinio konteinerio stiliui nustatykite 100 % plotį, kad jis prisitaikytų prie lango pločio. Nustatykite aukštį 140 pikselių ir įsitikinkite, kad pozicionavimas yra santykinis, kad absoliučios pozicijos, kurias naudosime paveikslėliams ir rodyklėms, galėtų tinkamai orientuotis.
3 žingsnis: paveikslėlių konteinerio stilizavimas
Nustatykite paveikslėlių konteinerio (.images) poziciją: absolute, kad jis plūduriuotų virš rodyklių konteinerio. Nustatykite pločio ir aukščio reikšmes 100 %, kad jis būtų visiškai patalpintas pagrindiniame konteineryje. Taip pat naudokite flexbox savybes.
4 veiksmas: paveikslėlių išdėstymui taikykite flexbox savybes
Klasei .images nustatykite display: flex ir sulygiuokite turinį eilutėje naudodami flex-direction: row. Pridėjus 4 pikselių tarpą tarp paveikslėlių, tarp jų atsiras daugiau erdvės, o tai išlaisvins išdėstymą.
5 veiksmas: apibrėžkite vaizdų stilius
Naudodami flexbox savybę flex-basis turėtumėte nustatyti, kad galerijos vaizdai (img) būtų 240 pikselių pločio ir 140 pikselių aukščio. Taip pat galite nustatyti flex-grow ir flex-shrink reikšmes 0, kad vaizdai nekeistų savo dydžio ir visada išlaikytų pasirinktus matmenis.
6 veiksmas: Sukurkite rodyklės konteinerį
Dabar sukuriamas navigacijos rodyklių konteineris. Šiam konteineriui taip pat turi būti nustatytas parametras position: absolute (padėtis: absoliuti), o jo aukštis ir plotis - 100 %, kad jis visada būtų virš paveikslėlių. Naudokite display: flex, kad rodyklės būtų išdėstytos horizontaliai.
7 žingsnis: rodyklių stilizavimas
Nustatykite justify-content savybę space-between, kad viena rodyklė būtų kairėje, o kita - dešinėje. Rodyklėms atvaizduoti galite naudoti "Unicode" simbolius. Nustatykite baltą teksto spalvą ir įsitikinkite, kad rodyklių fonas yra skaidrus.
8 veiksmas: Įterpkite užvedimo efektus
Norėdami pridėti užvedimo efektą, galite pakeisti rodyklių fono spalvą, kai ant jų užvedate pelę. Nustatykite šiek tiek permatomą baltą spalvą, kad fonas šviestų ir suteiktų interaktyvumo įspūdį.
9 veiksmas: išbandykite ir pritaikykite išdėstymą
Dabar svarbu išbandyti visą maketą ir atlikti reikiamus pakeitimus. Atstumus tarp paveikslėlių, konteinerio dydį ar bendrą spalvų schemą galima lengvai pakeisti, atsižvelgiant į jūsų svetainės reikalavimus.
Apibendrinimas
Šioje pamokoje sužinojote, kaip sukurti reaguojančią paveikslėlių galeriją naudojant "Flexbox". Perėjote visus žingsnius nuo pagrindinės struktūros iki vizualinių efektų. Flexbox leidžia lanksčiai išdėstyti elementus, todėl jūsų dizainai tampa ypač patrauklūs.
Dažniausiai užduodami klausimai
Kaip reguliuoti paveikslėlių dydį?Galite koreguoti paveikslėlių dydžius Flexbox sistemoje.
Kuo skiriasi flex-grow ir flex-shrink?flex-grow nustato, ar elementas gali augti, o flex-shrink - ar ir kaip jis gali mažėti.
Kaip galiu reguliuoti užvedimo efektą?Pakeiskite CSS fono spalvą ir nepermatomumą užvedimo būsenai.
