HT20 - DA106A - Layout med CSS (1)

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 15, 2020

HT20 - DA106A - Layout med CSS (1)

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 15, 2020
Tweet

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. DEMO - POSITIONERING Med float

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

  33. None
  34. Hur skapar man en layout?

  35. None
  36. Vi behöver alltså • Sidhuvud • Navigation • Innehåll •

    Sidfot <header> <nav> <main> <footer>
  37. Kan vara bra att ha… • En box (<div>) som

    omsluter hela sidan.
  38. DEMO LAYOUT

  39. None