# 117: Pielāgota galvene piedāvājumiem - CSS-triki

Anonim

Pēc dīvainā neskaidrības pēdējā videoklipā par to, kuru galveni mēs faktiski darījām, šoreiz mēs patiešām ieviesīsim pielāgoto galveni Darījumu lapai! Šo paveica Mega Hanta.

Tāpat kā visas galvenes, mēs kādu laiku pavadījām, apskatot oriģinālos failus un noskaidrojot, kā vislabāk sēdēt lapā. Mēs izmēģinām dažas iespējas, taču galu galā vislabāk izlemt ievietot to ierobežotā lodziņā (atšķirībā no kaut kā Demos galvenes, kur galvene izkūst uz robežas ap saturu.

Eksportējot, mēs spēlējam daudz dažādu grafisko formātu. Interesanti, ka šis konkrētais stils ir aptuveni vienāds gan kvalitātes, gan faila lieluma ziņā starp PNG un JPG.webp. Mēs to izvadām 2000px platumā, kam vajadzētu izskatīties labi uz jebkura ekrāna. Mēs arī sasniedzām aptuveni 150 000, kas ir liels, taču šādam varonim šāds grafiks ir labs mērķis.

Mēs sākam kārtot darījumu veidni, tostarp apskatot, kā darījumi ir katrs atsevišķs pielāgotais lauks, kas pirms izlaišanas tiek randomizēts. Mēs pavadīsim vairāk laika šim marķējumam un tam visam vēlāk, taču, tā kā mēs šajā veidnē gatavojam lietas galvenei, mēs to varētu arī iztīrīt.

Mēs aplūkojam vairākas dažādas iespējas pielāgotās galvenes grafikas ievietošanai lapā. Fona attēls ir visjēdzīgākais, jo mēs izmantojam semantiku

nosaukuma un attēla nomaiņai. Izmantojot background-size, mēs pārbaudām cover, bet tas var izraisīt atslēgas. Mēs pārbaudām satur, bet tas ļauj vietu ārpusē. 100%izdara triku, bet mums būs jāizveido proporcijas stila lodziņš, lai tas labi darbotos. Tomēr tas ir viegli, mēs vienkārši izveidojam augstumu 0 un izmantojam procentuālo augšējo polsterējumu, lai tas darbotos (polsterēta kaste).

Šī ir septītā pielāgotā galvene, ko esam veikuši, un katrs no tiem tika veikts atšķirīgi. Web dizains, vai ne? Kāds ceļojums.