Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- krouzek:animace_2023 [2023/11/22 16:09] – vytvořeno admin
+++ krouzek:animace_2023 [2023/11/22 16:56] – admin
@@ Řádek 11: / Řádek 11: @@
     #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
+      background-color:green;
     }
     </style>
@@ Řádek 26: / Řádek 35: @@
 </body>
 </html>
+</code>
+=== Ú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 konzoli v nástrojích pro vývojáře ''%%document.getElementById('ctverec').style.top='210px'%%''
+     * Zkuste takhle několikrát se čterečkem pohnout na různá místa
+   * Uvnitř ''%%<script>%%'' tagu si vytvořte dvě proměnné:
+<code javascript>
+let top = 250
+let left = 100
 </code>