万能的模型布局框架

先了解一下布局框架模型：

      最近一直在帮公司做博客系统，为了换肤，还得设计一个通用的布局模型，在网上查了很多的资料，以及吸收了很多好的网站的设计方案，总结出了一套比较好的通用布局框架模型。。

 上图是基本布局模型图。标识的基本含义：

• mdl - module 模块
• mdl_t - module top 模块头部
• mdl_t_l - module top left 模块头部左边部份
• mdl_t_r - module top right 模块头部右边部份
• mdl_t_c - module top center 模块头部中间部份
• mdl_c - module center 模块中部
• mdl_c_l - module center left 模块中部左边部份
• mdl_c_r - module center right 模块中部右边部份
• mdl_c_c - module center center 模块中部中间部份
• mdl_b - module bottom 模块底部
• mdl_b_l - module bottom left 模块底部左边部份
• mdl_b_r - module bottom right 模块底部右边部份
• mdl_b_c - module bottom center 模块底部中间部份

 接下来，看看CSS example。

/**//* 模块布局的基本CSS样式，不包括颜色或者图片 */
.md_hide{...}{overflow:hidden;display:block !important;display:inline-block;}
.md_fill{...}{padding-bottom:32767px;margin-bottom:-32767px;}
.mdl{...}{width:400px;}
.mdl_t{...}{position:relative;height:25px;}
.mdl_c{...}{position:relative;}
.mdl_b{...}{position:relative;height:10px;}
.mdl_t_l{...}{position:absolute;top:0;left:0;width:15px;height:25px;}
.mdl_t_r{...}{position:absolute;top:0;right:0;width:15px;height:25px;}
.mdl_t_c{...}{margin:0 15px;height:25px;line-height:25px;font-weight:bold;}
.mdl_c_l{...}{position:absolute;top:0;left:0;width:5px;}
.mdl_c_r{...}{position:absolute;top:0;right:0;width:5px;}
.mdl_c_c{...}{margin:0 5px;}
.mdl_b_l{...}{position:absolute;top:0;left:0;width:15px;height:10px;}
.mdl_b_r{...}{position:absolute;top:0;right:0;width:15px;height:10px;}
.mdl_b_c{...}{margin:0 15px;height:10px;}

.md_fill 类，用一个足够大的内边距，和一个足够大的负外边距来实现DIV能够往下自由伸缩。而.md_hide类，则是隐藏掉mdl_c_l和mdl_c_r所在的DIV过长（应用了md_fill）的边。

下面是该模块布局的HTML结构：

<div class="mdl">
    <div class="mdl_t">
        <div class="mdl_t_l">&nbsp;</div>
        <div class="mdl_t_r">&nbsp;</div>
        <div class="mdl_t_c"></div>
    </div>
    <div class="mdl_c md_hide">
        <div class="mdl_c_l md_fill">&nbsp;</div>
        <div class="mdl_c_r md_fill">&nbsp;</div>
        <div class="mdl_c_c">
        </div>
    </div>
    <div class="mdl_b">
        <div class="mdl_b_l">&nbsp;</div>
        <div class="mdl_b_r">&nbsp;</div>
        <div class="mdl_b_c"></div>
    </div>
</div>

该万能模块布局的HTML基本结构。。。

我们来看看它的自动向下伸缩的效果：

 

 

模块名称

 

 

 

 

这样的布局和表格布局的3X3个单元格很相似，所不同的是，这样的布局的适用性非常的强，他可以不依赖于表格的正规的方格，给设计师非常大的想像和设计空间，再者，页面的载入速度比表格要快得多。