css定位与布局 2

三种定位方式

浮动定位

实例

 


"nav">
  "#">链接1
  "#">链接2
  "#">链接3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

float属性 left、right
clear属性left、right、both
float属性:
left—左浮动
right—右浮动
none—不浮动

实例：

"box1">box1
"box2">box2

1
2
3
4
5
6
7
8
9
10
11
12
13

clear属性
both，清除左右两边的浮动。
left 和 right 只能清除一个方向的浮动。
none 是默认值，只在需要移除已指定的清除值时用到

实例：

"container">
  
"main">
    
"left">左侧内容
    
"right">右侧内容 
  
  
"footer">页脚部分


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

1行1列布局

"container">


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

三行1列

"container">
  
"header">

  
"main">

  
"footer">



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

一行两列

 *{
	margin: 0;
	padding: 0;
}
body {
	font-family:"微软雅黑";
	font-size:14px;
}

#container {
	margin:0 auto;
	width:1000px;
	height:500px;
}
#aside { float:left; width:300px; height:500px; background:#f00;}
#content { float:right; width:695px; height:500px; background:#0f0;}
  


"container">
  
"aside">
  
"content">


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三行两列 把前面的组合起来

"container">
  
"header">
  
"main">
    
"aside">
    
"content">
  
  
"footer">


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

四行三列

.aside{
	float:left;
	width:100px;
	height:500px;
	background:#6cf;
}
#aside1 {

}
#aside2 {
    margin-left:5px;
}
#content{
	float:left;
	margin-left:5px;
	width:690px;
	height:500px;
	background:#cff;
}
#footer {
	height:60px;
	background:#6cf;
}
  


"container">

  
"header">
  

  
"nav">
  

  
"main">
	  
"aside1" class="aside">
	  

	  
"content">
	  

	  
"aside2" class="aside">
	  
  

  
"footer">
  



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

层定位

	



"box1">
    "第二章 前端快速入门/2.jpg">
    
"box2">一起享受咖啡带来的温暖吧



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29