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

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

  
<!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>