使用负边距创建自适应宽度的流体布局

http://www.cnblogs.com/zzh/archive/2008/10/13/1309841.html

 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
  
<!DOCTYPE html>
  
<html>
  
<head>
  
<title>CTS</title>
  
<style type="text/css">
  
body,p,h1,h2,ul {
  
margin:0;padding:0;
  
}
  
#header {
  
background-color: #A8A754;
  
}
  
#footer {
  
background-color: #A8A754;
  
clear: both;
  
}
  
#mainer {
  
width: 100%;
  
margin-right: -250px;
  
float: left;
  
}
  
#sideBar {
  
float: right;
  
width: 250px;
  
color: #FFF;
  
background-color: #36361A;
  
}
  
#main {
  
margin-right: 250px;
  
background-color: #616030;
  
}
  
</style>
  
</head>
  
<body>
  
顶部区域
  

  
使用负边距创建自适应宽度的流体布局
  
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 
  
  

  
最新文章
  

  
最新文章一
  
最新文章二
  
最新文章三
  

  
  
底部区域
  
</body>
  
</html>