128: Styling stránky ponúk Triky CSS

Anonim

V tomto vysielaní sa budeme venovať sekcii Dohody. Sekcia Dohody je v podstate „stenou reklám“. Je to oblasť webu, ktorú by ľudia museli navigovať sami k sebe, takže sa neobávam rušenia reklám v myšlienkach ľudí. Každá reklama má na ňu tiež zľavu a je to produkt, ktorý osobne odporúčam, takže sa nič nestíha.

Hlavičku už máme umiestnenú. Už tiež máme obsah vypľúvaný na stránku, ktorý potrebujeme upraviť. Toto je ideálne miesto na spustenie hneď pri písaní niektorých CSS.

Na tejto stránke je super to, že sa môžeme ponoriť do sveta responzívnej reklamy. Svet reklamy naozaj nestíhal responzívny dizajn. Reklamy majú často pevnú veľkosť a zmena ich veľkosti je zložitá alebo je priamo zakázaná. Na tomto webe to tak nie je, pretože reklamy si vytváram sám.

Každá reklama je vytvorená z obrázka na pozadí, obrázka loga a kúskov textu. Pomocou background-imageprostriedku môžeme trochu orezať jeho okraje a je to v poriadku. Nestrácame žiadny text ani dôležité časti loga.

Usporiadanie tejto „steny“ bude podobné stene =). Budeme mať tri stĺpce so širokou veľkosťou pracovnej plochy, potom prejdeme k dvom stĺpcom a nakoniec jeden stĺpec k veľkosti telefónu. Všetko, čo robíme, je plávať s reklamami a aplikovať a min-height, aby boli všetky v rovnakej výške. Pri rôznych mediálnych dotazoch jednoducho upravíme šírku reklám a zmeníme, ktoré z nich majú pravý okraj a ktoré nie (via :nth-child).

Na zadnej strane je každá reklama vo WordPresse vlastné pole. Keď ich zobrazíme na stránke, najskôr ich vyhľadáme a vložíme do poľa. Potom toto pole zamiešajte. Potom ich konečne ozvite. Rovnako by mohli všetci dostať férovú rolu ako najlepší inzerát!