4html web前端授课件12 css布局.pdfVIP

CSS

CSS

CSSfloatpositionoverflowclear

CSS

HTMLCSS

div

1divclassheaderheader//divdiv

2divclassmainbodydiv

mainbody/div

3divclassfooter/dv

footer/div

:0;border:0;border:none}

1*{margin:0;bordr:;brder:none}

gin:0;border:0;border:none}

2body{margn:;brder:0;border:none}

margin

auto

1margin:0ato;

auto;

position

1style

2.right

3{

4position:abolue;

bsolute;

5right:0px;

6width:300px;

7background-color:#b0e0e6;

8}

9/style

float

1style

2.right

3{

4float:right;

5width:300px;

6background-color:#b0e0e6;

7}

8/style

divwidthheight

1.header{heigth:500px;}

2.mainbody{width:1000px;heigth:500px;}

CSS

1#fff

2#000

3#ccc

4#ddd

1width:20%

float

1float:left

t

2float:right

bsolute

3position:absolue

absoluteabsolutetop/right/bottom/leftrelativeive

body

floatfloat

overflow:hiddenoverflow:hiddclear:both

idden

1overflow:hidden

2clear:bothh

CSS

1head

2metacharsetUTF-8

3title/title

4styletypetext/css

5body{margin:0;padding: