NEC学习 ---- 布局 -三列， 左右定宽，中间自适应

---恢复内容开始---

这个布局很牛掰, 我觉得学习价值很大. 

通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 html 代码就是够用, 没有一个系统的解决方案, 所以我打算深入地学习一下NEC----一个CSS方案, 让自己的html 和 Css 知识更巩固.

同样希望对大家有用.

话不多说, 先看效果图.

 

代码如下:

HTML代码:

<div class="g-bd5 f-cb">
    <div class="g-sd51">
        <p>
            左侧定宽
        </p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>
                中间自适应
            </p>
        </div>
    </div>
    <div class="g-sd52">
        <p>
            右侧定宽
        </p>
    </div>
</div>

CSS代码: (同样的, 在此之前是引入reset.css 和 功能性样式[这里的类 f-cb])

.g-bd5 {
    margin: 45px 0 0 0;
}
.g-sd51,.g-sd52{
    position: relative;width:240px;
    margin: 0 -240px 0 0;
    float: left;
}
.g-sd52{
    float: right;
    margin:0 0 0 -240px;
}
.g-mn5 {
    float: left;
    width:100%;
}
.g-mn5c{
    margin:0 250px 0 250px;
}
.g-bd5 p{
    height:120px;
    background-color:pink;
    padding:5px;
}
.g-bd5 p{
    height:120px;
    background-color:pink;
    padding:5px;
}

赶紧试试吧, :)