Selles õpetuses õpid, kuidas luua kutse Galerie-Layout CSS-igaja HTML-i abil kasutades Flexboxi. Flexboxi mudel pakub sulle paindlikke võimalusi elementide paigutamiseks oma veebilehel, eriti selliste paigutuste jaoks nagu galeriid, kus on oluline elegantne ja reageeriv esitus. Me vaatleme HTML-koodi struktuuri ja vastavad CSS-stiilid ja ehitame selle sammuhaaval üles.
Olulisemad järeldused
- Selles õpetuses saate teada, kuidas kasutada Flexboxi pildipõhise paigutuse loomiseks, sealhulgas konteineritelementide kasutamine ja CSS-omaduste rakendamine, nagu kuvamine: flex, asukoht: absoluutne ja õigusta-sisu: space-between.
Samm-sammuline juhend
Samm 1: Looge HTML-koodi põhiraamistik
Alustage oma HTML-dokumendi põhiraamistiku loomisega. Looge põhikonteiner-div nimega peamine ja lisage teine Div klassiga pildid, mis sisaldab kõiki piltide märgi-elemente (IMG). Neid pilte saate hankida veebisaidilt Public Domain pilte. Pidage meeles, et paigutus keskendub kolmele pildile, et neljas ei kuvataks.
Samm 2: Määratlege peamine konteineri CSS
Peamise konteineri stiilimiseks määrake laius 100%, et see kohanduks akna laiusega. Määrake kõrgus 140 pikslit ja veenduge, et asukoht oleks suhteline, et tagada piltide ja noolte jaoks kasutatavate absoluutsete positsioonide õige orientatsioon.
Samm 3: Pildi konteineri stiilimine
Määrake piltide konteiner (.pildid) asukoht: absoluutne, et see hõljuks noolte konteineri kohal. Määrake laius ja kõrgus 100%, et see paigutataks täielikult põhikonteinerisse. Kasutage ka Flexbox omadusi.
Samm 4: Flexbox-omaduste rakendamine pildipaigutusele
.Pildid-Klassi puhul määrake kuvamine: flex ja joondage sisu reale flex-suundumuse: rida abil. Vahe lünga lisamine 4 piksliga piltide vahel tagab rohkem ruumi nende vahel, mis lõdvendab paigutust.
Samm 5: Pildistiilide määratlemine
Galeries olevad pildid (img) tuleks paindlikkuse-omaduse flex-basis abil määrata 240 piksli laiuseks ja 140 piksli kõrguseks. Lisaks võite määrata flex-grow ja flex-shrink 0-le, et pildid ei muutuks suurust ja hoiaksid alati valitud mõõtmeid.
Samm 6: Noolte konteineri loomine
Nüüd järgneb navigeerimisnoolede konteiner. Ka selle konteineri tuleb määrata asukoht: absoluutne ja see peab saama 100% kõrguse ja laiuse, et see oleks alati piltide peal. Kasutage noolte horisontaalseks joondamiseks kuvamine: flex.
Samm 7: Noolte stiilimine
Määrake justify-content-omadus space-between, et üks nool oleks vasakul ja teine paremal. Noolte jaoks võite kasutada unikaalkoodi sümbolite kujutamiseks. Määrake teksti värv valgeks ja veenduge, et noolte taust oleks läbipaistev.
Samm 8: Leia aspekte
Hõljuva efekti lisamiseks saate muuta noolte taustavärvi, kui hiir nende kohal liigub. Määrake need õrnalt läbipaistvaks, et taust helendaks ja looks interaktiivse tunde.
Samm 9: Katsetage ja kohandage paigutust
Nüüd on oluline testida kogu kujundus ja teha vajadusel kohandusi. Piltide vaheline kaugus, konteineri suurus või üldine värvipalett võivad olenevalt sinu veebisaidi nõuetest kergelt muutuda.
Kokkuvõte
Selles õpetuses õppisid, kuidas luua paindlik pildigalerii Flexboxi abil. Oled läbinud sammud põhjalikust struktuurist kuni visuaalsete efektideni. Flexbox võimaldab sul elementide paindlikku paigutamist, mis muudab sinu kujundused eriti atraktiivseks.
Sagedased küsimused
Kuidas muuta piltide suurust?Sa saad piltide puhul kohandada väärtusi flex-basis'is.
Mis vahe on flex-grow'il ja flex-shrink'il?Flex-grow määrab, kas element saab kasvada, samal ajal kui flex-shrink määratleb, kas ja kuidas see saab kahaneda.
Kuidas saan kohandada hover-efekti?Muuda CSS-ist hover-olekuks taustavärvi ja läbipaistvust.
