Differences
This shows you the differences between two versions of the page.
mattias_04 [2021-09-17 09:07] Mattias Hamberg |
mattias_04 [2022-07-18 13:20] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Flytande element ====== | ||
- | |||
- | I den här uppgiften får du lära dig hur du kan arbeta med flytande element för att skapa struktur på sidan. Du kan läsa mer om hur du skapar flytande element på sidan [[https:// | ||
- | |||
- | ==== Instruktioner ==== | ||
- | - Ladda ner och packa upp denna {{:: mattias_04.zip|zip-fil}} | ||
- | - Följ instruktionerna i CSS-filen | ||
- | - Du får endast ändra i CSS-filen | ||
- | - Kontrollera så att resultatet blir som facit | ||
- | - Denna uppgift behöver du inte lämna in | ||
- | |||
- | Lycka till! | ||
- | |||
- | === HTML === | ||
- | <code html> | ||
- | < | ||
- | <html lang=" | ||
- | < | ||
- | <meta charset=" | ||
- | < | ||
- | <link rel=" | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | <label for=" | ||
- | <input type=" | ||
- | <label for=" | ||
- | <input type=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | < | ||
- | <img src=" | ||
- | < | ||
- | < | ||
- | <img src=" | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | === CSS === | ||
- | <code css> | ||
- | * { | ||
- | /* Denna gör så att padding-värdet inte läggs till bredden på elementet */ | ||
- | box-sizing: border-box; | ||
- | } | ||
- | |||
- | body { | ||
- | /* Typsnittsfamiljen ska vara Helvetica, därefter Arial, därefter sans-serif */ | ||
- | } | ||
- | |||
- | aside, article, header, footer { | ||
- | /* Sätt en utfyllnad på 2em på elementen aside, article, header och footer */ | ||
- | } | ||
- | |||
- | header { | ||
- | /* Sätt bakgrundsfärgen till lightskyblue */ | ||
- | } | ||
- | |||
- | aside { | ||
- | /* Skapa ett vänster-flytande element som är 30% av dokumentet */ | ||
- | } | ||
- | |||
- | article { | ||
- | /* Skapa ett vänster-flytande element som är 70% av dokumentet med en 1px bred heldragen vänster-kant med färgen lightskyblue */ | ||
- | } | ||
- | |||
- | footer { | ||
- | /* Lägg elementet efter alla flytande element och sätt bakgrundsfärgen till aliceblue */ | ||
- | } | ||
- | |||
- | img { | ||
- | /* Gör så att ingen bild kan vara bredare än maximalt 100% */ | ||
- | } | ||
- | |||
- | img.portrait { | ||
- | /* Skapa ett höger-flytande element med bredden 6em och en 1em tjock marginal överallt utom till höger där marginalen helt ska tas bort */ | ||
- | } | ||
- | |||
- | label { | ||
- | /* Visa elementet som ett block, ge den en toppmarginal på 1em, färgen grå och en textstorlek på 0.8em */ | ||
- | } | ||
- | |||
- | input { | ||
- | /* Gör så att elementet tar upp 100% av bredden och sätt höjden till 2em */ | ||
- | } | ||
- | |||
- | button { | ||
- | /* Ge bakgrunden färgen lightskyblue, | ||
- | } | ||
- | </ | ||