Table of Contents

CSS II

Úvod

Základní layout

  1. box model: Viditelně oddělte od sebe elementy nav, article, footer, header pomoci box model prvků (padding, border, margin).
  2. float, clear: Vložte do úryvku mnohem více vygenerovaného textu (lorem ipsum). Stáhněte si libovolný obrázek, vložte ho do úryvku, vyzkoušejte si na něm různé způsoby obtékání obrázku textem.
  3. position: Zkuste si různé nastavení pozice obrázku v úryvku (static, relative, absolute, fixed)
  4. display: Označte pár po sobě jdoucích slov v úryvku tagem span. Zvýrazněte v něm barvu textu a zkuste si různé způsoby jeho zobrazení v rámci textu (none, inline, block, inline-block)

Pokročilý layout

  1. Flexbox: Do tagu header přidejte button s nápisem “Login”, zařiďte aby byl úplně vpravo. Zároveň zařiďte aby stávající tagy img a h1 byli úplně vlevo a vedle sebe. Challenge - zkuste vyřešit bez použití flexboxu (float, clear, position, atd.).
  2. Responzivita: Zařiďte, aby se tagy nav a article zobrazovali dynamicky vedle sebe na desktopu, anebo pod sebou na smartphonu (@media)
  3. Tisk: Vytvořte a nalinkujte nový soubor CSS stylu, který se aplikuje jen při tisku stránky <link media=…>

Odkazy