mojoportal学习——文章翻译之布局的一些原理
翻译的不好 大家见谅
当建立一个页面的时候,内容管理系统会使你选择一列来进行页面布局。在mojoportal中,支持1-3列的自动布局。
你需要明白的是有3个placeholder在layout.master中。divLeft ,divCenter,divRight 将会用来显示内容管理系统中的内容。。
系统会根据你的内容来自动调整1-3列的页面布局。
你可以添加可选的页面区域,使用 Content Templates.
CSS类的工作逻辑:
如果页面有菜单或者其他内容在divLeft,没有内容在divRight,divCenter的CSS类名将会是:center-leftmargin
如果页面有菜单或者其他内容在divRight,没有内容在divLeft,divCenter的CSS类名将会是:center-rightmargin
如果divleft和divright中都有内容,divCenter的CSS类名将会是:center-rightandleftmargins.
如果divleft和divright都没有内容,divCenter的CSS类名将会是:center-nomargins
如果divLeft或者 divRight没有内容和菜单,显示属性将会被设置为false.从标签中完全删除。
mojoportal模板中的页面列布局有2中方式,边列布局以绝对位置,或者浮动所有布局列。
》》》左右列以绝对位置布局
例子:
.leftside { position: absolute; left:6px; top:172px; width:160px; }
html>body .center-nomargins { margin: 3px 5px 0px 5px; }
html>body .center-rightandleftmargins { margin: 0px 172px 0px 172px; }
html>body .center-rightmargin { margin: 0px 172px 0px 5px; }
html>body .center-leftmargin { margin: 0px 5px 0px 172px; }
.rightside { position: absolute; right: 6px; top:172px; width:160px; }
》》》 所有列靠左浮动
例子:
.leftside { float:left; width:186px; margin: 10px 10px 0px 5px; }
.center-nomargins {float:left; width: 818px; margin: 10px 12px 0px 18px;}
.center-rightandleftmargins {float:left; width:455px; margin: 10px 0px 0px 0px;}
.center-rightmargin {float:left; width: 642px; margin: 10px 0px 0px 10px;}
.center-leftmargin { float:left; width: 642px; margin: 10px 0px 0px 0px; }
.rightside { float:left; width:186px; margin: 10px 0px 0px 10px; }