css横向纵向自动撑开的九宫格模块原型
横向纵向自动撑开的九宫格模块原型,在博客系统和要改变大小的模块中应用比较广泛。
看图，当窗口宽度比较小的时候：
当窗口宽度放大的时候：
这个九宫格模块原型的主要特点:
1. 横向根据外层的宽度自动撑开；
2.纵向根据内容的高度自动撑开；
3.可以根据设计稿的随意更改外观，更改背景图片，大小，换肤等。
查看演示(改变浏览器窗口查看效果)：http://www.9demo.com/demo/mokuai/demo.html
*{margin:0; padding:0;}body{ font-size:12px; color:#FFF; }
/*mdl*/
.mdl{min-height: 1px; margin: 5px}
.mdl_t { position: relative}
.mdl_t_l ,.mdl_t_r{font-size: 1px; overflow: hidden; position: absolute; top: 0px}
.mdl_t_c { overflow: hidden; position: relative; text-align: left;font-weight:700;}
.mdl_t_l {left: 0px}
.mdl_t_r {right: 0px}
.mdl_t_m{position:absolute;text-align:rightright;height:20px;line-height:20px;}
.mdl_c { position: relative; overflow: hidden;display: block!important; display:inline-block;}
.mdl_c_l ,.mdl_c_r{font-size: 1px; z-index: 10; position: absolute; top:0px;margin-bottom: -32767px; padding-bottom: 32767px}
.mdl_c_l {left: 0px}
.mdl_c_r {rightright: 0px}
.mdl_c_c { z-index:2;ZOOM: 1;position: relative;WORD-WRAP: break-word;word-break: break-all;overflow:hidden}
.mdl_b {overflow: hidden; position: relative;}
.mdl_b_l,.mdl_b_r {font-size: 1px; position: absolute; top: 0px}
.mdl_b_c { overflow: hidden; position: relative; }
.mdl_b_l {left: 0px}
.mdl_b_r {rightright: 0px}
/*更改外观，更改背景图片，大小，换肤等*/
.mdl_t{height: 32px;}
.mdl_t_l{ background: url(images/ps01.gif) no-repeat; width: 7px; height: 32px }
.mdl_t_r{ background: url(images/ps01.gif) no-repeat 0 -33px; width: 7px; height: 32px }
.mdl_t_c{ background: url(images/ps02.gif) repeat-x; height: 32px;margin: 0 7px;line-height: 32px}
.mdl_c_l{ background: url(images/ps03.gif) repeat-y; width: 7px; height: 32px;}
.mdl_c_r{ background: url(images/ps03.gif) repeat-y -8px 0; width: 7px; height: 32px; }
.mdl_c_c{ background: #434343;margin: 0 7px}
.mdl_b{height: 7px;font-size: 1px;}
.mdl_b_l{ background: url(images/ps01.gif) no-repeat 0 -66px; width: 7px; height: 7px }
.mdl_b_r{ background: url(images/ps01.gif) no-repeat 0 -74px; width: 7px; height: 7px }
.mdl_b_c{ background: url(images/ps02.gif) repeat-x 0 -33px; height: 7px;margin: 0 7px;}
横向纵向自动撑开的九宫格模块原型
这个是横向纵向自动撑开原型,这个原型在博客系统和要改变大小的模块中应用比较广泛。
这个九宫格模块原型的主要特点:
1.横向根据外层的宽度自动撑开；
2.纵向根据内容的高度自动撑开；
3.可以根据设计稿的随意更改外观，更改背景图片，大小，换肤等
[link]
评论