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
230
HT22 - DA106A - Ramverk
tibbelit
0
250
HT22 - DA106A - JavaScript
tibbelit
0
250
HT22 - DA106A - Responsiv webbutveckling
tibbelit
0
310
HT22 - DA106A - Introduktion till CSS
tibbelit
0
330
HT22 - DA106A - Formulär & tabeller
tibbelit
0
340
HT22 - DA106A - Introduktion till HTML
tibbelit
0
490
HT22 - DA106A - Kursintroduktion
tibbelit
0
300
VT22 - DA395A - Storage, geolocation & media
tibbelit
0
260
Other Decks in Education
See All in Education
子どもたち創造的活動機会の必要性に関する提言/creativehub
codeforeveryone
0
320
Родина моя Беларусь в лицах
programmer_sch2np
0
170
Animaatiot opetuksessa
matleenalaakso
0
3.2k
2024年度春学期 統計学 第1回 イントロダクションー統計的なものの見方・考え方について (2024. 4. 11)
akiraasano
PRO
1
110
H5P-työkalut
matleenalaakso
3
33k
Sample-se-one-day-training
levii
0
120
人生の転機からチャンスを掴む「シュロスバーグの4Sモデル」/4s-models
yuko_yokouchi
3
770
Project Sprint 学生版(入門編)
copilot
PRO
0
200
5 занятие. Разбор метода "8 кубиков"бизнес-модели #ideaNN 16.02.2024.
karlov
0
180
合理的配慮を知るワークショップ/Understanding Reasonable Accommodations (Workshop)
freee
2
1.5k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
Copilotとして理解する生成AI利用の基本
gmoriki
1
160
Featured
See All Featured
KATA
mclloyd
16
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Git: the NoSQL Database
bkeepers
PRO
423
63k
The Invisible Side of Design
smashingmag
294
49k
Statistics for Hackers
jakevdp
790
220k
In The Pink: A Labor of Love
frogandcode
138
21k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Building Applications with DynamoDB
mza
88
5.6k
Visualization
eitanlees
137
14k
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