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
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
540
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
180
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
580
OpenRobomaster 中国のロボットコンテスト 日本連携の可能性
takasumasakazu
0
450
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
550
検索/ディスプレイ/SNS
takenawa
0
6.6k
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
10k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
著作権と授業に関する出前講習会/dme-2025-05-01
gnutar
0
200
CHARMS-HP-Banner
weltraumreisende
0
230
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
120
The Art of Note Taking
kanaya
1
140
Featured
See All Featured
Side Projects
sachag
455
42k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Producing Creativity
orderedlist
PRO
346
40k
A Modern Web Designer's Workflow
chriscoyier
695
190k
For a Future-Friendly Web
brad_frost
179
9.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Music & Morning Musume
bryan
46
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building an army of robots
kneath
306
45k
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