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
350
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
220
HT22 - DA106A - Ramverk
tibbelit
0
240
HT22 - DA106A - JavaScript
tibbelit
0
240
HT22 - DA106A - Responsiv webbutveckling
tibbelit
0
300
HT22 - DA106A - Introduktion till CSS
tibbelit
0
320
HT22 - DA106A - Formulär & tabeller
tibbelit
0
330
HT22 - DA106A - Introduktion till HTML
tibbelit
0
480
HT22 - DA106A - Kursintroduktion
tibbelit
0
290
VT22 - DA395A - Storage, geolocation & media
tibbelit
0
260
Other Decks in Education
See All in Education
日本産業技術教育学会(第66回全国大会)発表資料「画像認識AIを活用した枝豆選別機の授業実践 」
codeforeveryone
0
160
2023年の現代アート関連年表
padograph
0
190
開発組織が情報発信の打席に立てる土台を作った一年を振り返る
na9amura
0
720
デジタルアイデンティティの技術を学ぼう!~認証認可にまつわる標準仕様文書を読んでみよう~ / OpenID Summit Tokyo 2024
ayokura
0
420
RE:HACK 2023 - Reverse Engineering and Binary Exploitation: Intel x86/x86-x64 Assembly
x86fatah
1
180
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
1.6k
スクフェスの学びにチームを惹き込め! 社内同時視聴会のすゝめ!
pokotyamu
0
480
第1回全国商業高校Webアプリコンテスト総括
asial_corp
0
300
TCA Practice in 5 min
d_date
0
190
滑空スポーツ講習会2023 航空安全講習会 第1回 熟練者のエラーマネジメント(状況認識スキルからの考察)/ JSA Safety Seminar 2023 Error management for experts
jsaseminar
0
320
MySmartSTEAM2324
cbtlibrary
0
100
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介!
asial_corp
0
290
Featured
See All Featured
Being A Developer After 40
akosma
56
580k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Music & Morning Musume
bryan
39
5.4k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
It's Worth the Effort
3n
180
27k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Agile that works and the tools we love
rasmusluckow
323
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Web Components: a chance to create the future
zenorocha
304
41k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
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