liferay css讲解之三 themes/相应风格/css/layout.css讲解

在每个风格文件夹下面都有一个CSS文件,里面都会有十个CSS文件,今天讲一个简单点的layout.css,其实看名字也知道这个文件是用来定义本风格的布局的样式的,如何自定义布局在我前面的文章有,这里就不讲了.
/* ---------- Column widths ---------- */

.lfr-column.dragging {
height: 100px;
min-height: 100px;
}
.lfr-column.ten {
width: 10%;
}
这些定义了一些宽度,这些在layout/custom/***.tpl文件里可以看到
<td class="lfr-column fifty" id="column-2" valign="top">
   $processor.processColumn("column-2")
</td>
之类的,就是定义这些宽度的,
/* ----------index  1-3-1 ---------- */
.lfr-column1{
width: 241px;
height:auto;
background-image:url();
background-repeat:repeat-x;
padding:0px 40px 40px 5px;
}这些就是定义1-3-1布局里面的,可以打开1-3-1.tpl找到调用的地方
<td class="lfr-column1" id="column-2" valign="top">
$processor.processColumn("column-2")
</td>
这里定义了他的宽,背景,padding值,当然了你可以根据你的需要加一些更多的东西,高度一定要是自动的,当然如果你能保证你的网页高度全相同也可以定死.这里说个题外话,如果布局写义的较复杂的话,在页面拖放portlet经常发生拖不过去的情况,很难找到正确的位置,我们可以先把高度定200,这样就很轻松的把portlet拖放进去了,然后再把height=auto;这是一个小技巧.
   layout.css这个文件最主要的就是这些,看注解就能发现他还定义了后多的布局的样式.