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
HT21 - DA106A - Layout med CSS (1)
Search
Anton Tibblin
September 14, 2021
Education
0
640
HT21 - DA106A - Layout med CSS (1)
Anton Tibblin
September 14, 2021
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
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
10
5.4k
第1回大学院理工学系説明会|東京科学大学(Science Tokyo)
sciencetokyo
PRO
0
3.9k
IMU-00 Pi
kanaya
0
370
子どものためのプログラミング道場『CoderDojo』〜法人提携例〜 / Partnership with CoderDojo Japan
coderdojojapan
4
16k
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
260
生成AI
takenawa
0
6.6k
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
580
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
kaityo256
PRO
7
1.3k
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.8k
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
330
プレゼンテーション実践
takenawa
0
6.6k
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
KATA
mclloyd
30
14k
GitHub's CSS Performance
jonrohan
1031
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Making the Leap to Tech Lead
cromwellryan
134
9.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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
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 */ }
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