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]

评论

Popular Posts

高硼硅玻璃水杯

《小狗钱钱》[德] 博多·舍费尔

甄果人 原味香葱牛轧饼

新概念英语PDF扫描版

《斗破苍穹》天蚕土豆

CuteHttpFileServer/chfs 文件服务器,支持http,webdav,多平台

jamesdonkey贱驴无线蓝牙鼠标

MIFARE Classic Tool - 安卓NFC门禁卡修改工具

月光宝盒 - 提供网站数据备份服务