css page layout

24
Mr. Thien Tran Quang CSS Slicer [email protected]

Upload: thien-thanh-that

Post on 21-Jun-2015

280 views

Category:

Technology


2 download

DESCRIPTION

1st version

TRANSCRIPT

Page 1: Css page layout

Mr. Thien Tran QuangCSS Slicer [email protected]

Page 2: Css page layout

Box ModelPage LayoutPositioning

Page 3: Css page layout

What is this?How works it?

Page 4: Css page layout
Page 5: Css page layout

Three-dimensional visualization of the CSS box model

Remember: the width property declares the width

of the element’s contents, not its box.

Page 6: Css page layout

IntroductionEqual height problem

Page 7: Css page layout

“What the designer sees,

the user sees”

Fixed Layout

Page 8: Css page layout

“Flexible for

differents screen

resolution”

Fluid Layout

Page 9: Css page layout

Mixes the two

other main

layout types. It

works by sizing

all elements with

em‘s.

Elastic Layout

Page 10: Css page layout
Page 11: Css page layout

The height of each column is depend the contents in column.

Page 12: Css page layout

Key: Relative position property .

Page 13: Css page layout

Key: Background Repeat Property

Page 14: Css page layout

Position:static | relative | absolute | fixed Floating and Clearing

Page 15: Css page layout
Page 16: Css page layout
Page 17: Css page layout
Page 18: Css page layout
Page 19: Css page layout
Page 20: Css page layout

Mystery of Float

Page 21: Css page layout

Clearing

Page 22: Css page layout

Float column and “footer problem”

Page 23: Css page layout

“Footer problem” and solution

Page 24: Css page layout