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
380
HT22 - DA106A - Introduktion till HTML
tibbelit
0
550
HT22 - DA106A - Kursintroduktion
tibbelit
0
370
VT22 - DA395A - Storage, geolocation & media
tibbelit
0
300
Other Decks in Education
See All in Education
Webリテラシー基礎
takenawa
0
5.6k
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
2
510
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
100
The Art of Note Taking
kanaya
1
130
SkimaTalk Teacher Guidelines Summary
skimatalk
0
790k
仮説の取扱説明書/User_Guide_to_a_Hypothesis
florets1
4
310
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.2k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
460
SARA Annual Report 2024-25
sara2023
1
180
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
20
14k
IMU-00 Pi
kanaya
0
370
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
170
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Done Done
chrislema
184
16k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
KATA
mclloyd
30
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Code Review Best Practice
trishagee
69
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing Experiences People Love
moore
142
24k
How STYLIGHT went responsive
nonsquared
100
5.6k
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