如何增加css代码的复用率，这个制约着开发的效率。
这么多天学习DNN皮肤，我懂得了一点就是结构化。在DNN皮肤的制作中，我发现了DNN在写html和css代码的连个很大的优点。
其中一个就是固定的一个HTML代码块，叫做pane结构，还有一个代码块叫做container，container代码是书写在pane结构中的。
在书写了很长时间的CSS之后很多人都会发现自己写的结构放佛是固定的。
从上到下，一次是head,logo menu,然后是banner，下面再是某种左右或者上下结构。。
在DNN中pane结构就是用了解决下面的问题的，pane结构大致是这样子的。
<div id=”allPane”>
<div id=”TopPane” runat=”server” visible=”false”></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”LeftPane” runat=”server” visible=”false”></td>
<td>
<div id=”HeadPane” runat=”server” visible=”false”></div>
<div>
<div id=”CenterTopPane_AB_A”><div id=”CenterTopPane_A” runat=”server”></div></div>
<div id=”CenterTopPane_AB_B”><div id=”CenterTopPane_B” runat=”server”></div></div>
</div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”MiddleLeftPane_A” runat=”server” visible=”false”></td>
<td id=”MiddleCenterPane_A” runat=”server”></td>
<td id=”MiddleRightPane_A” runat=”server” visible=”false”></td>
</tr>
</table>
<div id=”ContentPane” runat=”server” visible=”false”></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>
<tr>
<td id=”MiddleLeftPane_B” runat=”server” visible=”false”></td>
<td id=”MiddleCenterPane_B” runat=”server”></td>
<td id=”MiddleRightPane_B” runat=”server” visible=”false”></td>
</tr>
</table>
<div>
<div id=”FooterPane_ABCD_A”><div id=”FooterPane_A” runat=”server”></div></div>
<div id=”FooterPane_ABCD_B”><div id=”FooterPane_B” runat=”server”></div></div>
<div id=”FooterPane_ABCD_C”><div id=”FooterPane_C” runat=”server”></div></div>
<div id=”FooterPane_ABCD_D”><div id=”FooterPane_D” runat=”server”></div></div>
</div>
<div id=”FooterPane” runat=”server” visible=”false”></div> </td>
<td id=”RightPane” runat=”server” visible=”false”></td>
</tr>
</table>
<div id=”BottomPane” runat=”server” visible=”false”></div>
</div>
由一张很大的表组成，上下左右各有头部，上下左右，各有很多pane。pane结构的CSS代码如下：
#allPane {
padding:0px 22px 3px;
min-height:280px; position:relative; z-index:11;
}
.dnnpane {
padding: 0 10px 0;
}
.pane-box,.MiddleCenterPane_A {
vertical-align: top;
}
.LeftPane,.RightPane {
width: 20%;
vertical-align: top;
}
.MiddleLeftPane_A,.MiddleRightPane_A {
width: 27.3%;
vertical-align: top;
}
#CenterTopPane_AB_A {
float: left;
width: 50%;
}
#CenterTopPane_AB_B {
float: right;
width: 49.9%
}
html>/**/body #CenterTopPane_AB_B {
width: 50%;
}
#Middle_ABC_A,#Middle_ABC_B {
float: left;
width: 33.333%;
}
#Middle_ABC_C {
float: right;
width: 33%;
}
html>/**/body #Middle_ABC_C {
width: 33.333%;
}
#FooterPane_ABCD_A,#FooterPane_ABCD_B,#FooterPane_ABCD_C {
float: left;
width: 24.9%;
}
html>/**/body #FooterPane_ABCD_A,html>/**/body #FooterPane_ABCD_B,html>/**/body #FooterPane_ABCD_C {
width: 25%;
}
#FooterPane_ABCD_D {
float: right;
width: 24.9%;
}
html>/**/body #FooterPane_ABCD_D {
width: 25%;
}
.CenterTopPane_A,.CenterTopPane_B,.MiddleCenterPane_A,.MiddleLeftPane_B,.MiddleCenterPane_B,.MiddleRightPane_B,.FooterPane_A,.FooterPane_B,.FooterPane_C,.FooterPane_D {
width: auto !important;
}
.DNNEmptyPane {
width: 0;
margin: 0;
padding: 0;
}
/* =E Pane */
pane的结构是很灵活的，没有任何绝对的像素，都采用白分比以及最小宽高组成。如果不往pane加内容pane也就不显示。
这个大大的方便了CSS的编码，只要做少量的修改既可以增加和完善pane，并且可以不断的重复使用。
在DNN中的另外一个优势是container，在网页布局中我们总是使用各种类似容器的东西承载各种内容。
就像一个小盒子，每个盒子都有标题，背景，然后有一个内容框。做这样一个框框放置于pane结构中。选好适合的pane效果就排出来了。
container的代码相对简单，这里就不全部放出了。
大致就是这些，在DNN中的MENU使用了jquery的一个jdmenu的控件，这个给导航条的建立提供了很大的方便，这一点也是很方便的，限于篇幅以后附上。
Tags: DNN, DNN皮肤
Subscribe RSS Feed
