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
380
VT22 - DA395A - Storage, geolocation & media
tibbelit
0
300
Other Decks in Education
See All in Education
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
570
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
290
SkimaTalk Teacher Guidelines
skimatalk
0
790k
2025年度春学期 統計学 第5回 分布をまとめるー記述統計量(平均・分散など) (2025. 5. 8)
akiraasano
PRO
0
120
i-GIP 2025 中高生のみなさんへ資料
202200
0
500
SkimaTalk Tutorial for Students
skimatalk
0
1.8k
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
CHARMS-HP-Banner
weltraumreisende
0
230
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
2k
ThingLink
matleenalaakso
28
4.1k
JOAI2025講評 / joai2025-review
upura
0
170
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
320
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
45k
A Tale of Four Properties
chriscoyier
160
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Automating Front-end Workflow
addyosmani
1370
200k
Building Adaptive Systems
keathley
43
2.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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