Download præsentationen
Præsentation er lastning. Vent venligst
Offentliggjort afSven Østergaard Redigeret for ca. et år siden
1
Join.me/webkursus
2
* Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række inline-block-regler * Inline-block elementer opfører sig som inline elementer, * position, størrelse, margin, padding mm., kan sættes på inline-block elementeter
3
* Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række inline-block-regler
4
1 23 45
5
1 2
8
Del altid op i enten rækker eller kolonner
9
Aldrig rækker og kolonner på en gang…
10
…lav 3 rækker og derefter 2 kolonner
11
Aldrig rækker og kolonner på en gang…
12
…lav 2 kolonner og derefter 3 rækker
13
Hvilken løsning er den korrekte?
14
Ingen af dem!
15
Der er kolonner og rækker inden for samme element!
16
Eksempel:
17
Del først op i rækker
19
Del derefter den midterste række op i kolonner
21
Del derefter den højre kolonne op i 2 rækker
24
#wrapper #content section footer header nav article aside
25
wrapper header content nav section article aside footer header nav article aside
26
footer header nav article aside
27
* Beslut dig for hvilken inddeling af dit site der er den bedste. Overvej hvilke block og inline elementer * Inddel indholdet af dit portfolio-site i “kasser” og navngiv dine elementer (se slide 24) * Lav en plan for din html struktur (se slide 25) * Foretag evt. ændringer af din html struktur (se slide 26)
28
block inline footer header nav article aside
29
* Height & width * Margin * Padding * Border http://www.w3schools.com/css/css_boxmodel.asp
34
* Firebug til Firefox * Firefox Tilt * Udviklerværktøjer til chrome
35
* w3schools reference: http://www.w3schools.com/cssref/default.asp * css zen garden: http://www.csszengarden.com/ * css validator: http://jigsaw.w3.org/css-validator/validator
36
Byg videre på dit site, så: * Elementerne er positioneret korrekt, herunder padding og margin * Teksten har den ønskede størrelse, type og farve * Farverne er som ønsket * Du har de rette baggrundsbilleder Afleveres i Fronter som link til index.html i din dag 6 mappe. Deadline i morgen (tirsdag) kl. 23.59.
Lignende præsentationer
© 2024 SlidePlayer.dk Inc.
All rights reserved.