标签：
（1）优点：
将主体内容放在前面更符合语义化。
语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.
语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。
事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。
当网速比较慢时，能够先加载主要内容，比如css文件加载失败时，主体内容能够在更靠前的位置显示 。
（2）具体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css 布局</title>
<style type="text/css">
body{
min-width: 988px;
}
#head{
text-align: center;
}
#container{
padding-left: 200px; /*左边栏目宽度，撑出宽度留给左边栏目*/
padding-right: 150px; /*右边栏目宽度*/
overflow: hidden;
}
#container .column{
position: relative;
float: left;
}
#center{
background:#eee;
padding: 10px 20px; /*用padding撑起容器*/
margin: 0 15px;
width: 100%;
min-height: 300px;
overflow:visible;
}
#left{
width:180px;
background:green;
margin-left:-100%; /*当margin-left为负宽度时，div会排列到前面去*/
right: 270px; /*180+60(padding total)+ 30(margin)*/
padding:0 10px; /* LC fullwidth + CC padding */
min-height: 300px;
}
#right{
width: 130px;
background:yellow;
padding: 0 10px;
margin-right: -240px; /*fullwidth + center column padding 尽量大一点，chrome浏览器下，这个div浮动不上来*/
min-height: 300px;
}
#footer{
clear: both;
text-align: center;
}
/*IE6 fix*/
* html #left {
left:100px;
}
</style>
</head>
<body>
<div id="head">
<h1>head</h1>
</div>
<div id="container">
<div id="center" class="column">
center
</div>
<div id="left" class="column">
left
</div>
<div id="right" class="column">
right
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
</html>
圣杯布局
标签：
原文地址：http://www.cnblogs.com/h1359705211/p/4385662.html
