布局

对页面内容进行有格式的设置,就是网页布局

两栏布局

Left
Centre Content


<style type="text/css">
    .wrap{
        width:600px;
        border:1px solid #d1d1d1;
        position:relative;
    }
    .wrap .left{
        float: left; /* 浮动,脱离文档流 */
        width:200px; /* 固定宽度 */
        text-align: center;
        padding-top: 15px;
    }
    .wrap .centre{
        /*
            左边元素浮动后,脱离了文档流,
            这里需要 margin-left 浮动元素的宽度
            不这么做两者元素就会重叠
        */
        margin-left:200px;
        padding:15px;
    }
    /* 分割线 */
    .wrap:before {
        position:absolute;
        content:"";
        left:200px;
        top:0;
        height:100%;
        width:1px;
        background-color:#d1d1d1;
    }
</style>
/*使用 clearfix 清除浮动*/
<div class="clearfix wrap" style="">
    <div class="left" style="">
        Left
    </div>
    <div class="centre" style="">
        Centre Content
    </div>
</div>

三栏布局

Right
Left
Centre Content;


<style type="text/css">
    .wrap{
        width:600px;
        border:1px solid #d1d1d1;
        position:relative;
    }
    .wrap .left{
        float: left; /* 浮动,脱离文档流 */
        width:200px; /* 固定宽度 */
        text-align: center;
        padding-top: 15px;
    }
    .wrap .right{
        float: right; /* 浮动,脱离文档流 */
        width:200px; /* 固定宽度 */
        text-align: center;
        padding-top: 15px;
    }
    .wrap .centre{
        /*
            左边元素浮动后,脱离了文档流,
            这里需要 margin-left  左浮动元素的宽度
                    margin-right 右浮动元素的宽度
            不这么做两者元素就会重叠
        */
        margin-left:200px;
        margin-right:200px;
        padding:15px;
    }
    /* 分割线 */
    .wrap:before,.wrap:after {
        position:absolute;
        content:"";
        top:0;
        height:100%;
        width:1px;
        background-color:#d1d1d1;
    }
    .wrap:before{
        left:200px;
    }
    .wrap:after{
        right:200px;
    }
</style>
/*使用 clearfix 清除浮动*/
<div class="clearfix wrap" style="">
    <div class="right" style="">
        Right
    </div>
    <div class="left" style="">
        Left
    </div>
    <div class="centre" style="">
        Centre Content
    </div>
</div>