HT21 - DA106A - Layout med CSS (1)

Transcript

1. LAYOUT MED CSS

2. Dagens föreläsning Dagens agenda • Snabb repetition av HTML &

   CSS • Element för positionering & layout • Positionering av element • Statisk • Relativ • Absolut • Fixederad • Layout med CSS
3. None
4. None
5. None
6. None
7. None
8. None

9. Repetition: CSS • Att formge en webbplats • Olika klädsel

   till samma innehåll • Hur hittar man det man vill formge?
10. None

11. Boxmodellen för HTML-element

12. Exempel på boxmodellen

13. None
14. None
15. None

16. Vad gör en layout bra?

17. Att visa upp HTML-element

18. Tre olika metoder för att visa upp element Float Flexbox

    Grid

19. MAN KAN I PRINCIP BYGGA ALLT MED ALLA TEKNIKERNA Men

    det är en dålig idé…

20. ATT VÄLJA HUR ELEMENT SKA VISAS UPP

21. display: float • Fungerar bäst när man vill positionera individuellt

    element i förhållande till andra element. Exempel: • En bild ska ligga till höger/vänster om texten • En informationsruta ska ligga till höger/vänster om annat innehåll

22. display: flex • Fungerar bäst när man vill positionera flera

    element i förhållande till varandra, exempelvis: • Flera bilder efter varandra • Element ska ha olika storlekar beroende på tillgång av yta

23. display: grid • Fungerar bäst när man vill positionera element

    som ett rutnät, exempelvis: • Bygga layouter med kolumner som har ”fasta” propotioner • Element ska ha olika storlekar beroende på tillgång av yta

24. Idag tittar vi på: float

25. OLIKA SÄTT ATT POSITIONERA ELEMENT relativ, statisk, absolut, fixerad

26. CSS - position

27. BOXMODELLEN Egenskapen: box-sizing

28. None
29. None

30. box-sizing: content-box; box-sizing: border-box; element { box-sizing: content-box; /* Standard

    */ width: 158px; padding: 20px; border: 1px solid black; } element { box-sizing: border-box; width: 200px; padding: 20px; /* Inkluderas i width */ border: 1px solid black; /* Inkluderas i width */ }

31. DEMO - POSITIONERING Med float

32. None

33. https://de veloper.m ozilla.org/ en- US/docs/ Web/HTM L/Element

34. None

35. Hur skapar man en layout?

36. None

37. Vi behöver alltså • Sidhuvud • Navigation • Innehåll •

    Sidfot <header> <nav> <main> <footer>

38. Kan vara bra att ha… • En box (<div>) som

    omsluter hela sidan.

39. DEMO LAYOUT

40. None