Galerija z Flexboxom: Navodila za ustvarjanje odzivnih postavitev

V tem vodiču se boš naučil, kako ustvariti privlačno galerijsko postavitev z uporabo Flexbox v CSS in HTML. Model Flexbox ti ponuja prilagodljive možnosti za razporejanje elementov na tvoji spletni strani, zlasti za postavitve, kot so galerije, kjer je eleganten in odziven prikaz ključnega pomena. Razpravljali bomo o strukturi HTML kode ter ustrezni CSS stili in gradili korak za korakom.

Najpomembnejše ugotovitve

• V tem vodiču se boš naučil, kako uporabiti Flexbox za ustvarjanje postavitve na podlagi slik, vključno z uporabo kontejnerskih elementov in uporabo CSS lastnosti, kot so prikaz: flex, položaj: absoluten in justify-content: prostor med.

Korak za korakom navodila

Korak 1: Ustvari osnovno strukturo HTML kode

Začni z ustvarjanjem osnovne strukture svojega HTML dokumenta. Ustvari glavni kontejner main in dodaj še eno div z razredom images, ki vsebuje vse elemente oznak slik (IMG). Te slike lahko pridobiš s spletne strani s slikami javne domene. Upoštevaj, da je postavitev usmerjena na tri slike, da se četrta ne prikaže.

Korak 2: Definiraj CSS za glavni kontejner

Za oblikovanje glavnega kontejnerja nastavi širino na 100 %, da se prilagodi širini okna. Nastavi višino na 140 slikovnih pik in zagotovi, da je pozicioniranje relativno, da se lahko absolutne pozicije, ki jih bomo uporabili za slike in puščice, pravilno usmerijo.

Korak 3: Oblikuj kontejner za slike

Za kontejner slik (.images) nastavi položaj na absoluten, da bo lebdenje nad kontejnerjem za puščice. Nastavi širino in višino na 100 %, da se bo popolnoma postavil v glavni kontejner. Uporabi tudi lastnosti Flexbox.

Korak 4: Uporabi lastnosti Flexbox za postavitev slik

Za razred .images nastavi prikaz: flex in usmeri vsebine v vrstico z lastnostjo flex-direction: vrstica. Dodaj razmik 4 slikovnih pik med slikami, kar razporeditev razrahlja.

Korak 5: Definiraj sloge slik

Slike (img) v galeriji nastavi s pomočjo lastnosti Flexbox: flex-basis na 240 pikslov širine in 140 pikslov višine. Prav tako lahko nastaviš flex-grow in flex-shrink na 0, da slike ne spremenijo velikosti in vedno ohranijo izbrane mere.

Korak 6: Ustvari kontejner za puščice

Sedaj ustvari kontejner za navigacijske puščice. Tudi ta kontejner mora biti nastavljen na položaj: absoluten in prejmeti višino ter širino 100 %, da bo vedno nad slikami. Uporabi prikaz: flex, da horizontalno razporediš puščice.

Korak 7: Oblikuj puščice

Nastavi lastnost justify-content na prostor med, da bo ena puščica levo in druga desno. Za puščice lahko uporabiš Unicode znake, ki prikažejo puščice. Nastavi barvo besedila na belo in zagotovi, da je ozadje puščic prosojno.

Korak 8: Vstavi učinke ob drsenju miške

Za dodajanje učinka ob drsenju miške spremeni barvo ozadja puščic, kadar greš z miško čeznje. Nastavi jih na rahlo prosojno belo, da ozadje zasveti ter ustvari interaktivni občutek.

Korak 9: Preizkusi in prilagodi postavitev

Zdaj je pomembno, da preizkusite celoten postavitev in po potrebi prilagodite. Razmik med slikami, velikost kontejnerja ali splošna barvna shema se lahko glede na zahteve vaše spletne strani enostavno spremenijo.

Povzetek

V tem vodiču ste se naučili, kako s pomočjo Flexboxa ustvariti odzivno galerijo slik. Prehodili ste korake od osnovne strukture do vizualnih učinkov. Flexbox vam omogoča prilagodljivo postavitev elementov, kar naredi vaše oblikovanje še posebej privlačno.