Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HT20 - DA106A - Layout med CSS (1)
Search
Anton Tibblin
September 15, 2020
Education
0
370
HT20 - DA106A - Layout med CSS (1)
Anton Tibblin
September 15, 2020
Tweet
Share
More Decks by Anton Tibblin
See All by Anton Tibblin
HT22 - DA106A - Användbarhet (1)
tibbelit
0
330
HT22 - DA106A - Ramverk
tibbelit
0
280
HT22 - DA106A - JavaScript
tibbelit
0
280
HT22 - DA106A - Responsiv webbutveckling
tibbelit
0
330
HT22 - DA106A - Introduktion till CSS
tibbelit
0
390
HT22 - DA106A - Formulär & tabeller
tibbelit
0
390
HT22 - DA106A - Introduktion till HTML
tibbelit
0
550
HT22 - DA106A - Kursintroduktion
tibbelit
0
380
VT22 - DA395A - Storage, geolocation & media
tibbelit
0
300
Other Decks in Education
See All in Education
理想の英語力に一直線!最高効率な英語学習のすゝめ
logica0419
6
390
今までのやり方でやってみよう!?~今までのやり方でやってみよう!?~
kanamitsu
0
170
仮説の取扱説明書/User_Guide_to_a_Hypothesis
florets1
4
380
学びは趣味の延長線
ohmori_yusuke
0
110
【品女100周年企画】Pitch Deck
shinagawajoshigakuin_100th
0
5.9k
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
jvpcubias
0
130
OJTに夢を見すぎていませんか? ロールプレイ研修の試行錯誤/tryanderror-in-roleplaying-training
takipone
1
220
Test-NUTMEG紹介スライド
mugiiicha
0
160
小学校女性教員向け プログラミング教育研修プログラム「SteP」の実践と課題
codeforeveryone
0
110
2026 g0v 零時政府年會啟動提案 / g0v Summit 2026 Kickstart
rschiang
0
270
[FUN Open Campus 2025] 何でもセンシングしていいですか?
pman0214
0
240
探査機自作ゼミ2025スライド
sksat
3
780
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Site-Speed That Sticks
csswizardry
10
820
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
4 Signs Your Business is Dying
shpigford
184
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
A designer walks into a library…
pauljervisheath
207
24k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
KATA
mclloyd
32
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Adaptive Systems
keathley
43
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Transcript
LAYOUT MED CSS
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
None
None
None
None
None
None
Repetition: CSS • Att formge en webbplats • Olika klädsel
till samma innehåll • Hur hittar man det man vill formge?
None
Boxmodellen för HTML-element
Exempel på boxmodellen
None
None
None
Vad gör en layout bra?
Att visa upp HTML-element
Tre olika metoder för att visa upp element Float Flexbox
Grid
MAN KAN I PRINCIP BYGGA ALLT MED ALLA TEKNIKERNA Men
det är en dålig idé…
ATT VÄLJA HUR ELEMENT SKA VISAS UPP
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
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
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
Idag tittar vi på: float
OLIKA SÄTT ATT POSITIONERA ELEMENT relativ, statisk, absolut, fixerad
CSS - position
BOXMODELLEN Egenskapen: box-sizing
None
None
DEMO - POSITIONERING Med float
None
https://de veloper.m ozilla.org/ en- US/docs/ Web/HTM L/Element
None
Hur skapar man en layout?
None
Vi behöver alltså • Sidhuvud • Navigation • Innehåll •
Sidfot <header> <nav> <main> <footer>
Kan vara bra att ha… • En box (<div>) som
omsluter hela sidan.
DEMO LAYOUT
None