CourseWare Wiki
Switch Term
Winter 2024 / 2025
Winter 2023 / 2024
Winter 2022 / 2023
Winter 2021 / 2022
Winter 2020 / 2021
Winter 2019 / 2020
Winter 2018 / 2019
Older
Search
Log In
b241
courses
b6b39zwa
tutorials
05
Table of Contents
CSS II
Úvod
Základní layout
Pokročilý layout
Odkazy
CSS II
Úvod
Pokračujte v práci na
HTML
z předchozího cvičení:
https://gitlab.fel.cvut.cz/dzuremar/teaching-zwa/-/blob/main/cv4/index.html
Základní layout
box model
: Viditelně oddělte od sebe elementy
nav
,
article
,
footer
,
header
pomoci box model prvků (
padding
,
border
,
margin
).
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.
position
: Zkuste si různé nastavení pozice obrázku v úryvku (
static
,
relative
,
absolute
,
fixed
)
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
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.).
Responzivita
: Zařiďte, aby se tagy
nav
a
article
zobrazovali dynamicky vedle sebe na desktopu, anebo pod sebou na smartphonu (
@media
)
Tisk
: Vytvořte a nalinkujte nový soubor
CSS
stylu, který se aplikuje jen při tisku stránky
<link media=…>
Odkazy
box model
float a clear
position
display
flexbox
@media
print
courses/b6b39zwa/tutorials/05/start.txt
· Last modified: 2021/10/18 12:25 by
dzuremar