Zobrazení
V této lekci rozvrhnete horní část domovské stránky útulku: záhlaví s navigací, velkou úvodní sekci nahoře (weboví designéři jí říkají hero) a karty našich čtyř koček. Potřebné CSS znáte z kurzu CSS: display, flexbox, mřížku a position. Teď se naučíte třídy Tailwindu, které ho napíšou za vás.
Stránka v editoru už má třídy z předchozích lekcí: barvy, text, mezery, zaoblené rohy a stíny. Její rozložení je ale zatím obyčejný normální tok, ve kterém je všechno pod sebou. Odkazy v navigaci jsou pod sebou a karty jsou široké jako celá stránka (uvidíte je, když v náhledu sjedete dolů).
Začneme vlastností display. V Tailwindu má každá její hodnota vlastní třídu, pojmenovanou podle hodnoty:
| Třída | CSS |
|---|---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
hidden | display: none; |
Jen třída hidden (skrytý) se nejmenuje podle své hodnoty. Skrytý prvek se nezobrazí a nezabírá žádné místo, v HTML ale zůstane. Nepleťte si ji s invisible (visibility: hidden) ani s opacity-0: s nimi prvek také neuvidíte, ale na jeho místě zůstane prázdná mezera. (Třídy pro display: flex a display: grid přijdou na řadu v dalších cvičeních.)
Z kurzu CSS víte, že řádkový prvek, například odkaz, sedí v řádku textu jako slovo. Jeho polstrování nahoře a dole neodsune okolní prvky a horní a dolní okraj u něj nefungují vůbec. Podívejte se na odkaz „Seznamte se s kočkami“ v úvodní sekci: jeho oranžové pozadí zasahuje do textu nad ním a jeho třída mt-4 nic nedělá. (Tlačítko Přispět v navigaci má stejný problém; o to se brzy postará flexbox.)
Jak psát:
Pokyny
Přidejte odkazu „Seznamte se s kočkami“ třídu inline-block. Jeho polstrování a okraj teď zabírají místo, takže se odkaz posune pod text. (S třídou block by se posunul také, ale navíc by se roztáhl přes celou šířku úvodní sekce, stejně jako odstavec.)
Na konci navigace je tlačítko Menu. Je určené pro mobily, kde se odkazy do řady nevejdou. Jak prvek zobrazit jen na některých obrazovkách, se naučíte v lekci o responzivním designu. Do té doby přidejte tlačítku třídu hidden, aby se nezobrazovalo vůbec.
Začněte programovat zdarma
1/11