# 128: Az üzletek oldalának stílusa - CSS-trükkök

Anonim

Ebben a képernyőn át fogunk merülni az Ügyletek részben. Az Ügyletek rész lényegében egy „hirdetések fala”. Ez egy olyan terület a webhelyen, ahol az embereknek el kellene navigálniuk magukhoz, ezért nem aggódom a hirdetések elakadása miatt az emberek gondolatai között. Ezenkívül minden hirdetésnek van kedvezménye, és olyan termék, amelyet én személy szerint ajánlok, így nem történik árnyék.

A fejléc már a helyén van. A tartalmat is már leköpjük az oldalra, amelyet meg kell stílusoznunk. Ez a tökéletes hely, ahol rögtön elindíthat néhány CSS-t.

Ami nagyon jó ebben az oldalon, az az, hogy belemeríthetjük a lábujjainkat az érzékeny reklámozás világába. A reklámvilág valóban nem érte utol az adaptív dizájnt. A hirdetések gyakran rögzített méretűek, és az átméretezésük nehéz vagy egyenesen tilos. Ezen a webhelyen nem ez a helyzet, mert én magam készítem a hirdetéseket.

Minden hirdetés háttérképből, logóképből és szövegdarabokból készül. Egy background-imageeszköz használatával valamennyire levághatjuk a széleit, és ez rendben van. Nem veszítünk el szöveget vagy a logó fontos részeit.

Ennek a „falnak” az elrendezése falszerű lesz =). Három oszlop lesz széles asztali méretben, majd megy le két oszlopra, majd végül egyetlen oszlopra, telefon-méretben. Csak annyit teszünk, hogy lebegtetjük a hirdetéseket, és alkalmazunk egy-t min-height, hogy mindazon magasságban maradjanak. Különböző média lekérdezéseknél egyszerűen beállítjuk a hirdetések szélességét, és megváltoztatjuk, hogy melyiküknek van megfelelő margója és melyiknek nincs (via :nth-child).

A hátoldalon minden hirdetés egy egyéni mező a WordPress-ben. Amikor kiadjuk őket az oldalra, először lekérdezzük őket, és egy tömbbe helyezzük őket. Ezután keverje össze azt a tömböt. Aztán végre visszhangozza őket. Lehet, hogy mindenkinek megfelelő képet ad a legfelsőbb hirdetésről!