liferay css讲解之二 portlet外观与风格CSS

今天讲一下portlet外观与风格里面的CSS编写,每个portlet都可以定义他的CSS,当增加一个portlet时,我们该如何下手,以导航为例,因为导航是比较复杂的也是比较常用的portlet,增加导航后,保存静态面在本地,因为有很多portlet用到了JQUERY技术,如果直接击右键根本看不到相应导航的代码,所以下到本地可以看到他的表态代码,可以发现导航用的是ul li 来定义的,这样就可以来定义他的样式,如下代码:
/* CSS Document */



.ie6 .portlet-boundary.portlet-boundary_71_ LI {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px; }
.ie6 .portlet-boundary.portlet-boundary_71_ LI.selected {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px;}

.portlet-boundary.portlet-boundary_71_ LI {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px; }
.portlet-boundary.portlet-boundary_71_
LI.selected {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px;}

.portlet-boundary.portlet-boundary_71_LI A:link {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A:hover {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #c90000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A:visited {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A:link {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #113981; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A:hover {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #c90000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #113981; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A:visited {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #113981; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}


再如日志文章可以看到用的是table 并且第一列ID:col1,第二列ID:col2,并且单行和双行的ID也是不同的,这样就可以定义不同的样式,其实liferay的portlet基本上都是这样定义的,这也就方便了我们来定义他的CSS,建义大家在开发portlet的时候也能这样来做,方便以后的样式定义.当然了,调试这些样式也是一个及其痛苦的过程.