zoukankan      html  css  js  c++  java
  • 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; 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; 160px; }

    》》》 所有列靠左浮动

    例子:

    .leftside { float:left; 186px; margin: 10px 10px 0px 5px; }
    .center-nomargins {float:left; 818px; margin: 10px 12px 0px 18px;}
    .center-rightandleftmargins {float:left; 455px; margin: 10px 0px 0px 0px;}
    .center-rightmargin {float:left; 642px; margin: 10px 0px 0px 10px;}
    .center-leftmargin { float:left; 642px; margin: 10px 0px 0px 0px; }
    .rightside { float:left; 186px; margin: 10px 0px 0px 10px; }

  • 相关阅读:
    【JAVA实例】for循环实现猜数字游戏
    【python基础】常见模块:openpyxl & socket & requests
    【python实例】飞机大战
    【python实例】文件操作实例
    【python基础】单例模式 & 工厂模式 & 策略模式 & 观察者模式
    【python基础】os模块(库)方法汇总
    【python基础】文件读取
    【深度学习】paddlepaddle——基于多层神经网络的图像识别案例
    斑马斑马-15-微信小程序-基础语法
    斑马斑马-11-微信小程序-布局谋篇
  • 原文地址:https://www.cnblogs.com/wenjie/p/1853640.html
Copyright © 2011-2022 走看看