Toto je starší verze dokumentu!
Výchozí stav: stránka se zobrazeným barevným čtvercem (div)
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>Animace 2023</title> <style> #ctverec { position: absolute; /* rozmery ctverce: sirka(width) a vyska(height) */ width: 200px; height: 200px; /* pozice leveho horniho rohu ctverce vuci parent elementu:display: top = jak daleko od horni hrany left = jak daleko od leve hrany bottom = jak daleko od spodni hrany right = jak daleko od prave hrany */ top: 150px; left: 200px; background-color:green } </style> <script> </script> </head> <body> <div id="ctverec"></div> </body> </html>
Úkoly
- Vytvořte svůj html soubor, uložte do něj obsah a zobrazte jej v prohlížeči. Měl by vám ukázat zelený čtverec
- Změńte barvu čtverce na červenou (red) a někam ve výchozím stavu posuňte, například trochu doprava
- V nástrojích pro vývojáře