CSS 三栏布局入门
首先，我是CSS盲[只听说过box model]，没动手实践过，关于margin padding只知名称，不明细节。刚看过一叶斋大哥关于css布局的博文，再动手实践，动手记录下点滴积累以备后用。
<!DOCTYPE>
<html>
<head>
<style type="text/css">
#header{background-color: gray;}
#content{background-color: red;}
#sidebar_left{background-color: blue;float:left;width:100;}
#sidebar_left_left{background-color:gray;float:left;width:30}
#sidebar_left_middle{background-color:green;margin:0 35px 0 35px;}
#sidebar_left_right{background-color:yellow;float:right;width:30}
#sidebar_right{background-color: green;float:right;width:160}
#footer{background-color: yellow;}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>这里是标题</h1></div>
<div id="sidebar_left">
<div id="sidebar_left_left"><p>左侧边栏左</p></div>
<div id="sidebar_left_right"><p>左侧边栏右</p></div>
<div id="sidebar_left_middle"><p>左侧边栏中中中中中中中中中</p></div>
</div>
<div id="sidebar_right">
<p>侧边栏2：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐
标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总
结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
实的阅读材料。</p>
</div>
<div id="content" style="margin-left:100;margin-right:160">
<p>这里是一些文字</P>
<p>再来一大段文字</P>
<p>地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐标的过程。
因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总结。如果你
之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务实的阅读材
料。</p>
</div>
<div id="footer" style="clear:both"><p>没人关注的页脚</P></div>
</div>
</body>
</html>
细节可以参考一叶斋的博文。
自己的心得：
1.标题栏header占一行；页脚footer最下边(使用clear:both控制当中间红色部分比两边内容的height小时，依然独占一行，详见一叶斋博文)
2.右边绿色部分用float:right + width(100)控制；同样左边蓝色部分用float:left + width(150)控制；
3.主要一点，左蓝右绿的<div>在整个html文档中出现的顺序必须在中间红色部分之前。参见此文
4.中间content部分，即红色一段用margin控制其距浏览器左右边界的距离，margin:0 100(右绿的width) 0 150(左蓝的width);
以上四不就完成简单的header+中间(左栏+中栏+右栏)+footer的布局；以下是用同样的方法将左栏(蓝色部分)分成三部分：即分别用sidebar_left_left、sidebar_left_middle、sidebar_left_right的float和margin属性控制。
posted on 2013-07-22 15:43 paul_cheung 阅读(204) 评论(0) 编辑 收藏 举报
