paul_cheung

导航

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  阅读(220)  评论(0)    收藏  举报