CourseWare Wiki
Switch Term
Winter 2022 / 2023
Winter 2021 / 2022
Winter 2020 / 2021
Winter 2019 / 2020
Winter 2018 / 2019
Older
Search
Log In
b221
courses
b6b39zwa
tutorials
05
Warning
This page is located in archive.
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