# 92: Individualių galerijos puslapių kūrimas - CSS-gudrybės

Anonim

Mes turime šiek tiek „Photoshop“ maketo, kurį galime naudoti čia, kai tęsiame atskiros galerijos puslapio šablono kūrimą.

Pirmiausia sukūrėme nuorodas „Kitas“ ir „Ankstesnė“. Jie yra absoliučiai išdėstytame langelyje galerijos juostoje, kad galėtume juos sutelkti puslapyje, nepaisant kitų juostoje esančių mygtukų ir kitų dalykų. Jie užima tą pačią klasę kaip mygtukas „Pateikti vieną“, todėl ten yra pastovumas.

Toliau turime šį labai ploną kairįjį stulpelį, kuriame gausite tekstą. Mes pradedame nuo 1/8 7/8 tinklelio, tačiau 1/8 yra tik šiek tiek per plonas. Mes jį pakeičiame į 1/4 3/4, bet tai yra per daug. Taigi, kaip ir pasakų mažylis, 1/6 5/6 buvo teisingas.

Tame siaurame stulpelyje atliekame keletą tipografijos darbų, įtraukdami pavadinimą (į

žyma, nes tai svarbiausias puslapio pavadinimas), aprašas ir kitos skiltys. Didžioji dalis tipografijos tiesiog patenka į vietą pagal paprastą ir tvirtą tipografijos sąranką.

5/6 tinklelis skirtas visam vaizdui. Gražu ir didelė, o tai puiku. Jo fonas yra šviesiai pilkas, kaip ir vaizdai tinklaraščio įrašuose (pvz.,

).

Mes galvojame, kaip šiek tiek išgalvoti, kaip mes suformuluojame žymas. Apsižvalgome „CodePen“ (čia yra nuoroda į „žymes“ žymą, META ALERT). Galų gale manome, kad tai yra per daug, ir paliekame juos kaip įprastas nuorodas.

Mygtukas „viso dydžio“ veikia vienu iš paprasčiausių būdų, kuriuos tik galime, atidarykite naują langą, kuris yra viso dydžio vaizdo matmenys ir kuriame rodomas vaizdas. Tai tarsi modalinė dėžutė iš 2000-ųjų pradžios! Bet man tai patinka. Tai paprasta, jam nereikia daugybės kodų (kaip kad būtų „lightbox“) ir akivaizdu, kad su jais bendraujama. Tai dar geriau, jei manęs paklausi.